Mobile- Rebecca Hansen

Hansen-Rebecca-Mobile-Mockup-Final_Home Hansen-Rebecca-Mobile-Mockup-Final_Menu Activated Hansen-Rebecca-Mobile-Mockup-Final_News Slide Activated

Design strategy: you MUST explain the reasoning behind the design you chose.

  • I kept with the color scheme and wanted a simple one-column layout. I took away a lot of elements in my original design (like boxes and a lot more color) to make it easier to read and have a better UX overall. I took certain elements like the header and footer and mimicked certain mobile designs. I took out the social media options because it took up too much room in the header. I added little bars and arrows to point users into the next section to keep their attention. I thought adding “Back to Top” was a simple way to encourage more interaction with the menu options and main message.

Choices of typefaces (Including some you tried but didn’t use).

  • I chose Baskerville for the body copy and Big Caslon Medium for the subject heads. I think they work well together. I originally wanted a thicker type for the subheads but it distracted from the flow of the overall project. I put certain words in all-caps to provide emphasis and continuity.

Choices of colors and images.

  • The colors are as close to the original website as I could get them. The images are from creative commons and correlate to actual stories from the website. The main image is supposed to represent a little girl—someone that the organization wants to affect with its research.

Explain why you think the original site (if there was one) is ugly or has a poor design.

  • The original site is too wordy and the pictures are too small. It seems like it doesn’t have a personality. Other websites with similar messages have more interactivity and elements that provide depth.