Interface Design Project

For my interface design, I decided not to use the same non-profit event as I did for the poster, and I decided to do WEMA international Fashion Relief.  This is a non-profit fashion show event that raises money for the victims of Hurricane Katrina.  I decided to use a bold red line as the bar to hold all the different links.  I used different sketches of models to go on the right side of every page, and used high heels to act as bullet points for all of the information on each page.

Good Website

I decided to pick one of the pages on the NIKE website as a good website design.  I think that the way it looks like a bulletin board is very appealing to the eye and might cause a viewer to want to stay and play around on the page longer.  I think that the way the categories of sneakers are split onto different polaroids is also very visually appealing.

website

I did my website for an organization called K.U.R.E (kids using reading to encourage). I decided on the colors and fonts because they were kid-friendly and appealing for the event. The pictures loaded backwards so look from the bottom up. 

website

This is my website, I did it on an organization called the Holiday Express that helps out those in need every year during the holiday season. The group doesn't  have quality pictures yet from their actual events but I improvised and tried the make the website visual and exciting with images from the internet. I wanted it to be holiday-neutral so I based my website off the colors: red, green, blue and yellow. My toolbar is hanging ornaments and the side panel of each page has snowflakes. I tried to focus on the formats of each page, and incorporate the pictures with the information. 

Week 14 - Web Design Project

So this is my website. I used the same organization and event as I did for my poster. I predominantly used red, because it attracts the eye, and because my event is about Christmas. I chose to make my sidebar, containing my links, using the image of a tea cup, steam, and the tea bag string and tag. The steam brings the eye up the page to my headline, which is red. The Mrs. Clause on the right helps to balance out the web page. In each link, she is holding a different object, that corresponds to the link. To the far left and right, I made a "background" of tea cups and snowflakes. Similar to print images, I used gestalt principles and grids. However, it was harder to make the text interesting/appealing to the eye, considering that the fonts used online are limited.

website

This website has a nice visual hierarchy. It has two navigation bars that help lead your through the website. It is also very clean. Its not cluttered with advertisements or useless information. This allows your eye to flow freely through the information the site is presenting to you.

Website

This website belongs to a web technology company. It's very cool looking, the grid is also very clear. The dark brownish color with the white silverish color very well generates a modern technological-advanced feeling. And nice usage of the spot color!

Magazine Project

After trying countess times to put this up, it has finally worked.  This is my magazine spread, I took a floating redo which is why it's late.

I chose this story because I wanted to do a wedding story.  This story is all about color so I wanted to make a few spreads that incorporated color in a way that reflected the story.  I chose to make my typeface larger, 12pt, and increase the leading to make the spread look "fluffy." Often times text articles get lost in wedding magazines, so I wanted it to appear easy to read.

Week 13 - Website

So this is the website for my town's branch of the Lions Club. It is absolutely hideous. There is no visual hierarchy, and the attempts to visual hierarchy simply fail. The headline/title needs to be larger or bold in order to dominate the page ... and the text needs to be organized. Everything seems to be thrown onto the page in a random way. When you look at the page, your eye does not know where to focus or in what order, so it gets lost. This website does not interest me at all - I would not take the time to read about the organization because of this layout.

\

I decided to choose the playhouse disney website as a very visually effective layout, especially to their audience. Since its geared towards young children who cannot yet read, there are large pictures instead of words for the toolbars. The large icons make it easy for children to navigate the website and the colors all work effectively with each other. Purple circles outline the characters on the toolbar and also continue to highlight the page as the arrow icon at the bottom connecting the top of the page with the bottom through color. 

Interface

As much as I love Topshop, the visual hierarchy on this page isn't very effective. It's quite busy, and the name of the store should be much larger-- it's the most important part of the website. I think that the garment types listed along the left side should be larger. It's also strange that they have different categories on the right, it may be less confusing if they were all together.

website interface

This website has a clean, user-friendly interface. The use of the bold orange leads the eye around the page. There's a lot of white space around the main content which gives the page readability and openness

magazine

For my magazine project, I chose to do a festival issue for a live music magazine. The title I chose is supposed to read "live for live (music)." The particular festival I chose to cover was Bonnaroo. I chose it for its setting in Tennessee, which I found pretty unconventional for music festivals, and its an event that would provide me with colorful, lively pictures. For the pictures throughout the magazine, I just chose pictures of the bands that played the festival. The cover is Radiohead in concert and though they didn't play at Bonnaroo, I felt their stage presence and lighting effects would be a good cover for the magazine. For the ad, I chose a M.I.A Marc Jacobs ad because shes basically an indie phenomenon, and her fans are likely to go to music festivals. The colors I chose, like the bright red for the title and sidebar, were meant to bring some excitement to the article.

Interface

I think this website is well designed. The visual hierarchy is effective in leading the viewer's eye to different points of interest on the page. When one first looks at this webpage their eye is drawn toward the top left photo. From here they are led horizontally across the top of the page with the pictures that are attached to the key links. Then the viewer is lead to the purple side bar which has more important links, information and the search tool. The color works to lead the viewer's eye around the page.

Website Layout

This is the website for the Indian fashion designer Anamika Khanna (www.anna-mika.com). I bookmarked this page the first time I went to it, just because I thought it had a really cool design.

The visual hierarchy is very clear here - you look first at the image of the model in the background (on the actual page this is in flash, so the picture keeps changing). Your eye then moves to the designer's name, because that's by far the largest and most dominant text on the page. From there, your eye moves to the other navigation text in the white bar, and then down to the sub-navigation links in the transparent box.

My favorite part about the visual hierarchy on this site is that it manages to be effective and original at the same time - a critical goal for a fashion designer.

Magazine Project

The fonts aren't quite right, but you get the idea...

visual hierarchy

The Whitman website is well designed through visual hierarchy.  The "logo" is placed at the top left hand corner, and since we read from left to right this is effective.  It is the largest font used on the page, and stays on the page for each link. The search bar is located next to this and is second in the hierarchy.  Search bars are important in sites for quick access to information and the placement of this search bar on the top right makes it easy to find.  The links along the top and side are third in the hierarchy and are directed at different students and searches.  The links are in smaller sized fonts which indicates this placement in the hierarchy. Since home is on the top left, it is indicated as the most important of the links. Less important information and links are presented in the middle and bottom of the page in smaller writing.

If someone goes to this page they will be able to access information based on what they are looking for immediately because the site is laid out effectively using hierarchy.  The links and are placed in the most accessible places on the page and are easily picked out as major links.  Less important information is smaller and placed in its own "container" away from the links and search bar.

Webpage Snapshot

I could only get a snapshot of the first half of the site.

I really have always enjoyed this site. The site really communicates to its audience, kids. The colors are very kid-friendly and warm. The navigation is easy to see and navigate through. There is definitely visual hierarchy. The blue rectangle has animation on the actual site. It is bigger than the rest of the containers below. They really grab your attention with it. Also, the site is very consistent. The fonts and colors really compliment each other. I love this site. The only thing I may change is to make the Build A Bear Logo bigger. Right now it is pretty small, compared to other things on the site. 

This is my magazine. I found an article about photography and used my own photos. I think my last page needs some work and maybe the cover. We'll see what Sherri has to say.