Wireframe Wizard

For the wireframe wizard badge I chose to make a site for a band I play with on and off depending on my amount of free time. For those that do not know I play the bagpipes. I have been playing since I was 9. It was something my school did. I have competed with my schools band internationally and we have won the World Championships five times. Two of those times while I was there (2004 and 2006). After you graduate high school you can join the Alumni band if you want. I played with them for a few years but do not do so right now. Currently the band is rebranding itself, they have come up with a new logo and have gotten new uniforms. As of yet they do not have a site, so I used this as an opportunity to come up with a wireframe for a potential site for them. The purpose of this site is to create a web presence outside of Facebook for the band. It is there to inform people about the band, let them listen to samples of the band playing, let them buy merchandise and also to book the band. I designed wireframes for the Home page, Audio/Video sample page, and the About page.

I will start with the universal elements across all of the pages. At the top is the banner image. The banner image contains the logo of the band along with an accompanying image. For example the logo of the band on top of a gradient image with the appropriate tartan (read: plaid colors) fading to black or an appropriate color that works with the tartan. After the banner image/logo, you have the navigation bar. It is nothing complicated, just a simple HTML navigation bar for each of the pages. It is at the top so the user can know where they are and what other options are available to them. After that the title of each page is displayed. On the left hand side of the page are the logos for Facebook and Twitter. Those each link to the respective social media page for the band. There is also a button to access the calendar for the band and to share the current page. At the bottom is any copyright info that the band wants to have.

For the Home page I have a simple setup. It is an image along with basic text that simply welcomes the user to the band page and gives a brief introduction. Below that there is a simple slideshow of images. On the About page, I have another simple setup. There is one image and the rest of the page is devoted to the history of the band as well as a listing of all accomplishments and awards the band has won. This is to add some credibility to the band instead of just having a brief explanation on the Home page. This allows the user to learn all about the band and its accomplishments. Lastly I have a page for audio and video sample. Presumably, if someone is curious about the band and the band claims to be good, the user is going to want to hear some samples of the band in action. They might also want to watch a video clip of a performance or competition.

Overall the website is simple and easy to use. It is not overly cluttered with apps and plugins. I toyed with the idea of having the music play automatically but then I remembered how annoyed I get with websites that do that. Also some visitors may not enjoy bagpipe music but may be curious about the band so it would wise not to cause them to leave by forcing bagpipe music on them.

Google Analytics

For the Google Analytics Badge, I tracked my second minisite. For the “strategic analysis” portion of the badge I will roleplay a presentation to my presupposed “superiors” at a nameless company. The next paragraph begins the analysis. We will also assume that 23 visits is a good number.

“Our site has been relatively successful since we began tracking user data on it. Since April 27, we have had approximately 23 visits. Over half of those visits are by returning visitors. The average time spent on our site is approximately four and a half minutes, with a bounce rate of just over four percent. There have been 192 total page views across our entire site by those 23 visits. That is approximately 8 page views per visit. These figures indicate that our users are returning to our site and are engaged with our content. The low bounce rate indicates that users, both returning and new, are engaged with our site and have found it useful as over 90% are going on to other pages. We are also attracting new visitors as well, which shows that our web presence is being felt. Approximately 40% of page views are by new visitors.

21 of the 23 visits to the site were made via a desktop or laptop. The other two visits were made on a mobile device. All of the users had English set as their primary language. San Antonio was the primary location for the users access. 21 of the 23 views came from San Antonio. The other two views came from Dallas. Although it is possible that those vies could have come from anywhere in Texas as those were the mobile views and could be routed through the phone service providers hubs.Approximately 60% of our views came from Trinity University in San Antonio. This indicates that college students are using our page more than previously thought and that future efforts should investigate targeting local college students.

Cross platform compatibility is incredibly important. Approximately 65% of our users during this time frame operate on a Windows system, 26% use Mac OSX, and the remaining 9% use an Android system. Due to the high variability in operating systems, it is important that we do not use elements that would not work on any operating system, standard or mobile. Despite the variability in operating systems, 87% of our users use the Google Chrome browser. I feel this time frame is not indicative of the current market and that cross browser compatibility is also a must.

