Category Archives: Section 2

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.

 

 

Liu-Jing-UI-Design

Liu Jing UI Design Desktop v7

Liu Jing UI Design Mobile v5

Liu Jing - UI Design - Creative Brief

The organization I chose is HeForShe, a global campaign under UN Women to promote gender equality. According to the user journey I designed, I divided the website into the following sections: a) navigation; b) why care (landing page); c) about us; d) HeroForShe (Key Opinion Leader); e) progress; f) take action and g) footer.

a) Navigation: Its importance goes without saying, I also included links to the campaigns’ social media platforms, language bar and search options here. In today’s world, the influence of social media simply cannot be ignored. And since this is a global effort, multi-lan- guage operation is a must to efficiently spread the message. Search bar, another user-friendly function for efficient communication.

b) Why care (landing page): A lot of people think gender inequality is no longer an issue in today’s world. This landing page is the key to convey such a message – that on the look of it, it seems like women’s life is just as good as that of men’s. But inequality is still there, maybe in more subtle ways. The landing page will show a slideshow of some key facts of gender inequality in the world, including education, domestic violence, glass ceiling in career and so on. Since the campaign targets men, invites men to step up and join the fight for gender inequality, the hero images are successful, happy male covered in a transparent pink hue, which feminizes them for the cause.

c) About us: After raising the awareness of the issue, it’s time to introduce us and the movement to the world. Let our audience know who we are, where do we come from, what are we hoping to change and how to we plan to do so.

d) HeroForShe: Display of male celebrities that has endorsed this movement all around the world. Leveraging the influence of celebri- ties to call upon people to join them and share the message.

e) Progress: An interactive map to show our audience how many people globally has joined us and how many in each country respectively.

f) Take action: This is the call to action part of the website. People can simply share the message or go one step further to donate to our cause.

g) Footer: Direct people to our UN organizer, let people know how to contact us and again, give them access to our social media pages.

 

 

Stallknecht, Matt UI/UX Design

Stallknehct-Matt-Web Design Stallknecht-Matt-Mobile DesignCreative Brief

My objective with this design was to create a website for the Downtown Committee of Syracuse that appealed to young professionals in the 18-35 demographic. The committee has made it clear that it wants to brand Downtown Syracuse as a haven for young professionals in both a business sense and a pleasure sense. Despite this, their current website is unfocused and appears to be designed to appeal to all demographic groups. With this in mind, my re-design of the site wascreated with the goal of directly targeting young professionals both content-wise and design-wise.

To accomplish this, I made the overall PC design very image-heavy, and used a bunch of flashy images of downtown Syracuse lit up at night to inspire feelings of youthful exploration and nighttime partying in the viewer. I matched these images with content that sold downtown Syracuse as a good destination for young professionals to live in, work in, and “play” in, but I made sure to do so in a classy, understated manner that wasn’t outwardly exclusionary.

As for the mobile design, I purposely designed the PC version of the site first and optimized it so that it would be easily scalable to other screen sizes. Thus, my mobile design is simply a condensed version of the PC design that has carefully cropped images, reformatted text, and slight positional adjustments to make the site user-friendly on a mobile device.

Tim Ferguson – Magazine Spread

Post late as a revision.

JordanSpeith2 JordanSpeith21

Design Strategy:

The inspiration for this magazine layout was based on an article printed in Sports Illustrated, which was written about Jordan Spieth’s second major victory of the year at the U.S. Open. In using that model, I created my own spread that would have contained an article regarding Spieth’s desire to earn the career grand slam, after finishing third at the Open (British) Championship. The main picture spread used a photo from an Under Armour photo add which displayed Spieth in a very focused pose with blue sky background. This showed him in the zone of focusing on his goals. The headline of “Major Mission” was used to reference his goals of winning major championships, and since both words begin with “M” it seemed like an obvious choice to make it a strong word mark header image. With the remaining portions of the article it was important to incorporate dominant and focused images of Spieth blended with text surrounding the photos. An article such as this would also include a graphic to further connect on Spieth in the pantheon of golf history, so that was added to the second page of the article. The final element created was the title of the magazine, On The Tee, was designed in reference to when they introduce golfers at a tournament when they begin their round.

Laycock Jessica User Interface Project

I chose the Women’s Building in San Francisco because it had a great niche audience to tap into and the original website was sorely lacking in both usability and emphasizing the beautiful murals that cover the building. I decided to highlight the murals and carry photography of the building throughout the website. In particular, images of women from different paths of life that are painted on the building. The logo is a specific color purple so I also decided to use that color to brand the organization, making all links and section headers that same color purple. Aside form my navigation items, my layer comps include the “Donate Now” and “Get Email Updates” button and a change of event weeks when pressing the triangle in my Events section (on both designs) and a “(Read More)” link with a drop down text box (in my mobile design).

Website:

 

Screen Shot 2015-08-14 at 10.50.37 AM

Mobile:

Screen Shot 2015-08-14 at 11.10.14 AM

The following is my creative brief…

LaycockJessicaCreativeBrief

Soule, Megan UX and UI Website Design

RWCT IC websiteRWCT IC mobile siteScreen Shot 2015-08-14 at 10.07.54 AM

The organization I designed this website for is called Reading and Writing for Critical Thinking International Consortium. They are a global education non-profit that works with teachers in new democratic states. The organization has not re-designed themselves since they started 20 years ago. RWCT IC is working to recruit a younger group of teachers to join their organization and their current complicated and bulky website was not meeting that task. RWCT IC needed a new sleek, very simplistic, and modern website. Since the organization works with teachers in 40 different countries, some that are extremely underdeveloped a simple website that was very easy to navigate was even more important than with some other organizations. The user experience has to be accessible on an international scale. I took the color from their famous logo and a three toned website with minimal text. The photos on the website bring the user in because of their perspective, but do not take away from the text because of their muted filters. The small design elements like the triangles and color blocks were used to create cohesion and a line of sight down the website interface. The mobile site was modeled after the simplicity of the Charity Water mobile site. Some information was excluded from the one page to create an ultra-simplistic, but sleek appearance.