Category Archives: Student User Interface

Project UX/UI – Krishnan Kala

web design5iPhone6_grid2finalEIGHTSTEPSTOANEFFECTIVECREATIVEBRIEF

 

It was the best way to end the graphic learning experience. Designing websites first for the website and then for the phone was extremely intense, exciting, time consuming and tedious. At the end of the day I learned a lot about user interface and designing strategies being different for both dekstops and mobiles.

Mobile is the way forward and it is great to learn that we can modify our design strategies to match the change in consumer needs .

I loved it ! It was a great end to an amazing term.

McTigue Gerard Project 4 UI/UX Project

McTigue Gerard Project 4 Web One PageMcTigue Gerard Project 4 Mobile

Screen Shot 2015-08-14 at 4.56.18 PM

For this project I chose the website for Food & Water Watch. An organization promoting healthy and safe choices, protection of the environment and transparency from the government and big business. Just from the first sentence you can tell it is heavy subject matter and this was the first thing that made me choose the aesthetic I chose. Because the information is so serious, I wanted to create a lighter and more welcoming interface for people to access the information. The original website is also very very text heavy so I wanted to use more visuals to simplify some of that text heaviness. With these changes I also wanted to stay true to the organizations original branding as I could tell they put thought into colour choices and visuals. First of all, I took the colours from the logo and use them throughout. This is a blue and green, very obvious choices for an organization dealing with the environment. Fortunately, the blue and green they chose were unique so I used them. I kept these colours in mind when I choise visuals and created the icons located on my webage. Another thing I found on the original website was the amount of redundancy of information. While it is good to use certain things multiple times to assist the user in accessing them, others just take up space and cause confusion. I was able to integrate parts of the original site, such as “research”, into other existing sections like “tools” as it was essentially a database. I also simplified the navigation titles as they use two words with some and it is not necessary for space or overall look.

Once I made these fundamental choices based on who the orgnization was, I tried to think of who my audience was. Based on the literature on the website, they seem to be trying to reach every day people with an interest in making environmentally friendly decisions. They may also be reaching acadmics and/or activists as secondary groups. Overall, it is focused on people that want to be better educated about issues surrounding the food and water we use and consume. With that in mind, I wanted to keep it simple. A person trying to do research for the first time does not necessarily want to be bogged down by text. I therefore wanted to create my one page as more of a portal. There would be no way to fit all of the information from every tab on the original site onto one page to begin with so it acts more as a highlights/features/links front page. It contains all of the primary information the original site has, but instead has “teasers” and links to more information rather than paragrpahs of text.

I originally used different shades of the same colour for the background of the different sections, but foudn that this created a lot of business on the page that was not necessary. So I chose a neutral, muted green and made that uniform throughout. For my layers comps, I chose two “changes” to communicate to the user that the item is interactive. For general text that can be clicked on, I used a light grey box to show usability. For an item/visual that can be clicked, a grey box also appear behing it. in the case where text is already inside of a shape, that shape and the text get bolder and brighter when the user srolls over.

Zhang Yijin Desktop&Mobile Pages

Wendy-Desktop

Wendy-MobilePage

Yijin Zhang- Creative Brief

 

I designed the Page for the Rachael Ray’s Yum-o! It is a nonprofit that empowers kids and their families to develop healthy relationships with food and cooking. So the target audiences are children and their parents. So I tried to make the page as simple as possible. I used a lot of pictures to attract kids’attentions. Also, I used the Microsoft Tai Le in this page, because it’s not only easy to read, but also reminds me of childhood. And I used the same orange in the page, because it is the color of the logo. I didn’t show “DONATE” part in the page. Because I want it to open in a new window, so that audiences can type in their card information clearly and safely.

In the mobile page, I used limited characters. Pictures and titles of the articles are main content of the mobile page, so people can enjoy this page easily. By clicking the title, audiences can get into another page, which has complete recipes or articles.

Both Food.com and Jamieoliverfoodfoundation.com inspired me. They are all websites about food, and they display recipes in a very clear way.

Warrior Writers Desktop & Mobile Website Designs

HANSEN_Tim_Final_Website Hansen_Tim_Mobile_Fianl Hansen_Tim_Brief

Design Strategy

I chose the Warrior Writers because the organization in a national nonprofit based out of Philadelphia, Pennsylvania and its website is crowded with a lot of text that rolls from one topic into another. My idea was to separate the key communication points of Warrior Writers and transmit them in short bursts of text similar to radio message traffic. The photo of the soldiers in the header is intended to evoke an emotion, a thought or a memory from the viewer. Since most wars are won by occupying ground space, I used a stoney soil pattern as the background and various shades of brown throughout the site. Though all viewers are welcome to read and donate this website, the intended audience is veterans – male and female—of all ranks, branches of service and wars for the purpose of learning how to write and publish their military experience. By using a sharper typeface without serifs and military imagery that would catch the eye of veterans, a viewer will scroll down the page and realize the emphasis is on writing for this group.

The mobile version presented a different set of challenges, namely scaling photos and text to fit the smaller dimension. I had to reconfigure the toolbar using the “hamburger” icon to pull up other sections. Social media icons also had to be repositioned to create a better balance of the icons on the navigation bar.

Three following three website influenced my design for this project because of their sense of color, innovative graphics and fundamental appeal.

  1. “A Stranger to Words” by Meng Chin Chiang
  2. “Stand Out” by Denise Chandler
  3. “Remember Your Dream” at discoveryshadow.com

 

Rosiclair Phedorah Website/Mobile

RosiclairPhedorahWebsiteRosiclairPhedorahMobileRosiclairPhedorahCreativeBriefRosiclairPhedorahWebsite

This is my design for the New England Aquarium website which is currently a little out of date and very cluttered.I wanted to create an airy and fun affect for this website design and I can really see it coming through, mostly because of my choice in color and the size of the photos. My target was children, who are very visual and respond well to shapes and colors. I choose brighter colors instead of staying with the deep dark blue because this is suppose to be fun not depressing. I also included cartoons to engage children.

 

 

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.

Toys For Tots Mobile Design

Tazzia-Sam-Mobile Layered Comps_0000_Homepage Tazzia-Sam-Mobile Layered Comps_0001_Menu Dropdown Tazzia-Sam-Mobile Layered Comps_0002_Header Photo 2 Tazzia-Sam-Mobile Layered Comps_0003_About Us Swiped

Tazzia-Sam-Wireframe- Final

 

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

Inspiration

http://www.rmhc.org

http://www.secondchancetoys.org

http://www.charitywater.org