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.
Rationale/Creative Brief- Mobile
1 Design strategy: you MUST explain the reasoning behind the design you chose.
For my design I wanted to focus on the aspect of the children. The site is very child like with
the bears and the trains. I wanted to use photos of children receiving gifts from Toys For Tots to help with the emotional pull of the site. The statistic is used to really help make the point of what the charity does and again, helps with the emotional pull. The “Our Choice” section is a compilation of text from the Toys for Tots website that is actually pretty hidden. I wanted to bring it to the forefront of the site so that anyone who visits can see the why behind Toys For Tots and hopefully be encouraged to help.
2 Choices of typefaces (Including some you tried but didn’t use).
I chose to use a San Serif typeface because Toys For Tots is a children’s charity and san serifs
are clear, easy to read, and what most kids are used to when in school. ITC Avant Garde Gothic Std. had a lot of different variations within the family, which I found appealing. It also looked most like what you see in kids books when they are learning to read and write.
3 Choices of colors and images.
Toys For Tots is a Marine Reserve Crops organization so they used blue and red on their
website. I chose to continue to use those colors to keep with the branding.
4 Source your images.
The images of the children came from Flickr.com creative commons. The photo of the logo
came from the Toys For Tots website. The train used in the “About Us” section is a variation on the logo. The bears I pulled from Google, licensed for reuse and modified in Photoshop.
5 Explain why you think the original site (if there was one) is ugly or has a poor design.
The original site is very military looking in style. It doesn’t have much design to it, no real reference to children in the design, and has a lot of text. It can be hard to navigate and doesn’t do a good job of drawing the user in.
6 Include at least one user story
User 1- Donator
Sarah is a college student taking the bus to class in November. She wants to do a Toys for Tots drive for her dorm and needs to find out if there is a local drop off location.
User 2 – Requestor
Sue is a single mother of two working two jobs and barely getting by. She knows this is going to be a scarce Christmas and needs to request toys for her children so they can receive something this Christmas
For this web design and mobile design, I chose a prestigious, China-based NPO, Chinese Youth Development Funds (CYDF). It is dedicated to the rebuilding of the equality in China’s education. Though China ranks the world’s 2nd largest economy bodies, lots of people are still living under the poverty line. The gap between the rich and the poor is widen，and the social mobility is absent. Some children in rural areas have no access to elementary school education. Though CYDF is nationwide famous ,the official website is poorly designed. So that’s the reason I wanna redo it with the help from our professors and TA.
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 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.