Overall our site has done well and I believe it will continue to succeed, but we must constantly evaluate and reassess our site and content to stay relevant. We have a strong customer base but there is room for improvement. Those individuals who created this site should be commended for their work.”

And now I’m done roleplaying. It was a little awkward but kind of fun to look through all the data. The hardest thing really was learning the difference between “absolute unique visitors” and the report for “new and returning visitors”. Luckily Google does a good job of explaining the difference. Here is the link to their explanation should anyone want to look at it: http://support.google.com/googleanalytics/bin/answer.py?hl=en&answer=113734

Badge: Geolocation

Oh Geolocation. Terrifying yet kind of awesome.

I really enjoyed the geolocation badge, a lot. It is really cool what you are able to do with geolocation. The first page I made was the basic page where you just show the user’s latitude and longitude. This is what mine looked like, nothing complicated, just text:

Basic lat and long page

The next step in the process was adding a distance marker in there. I just went ahead and used the coordinates given in the example, but you can really use anything, you just have to change the coordinates in the right variable. This was kind of cool because not only did it tell you where you were but you can actually calculate the distance between two points, which is, I’m assuming, partly how GPS map applications work.

Lat and long with distance

This next part was the hardest for me. I worked on this part for hours. I couldn’t figure out the problem. You are supposed to add a map into the page and it is supposed to display your location based on the geolocation data working with the Google Maps API. My problem was that I didn’t properly define the attributes in my CSS file. Once I fixed that, everything worked great.

Map with my (almost) exact location on it

This was REALLY cool because it got almost my exact location within my apartment complex. On the next picture you will see where it put the pin and it was only off by about 100 feet.

It put the pin at the top of the circle. My apartment is a little closer to the middle.

So as you can see it got really close. If you read the caption on the photo you’ll see that it wasn’t far off. At this point the program had you add in extra stuff to constantly try and update your location. For this to work the program has to know you’re moving. We added in a feature that displayed how accurate the location was. On my laptop I was between 35 and 80 meters of being dead center (that was the margin of error). When I tried to test this on my phone I was over 1400 meters off. That is roughly a mile for the margin of error. I still tried to test it out on my phone but my phones browsers (I tried multiple mobile browsers) all gave me the same result, plus I almost got in a wreck or two by staring at my phone and the geolocation app I made. It was still cool though. If I would reload the app, it would kind of update my location. It would be waaaay off though, but that is just a byproduct of such a huge margin of error. Here is a screenshot of the final product. If this was put on a mobile device you would be able to see it tracking you and placing a new pin everytime it got a new data point.

I really enjoyed this badge a lot. It is kind of creepy to see what things are able to do, luckily my privacy settings made the application ask everytime if it could use my location. I would advise everyone else to do the same, even on the phones.

Pen Tool

The dreaded Pen Tool. I am still not a huge fan of the pen tool. I won’t really use it unless I have to but this definitely made me more comfortable with it than I was previously. I had a few problems at the start but once I figured out a system I was able to get it going quite nicely.

The biggest problem I had was the curves I would make would affect the next line I wanted to make. It was really annoying at first but once you figure out how the system works it all goes quite smoothly. The advice I would give to anyone wishing to do this is just be patient. Eventually it will just click. It is really annoying at first but eventually you will figure it out and it will become much less annoying. Pay attention in the tutorials and if you need to, utilize Google. But really the absolute best solution is just trial and error. If you find a way that “accidently” works, try and recreate it. It will help you in the long run.

On to my creations!

The first thing I did was cut out a picture of Cristiano Ronaldo. He plays, currently, for Real Madrid, but when this picture was taken he played for Manchester United (boo!). Here is a picture of the various steps of the process. You see the original, the cutout and finally the silhouette.

