Mobile Interfaces: IMDB

I’ve been a frequent user of IMDB for quite some time now. However the IMDB website for mobile is cluttered and at times difficult to navigate. This project focused on what effective design is comprised of on mobile platforms. Although there are variations between mobile devices, whether its Android or iPhone, or a smartphone versus a tablet, there are some core principles that are applicable across all devices.

The key principles to follow while designing for mobile:

  • Where possible keep navigation bars on the bottom of the screen because that is where users are most likely to have their thumbs for scrolling and selecting. Exception: Android phones have a navigation at the bottom of the screen, making it more effective to have a website’s navigation on the top of the screen.
  • Design larger button/links for users to press (at least 44px). Users need larger links that are easy to press with using thumbs.
  • Balance a brand’s identity with user experience, don’t sacrifice one for the other.
  • Consider designing for mobile first, then design for desktop browsers.
  • Keep mobile designs simple, users want to get to their information as quickly as possible, excessive content gets in the way of that.

With these thoughts in mind, a set of wireframes for three different types of IMDB pages were reconstructed. These included the basic home page, a profile page, and a page for user opinion polls.

imdb-home

profile

poll

For more information about the decisions behind these wireframe designs please read my strategic document which details recommendations for the IMDB mobile site.

Advertisements

Anarchy in the Monarchy: Minimalist Design

Before beginning any designing, I found that the most important tip for minimalist design is stripping down what you want to create to its most basic elements. Which can be harder than expected when designing for a complex topic with many important elements. A common challenge when designing is choosing a font. Somehow with this project everything just fell into place and worked perfectly. The search for fonts becomes easier with practice, and Adobe Photoshop can help manipulate them effectively.

One of my minimalist designs is a poster for one of my new favorite tv shows, The Royals. It airs on E! which already says a lot about it, and can best be described as one of the most ridiculous and trashy shows I’ve ever watched, but that’s what makes it so delightfully fun! My first thought was to just have a crown and scepter, but together on the poster they looked thrown on there without much thought. Instead the scepter was removed, leaving just the solid black crown which, for many, is most synonymous of royalty and a monarchy.

The design is simply a black crown on a solid deep red background. Red was selected for the background because it is consistent with the colors used in the show, it also often carries the connotation of power and passions which are both very present on the show. I looked for fonts that had a royal and gothic connotation, however, I realized it was important to shift and look for a more chaotic font to show the contrast between the stability of the monarchy and chaos in the show. Ultimately the font “Anarchy” was selected, it is very thin and does not have a bold option. That is where Photoshop if most useful. By duplicating the text layer it became darker, bolder, and more visible. This font appropriately contrasts the ridiculousness of The Royals with the idea of a stoic well behaved monarchy.

minimalist-royals

Two very similar poster were created. On includes the logo for E! since that is the channel The Royals airs on. This helps add a little more context to the poster, but I don’t think it is vital.

minimalist-royals-logo

The second minimalist design was a bit more personal. I designed a desktop wallpaper for a friend of mine, Aynav Leibowitz. Above all else she love llamas. I wanted any design for the wallpaper to be to the side of the screen and not centered so it would not get covered in files. I found an image of a llama in black and reflected it to create two kissing llamas. The simple black silhouette is just detailed enough to show that it is a llama, and it is not so complex that it would make reflecting it difficult in Photoshop.

With nothing else on the design, the focus stays on the llamas. I was looking for a romantic font but was not finding a simple cursive writing that I liked, so on a whim I searched llamas on dafont.com and this delightful font called “Radical Llamas” was a result. I think it fits perfectly as a frame below the llamas.

I chose an orange-yellow color to maintain a soft almost romantic tone. This color also contrasts nicely with the black, and is not so bright a yellow that it would irritate the user’s eyes.

desktop

I used Adobe Photoshop to make these designs, and it was a smooth process. There will always be things about Photoshop that annoy me, but this semester I’ve gained a lot of experience using it and am no longer deathly afraid when something does not work, I now know I can fix it and move forward with my designs without worry.

Dos Suenos

This week I bought a domain! Going into this project I wanted to use an established hosting service, so I was somewhat drawn to GoDaddy, mainly because I had heard of it. However, I am not a fan of how they represent women, so I continued researching. I looked at some of the competitors, like A Small Orange and others. However, my biggest influence in deciding was what my peers said during their presentations. They had a positive experience using Arvixe, which I hadn’t heard of, so I researched it as well.

I read PC Magazine’s review of Arvixe and I found it was overall very positive. The only negative things were that the phone customer service is not the best, and that a dedicated server is pricey. But I’m not too worried if only the phone support was bad and I do not think I will need a dedicated server anytime soon. If I choose to keep this website and want to commit, changing plans does not look all that difficult, nor is the price outrageous.

When I was comparing web hosting services I also compared them on the Better Business Bureau. Arvixe had almost no complaints. Meanwhile most had upwards of 100 and others over 800. That was a huge red flag for me, so I decided to go with Arvixe.

Arvixe, like many places claims to have unlimited disk space, monthly data transfers, etc. I suspect, like many web hosting services whenever they claim something is unlimited or 100%, it isn’t, but has so much space that it is unlikely that users will ever need it all, so why not call it unlimited?

For my website I wanted to create something useful. I wasn’t ready to assemble a personal portfolio, or a personal site. So, I decided to make a little website for my parents. They are in the process of starting a business, so I made them a simple website to start giving them ideas of what it could look like when they expanded.

When I set up everything on Arvixe I was very nervous, but the process was smooth. I went through the tour of what everything does, clicked random things to get a feel for it. I set up a SFTP connection and uploaded my files like we have been doing in class all semester long on the transmedia server. And then my website was live! If you are interested, please check out the brand new website for Dos Suenos!

This is my favorite page, I would like to say my coding skills made it so amazing, but it is the animals and photography that really make it so cool!

suenos

Changing Landscape for Tablets

I researched the current landscape of tablets. The main change I found is that consumers are opting for larger smartphones, rather than owning smaller smartphones in addition to their tablets. While tablet ownership is still increasing, in a few years it is likely to decline if consumers continue to prefer the merging of their smartphones and tablets into powerful phablets.

tablets

As for who owns tablets, its is split pretty evenly among men and women. An increasing amount of teens have access to them as well, in educational settings and at home. Tablets are more common in homes with higher incomes and for adults who have received college education or higher. Below is a chart showing which technologies teens have the most access too.

chart

If you want to learn more about what I found out please read my Industry Analysis!

Wireframe Wizard

For the wireframe badge I decided to create some pages for a business that my parents are slowly developing. Although they are not selling any of their products yet, I wanted to create a basic wireframe for their website that they could work off of when they are ready to sell. Since we had used Balsamiq in class before, this badge was very straight forward and easy to approach. The only downside is that my trial had expired, so I just used another email to start another thirty day trial. The pages for this website will ultimately have many images so I wanted the wireframes to be as simple as possible so it does not appeared cluttered or with an overwhelming amount of color. I mainly wanted the pages to be very consistent, so the banner, logo, and navigation bar at the top are the same across all the pages. For more information about my choices check out my strategic document!

Below is a sample of what an informational page about orchards would look like:

orchards

Keep Track of Your Changes With Version Control!

Version Control is a way to make and keep track of changes to files. I took a Lynda tutorial for one type of version control, Git. I learned how to add and commit files to the repository (where everything is stored). Git gives users many options of how to add or delete files, to have branches of different changes, rename files and branches, all of which the user can refer back to. Git allows a team working on a project to all make changes without constantly overwriting each other. Members of a team can look at each other’s work, and merge it together. Here are some of the things I learned to do with Git.

Keeping track of files in the head (the last version checked out):

chap9-beginning

Viewing the different versions in the log:

chap10.2

Switching between branches:

chap10.3

The biggest difficulty I encountered using Kevin Skoglund’s Lynda tutorial were the differences between Git on a Mac versus Git on a PC. For this tutorial I was using a Windows machine, and Skoglund was on a Mac. The first major difference I encountered was how to open a directory in Git. For Mac or Unix computers it was “ls -la” , but Skoglund very briefly glossed over the Windows command, which he said was “dir”. The sources I found online seemed to agree. Yet no matter what I did, or what combination of the commands git and dir I entered, nothing worked. After working through these chapters across three days I retried the Mac and Unix command, and it worked. So, I suspect that the most recent Git version has updated its Windows version so it shares the same commands and is now consistent across platforms. I would recommend for users learning how to use Git from Lynda, to first try the Windows options, and if those don’t work to then see if the Mac/Unix commands work instead. With all that in mind, there are definitely sections of the tutorial that can be removed now that Git has been updated, since what Skoglund taught users in August 2012.

Another difficulty or something that would be better resolved earlier was the command prompt. Skoglund shows users how to change this in chapter ten, but this would have been much more useful earlier in the tutorial. My command prompt was long, as a list of all the folders until “explore_california”, it took up the whole line. So, it would have been nice to customize it earlier, to either my name, or just the branch I was in like the tutorial shows, this way the screen would have been cleaner and not so cluttered.

command-prompt2

All that being said, the tutorial was clear and easy to understand. Skoglund moves quickly, but that just means as a viewer following along, you might have to pause the video frequently. Skoglund effectively explained multiple ways to complete commands. Git must not only be told which files to track or ignore, but it is also very wary of deleting files and changes. In chapter ten, Skoglund explained that Git will make sure the user wants to delete a branch that has content in them that is different from the master branch, just as a reminder, to check and see if those files are still relevant. At that point the user can continue on and delete a branch, or not if it turns out to be important. Similarly, Git will not allow the user to switch branches if a file has not been committed, assuring that you don’t lose any changes by accident.

In the future I could definitely see myself using a version control. Git was relatively easy to learn, so imagine that other version controls should be similarly straight forward. Anatoly Paraev discussed many types of version controls in his article “The Ultimate Guide to Version Control for Designers” . I think I would benefit from a version control tailored to graphic design. I have named files silly things like “1.psd”, “final.psd”, or “actual-final.psd” and I believe I would benefit from a different form of filing and keeping track of changes.

Minisite #3: Ask John

The theme of my website is HBO’s Last Week Tonight with John Oliver. On his show Oliver discusses current world issues and brings injustices to light. While on this site users can interact with John, asking him questions or searching for information. Users can register to become his fans, which leads them to a personalized marketplace with items for sale that match their favorite mascot and a cause they believe is important.

ask-john
I struggled a lot with the JavaScript on for this project. I found that as tedious as it is, it is definitely best to go line by line while coding, to make sure each change works instead of guessing at which line might be wrong or have a typo (which is definitely is what I am guilty of!).
marketplace
In regards to learning JavaScript, I learned and have understood its capabilities better while working on this minisite, far better than I did during the exercises in class and on Code Academy. And I cannot stress how important it is when Dr. Delwiche said to labels our variables! While so much of the coding is repetitive, it helps so much when you keep track of each variable and what it does.
Anyway, you should definitely check out Ask John!