Category Archives: Section 3

Jones_Mobilewebsite

 

jones-catie-mobilewebsite jones_updated-desktop-website

The first file is my mobile website design, and the second is my  desktop file. I updated the colors in the  mobile design to make it more professional and to help the content flow from one topic to the next. The designs are for The Representation Project, a nonprofit that created and screens documentaries about the negative representations about women and men in media.

 

Murali_UXMobiledesign_GRA617

Murali_ UX

For the user experience, I selected the HeForShe.org webpage (just like my user interface project), which is a solidarity campaign for gender equality. I picked this webpage because of how I grew up and the restrictions I faced as a woman.

I found the original page great but it seemed really intimidating. The graphics came from all over the place and it looked too busy and confusing. I tried to make it more user friendly and easy on the eyes for people who are interested in following the campaign. I found a picture on the web showing the balance of equality of men and women and I like the scientific representation of it.

Below it I added sections, About Us, Take Action, Donate, Shop, and Contact. I segregated each section with a different background color so it can be differentiated easily. I placed the pictures of one of the most powerful man in the world, Barack Obama to show people of his involvement in this campaign. I found a picture of Limbu women studying to get people to donate for the women’s rights, education and work. Shop section was pretty easy for me. The contact section on the webpage was in black background, which can be difficult for some people to read so I made it a white background.

The typeface I used was Avenir overall. Avenir was my choice of typeface as it is easy on the eyes for the public to read. I used the margins and grids as indicated in the lecture hall.

Bennett-Begaye_Mobile Design

Bennett-Begaye_Mobile Design_FINAL

Design Strategy: Mobile

I chose again my non-profit organization, Survival of the First Voices Festival. It’s an art and media organization for Native American and First Nations youth. The information is already overwhelming as well as the colors that make up the face of the festival so with that in mind, I wanted to make it as simply as possible. I cut down the number of photos in the slide show and the sponsors shown – three to one. I gave the navigation bar and the dates of the festival an icon button. Everything on the page is boxy so I decided to make the buttons rounded to add something fresh – and it stands out. I did take the calendar image from online and manipulated it so it fits into the website theme.

The background runs outside the grids because I wanted to consider the landscape orientation of the phone. Most of the content I kept – except for the “About” section. There was already too much text for a mobile version so I added a “Read More” button that the readers can touch and it can expand. The images I had from my own files, such as the background and the sponsor logos.

Smith_MobileWebsite

smith_mobilewebsite

I chose to keep the mobile website simple to allow for easy navigation. The first thing users see is the search bar and drop down menu for their convenience. When users come to the site they will easily be able to find information about the organization, call the hotline, submit a tip or make a donation. I kept the color theme consistent with the desktop website, and used the red from the logo to highlight important phone numbers and links.

Scholl_Mobile Design Site

The mobile portion of this project was certainly challenging, and really made me think about how I view things in the palm of my hand versus on a large screen on a desktop. It really made me tune into visual elements that have become a thoughtless part of my every day life, when viewing things on my phone. This challenged me to transform my mobile project into something highly visual, using interactive elements to engage the user on their phone. I did this by using arrows, and large symbols (circles, text, rounded rectangles) to show that by swiping and interactive with the mobile device, you can see more information. I stuck with Helvetica Neue Ultra Light and Light, depending on the text or the heading, to keep it light and simple. Tara helped me clean things up, change the text colors, which really brought the mobile site to a new level of sophistication. I think the design, colors and photos of this site will appeal both to children and adults.

iPhone6_FinalGrid_2