Next we have my picture of myself that I cropped into an old photo of Led Zeppelin. This one was kind of hard because there aren’t many pictures of me in poses that I can add to a photo that would look somewhat normal. I went with this one because I love classic rock and Led Zeppelin is one of my favorites. I took a photo of myself holding one of the macaws from SeaWorld (her name is Maui) and cut myself out of it. I then made the image black and white to match the Zeppelin photo and cropped it. Once it was cropped I placed it into the Zeppelin photo and placed myself in a window. I then erased the image to make it look like I am sitting in the plane behind them looking at the photo being taken. Here is a gallery of that process happening and below it is the final product.

Minimalist Design

For my minimalist design badge I chose to make a book cover and a background/wallpaper for my computer. The book cover is a proposed cover for book two of Game of Thrones and the background is a background for Chelsea FC fans.

For the Game of Thrones cover I chose to focus on the second book of the series because that is the book currenty featured on the show. SPOILERS AHEAD! One of the big premises in the current book/season of Game of Thrones is that there is a war going on between the heads of four families, all claiming to be a King of some sort. Hence, the title of the book is A Clash of Kings. Each family is represented by a sigil, which is an animal. I took silhouettes of each of the four sigils and placed them on the page. The names of the families are not there, just the silhouettes. The gray color is to help stand out from the white background but also to add a little bit of contrast between the text and the images. Below the sigils, I have chosen to feature the title of the book in black ink on the page along with the authors name in a large font. I found this font in the font menu on Photoshop and decided on it because I wanted a serif font that would stand out. On the binding I have copied the title of the book as is tradition with most modern books. On the back I have chosen to have the usual praise for a book, but I have changed it a bit. Instead of having a long quote by a reviewer or a news source, I have taken one word from the reviews (which I made up) and placed them in the same font as the front. The intent of this is to capture the essence of the praise, without cluttering the back cover and sticking with the minimalist feel.  This particular design was difficult for me because when I first learned graphic design back in high school, it was for yearbook and whitespace was not allowed. You had to use every inch of the page and if you had whitespace, it had to be used very clerverly. To have a lot of whitespace on there was a little hard for me to do, but ultimately I am happy with the final product.

Cover for "A Clash of Kings"

I chose to do a wallpaper because I really liked the minimalist wallpapers that we had to look at for the badge. I chose to do it about Chelsea FC (which, for those that don’t know is a soccer team in England) because they are my favorite team and had recently won a huge game so it inspired me to make this wallpaper. I took the basic Chelsea logo and took away all but a few of the aspects of it.

Chelsea FC Logo

Chelsea FC Logo

I kept the lion and the balls and flowers around the lion. I then put it on a gray background, which color I sampled from the drop-shadow on the original logo. I tried a white background too but I did not like the look of it. The contrast was too stark and the white background looked poor on the screen. The gray provided enough contrast without overpowering everything else. I then took the initials of the team “CFC” and put them in a simple modern font below the lion. I also put the year the club was founded above the lion in the same font and color. This is a minimal design because it only near the absolute minimum: the basic logo, the initials of the club, and the year the club was founded. None of the aspects extends outside of the middle of the page. I actually really liked this a lot too and it has become my “Cover Photo” on Facebook.

Mobile UI Badge

For this badge, I chose to make a wireframe of a mobile interface for the sports blog, Kissing Suzy Kolber. Don’t go there if you are easily offended. Here are two screenshots of my proposed site:

Screenshot of home page

Screenshot of article page

Overall I enjoyed this badge. I tried to choose something that wouldn’t be insanely difficult but also not too easy like a tumblr page. It was actually something that I would like to see happen because its somewhat annoying to read a blog online that doesn’t have a mobile interface. Here is the link to my creative decisions: http://transmedia.trinity.edu/~acoe/MobileUIBadge 

Tech Forecasting Badge

For the tech forecasting badge I have chosen to write about Google’s Project Glass. Project Glass is a wearable user interface similar to glasses that allow the user to do many of the same things that a current smartphone can do. I examined the current state of the technology and proposed three different, but not mutually exclusive outcomes. Here is a link to my paper on the server: http://transmedia.trinity.edu/~acoe/TechforecastingBadge.

For those who have not seen the Project Glass video by Google, here it is: