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.
I choose Breast Cancer Research Foundation (BCRF) as my nonprofit organization. The pink ribbon is the symbol of the breast cancer, thus I used a variety of pink tone color as my main color for the web.
I choose Avenir Black for the headers, titles and all body text. I think Avenir Black is really easy to read on the webpage, it is well organized and fits people’s reading habits.
The title “losing is not an option”, I put it on the top of the main picture to punctuate the strong power of the sentence. Especially I decreased all words’ opacity to 50% except for word “NOT”. By doing this, I want to show the feeling that women with breast cancer can NOT be beaten and they will fight for tomorrow.
For the picture with hope on the artifice, I put a quote with strong positive energy on it. Also I capitalized the word FEAR to show fighters against breast cancer do not need to be afraid of their future.
For the event bar, I choose pink as background color and type in white.
For the DONATE and FOUNRAISE buttons, I choose the same color as event bar to make consistency.
For the footer, I choose light grey as the background color and pink logos on top to make them look consistent.
For the mobile version of the RBARI website, I made some drastic changes in the design to make it easier to use. With mobile design, it should be an oversimplified version of what the website offered. The point is addressed immediately and the elements are either eliminated or simplified. With the mobile site, the objective is to get the viewer to want to donate not just because of the emotional appeal, but because it is so simple to do so. There are two ways the user can donate. One is from the hamburger menu in the upper right hand corner (which uses the exact same red as the logo). The other is at the bottom of the page. I reused the same red from the logo throughout the site to provide continuity and emphasized the branding aspect of the site. I reduced the opacity of the black font because white on black contrast is really hard for the eyes to see, so I dropped the opacity to 90% (some cases 80% when called for) in order to make it easier for the eyes to read. The white space was a harder task to work with because it is bad design to have words and images just on the brink of touching the edge of the page or the edge of other words and images. Creating separation in the small space was the most difficult part of the design. Overall, the site is easy to read, sophisticated and incorporates all of the design principles learned in class, and making few bold design choices so it is not too boring.
The non-profit organization I chose was an animal shelter called Ramapo-Bergen Animal Refuge, Inc. (RBARI) in the town over from where I’m from in NJ. Because of this connection I have, I took the initiative to email them for formal permission to use their logo in my design. They approved, which helped make the job of designing much easier, as I didn’t have to come up with a new logo for the organization.
I wanted to make it simple, sophisticated, and steamlined. The main objective is to get people to donate money to the shelter. The end of the website presents a call to action on the part of the person viewing the site. When the reach the end, they are told to donate. I appealed to emotion in order to entice people to want to take action.
I chose a simple, easy-to-read typeface (Helvetica) and stayed with a simple white background with black font. The donate button is the same color as the ear of the beagle in the final picture. This helps to connect color elements together and provides continuity.
For the mobile version of Ten Thousand Villages there were a few changes I wanted to make such as reducing the clutter and making it more user friendly. The web design was pretty dark and the icons were large and distracting. With the mobile design, I focused on having a color (red) trickling down through the page to tie it together. I kept the images the same because I liked the woman’s facial expressions at the top to engage the user and the differing race of the woman on the bottom to tie in the different continent aspect.
I added the organization’s name for the mobile design because I should have down that originally and it also starts the pattern of red. The headline was made smaller to fill in the space and the shorter headline made the point clearer. I also added a call to action button and an explanation of the company’s purpose toward the top so the image of the woman made sense and it answered the user’s main question about the company faster.
I only used one typeface (Avenir) and just used different weights within that family to add hierarchy. The “hamburger” icon at the top was used to condense the navigation, but my interactive elements were focused on what I wanted to be the most important which was searching the artisans and how else someone could get involved.
Overall, I much prefer this design to the desktop one and if I were to do it again I would base my desktop design off of my mobile design.
I chose Room to Read, a nonprofit focus on quality education for children in the third-world countries, to do this interface design project. The existed website of this organization is messy and lack of highlights. By including a brief information about programs and key data, as well as emphasizing the entrance of getting involved, I redesigned the “Get Involved” part for the existed website.
Key vision is blue and yellow, the colors used in the organization’s logo. I used this two colors to set connections between each part. I would like to keep the style of design concise and full of hope, thus to create call to action to the audience.
Comparing to the desktop version, I include more interactive elements in the mobile version. The “share” button provide a collection of all the contact and social media access, which makes a website in Web 2.0 more meaningful and usable.
The margin and gutter is 30px, the type family is Raleway.
In creating the mobile version of my web design I wanted to keep the look and feel of the desktop version. I kept the same typeface (Helvetica Neue), the dark green and orange color scheme, and the same key photos. I improved the footer of the mobile version to be more useful and interactive instead of just static images.
As with the desktop version, I wanted the calls to action to be LOUD. This was more important in the mobile version so that users can easily tap the Sponsor and Send buttons while they are walking, talking, etc. I made the buttons span the width of the screen with the same color scheme as before.
Because you can read less text per line on a phone, I made the paragraph in my design be larger, have greater leading, and chose a lighter version of the typeface so it did not feel like a heavy block of text. I also had to change the mission statement on my homepage to be on two lines, and crafted it so it looks like it belongs to the cover photo not the following section.