Midterm Process Blog

DEFINING PROJECT & AUDIENCE:

I started this project by first doing some research about Industrial Design and by investigating as industrial design sites (www.usa.phillips.com, www.rnrassociates.com, www.idealogicdesign.com, www.baren-boym.com, www.altitudeinc.com), an Industrial Design magazine site (http://www.core77.com/), and the IDSA (Industrial Designers Society of America) site and past award winners. I also found it helpful to look at portfolio sites for other types of design firms. I looked at hellomonday.net, www.brandever.com, www.hatchsf.com, www.zaum.com.uk, www.tbdadvertising.com, among others. All of these sites were very graphic, have very minimal text, and have saturated color schemes with lots of negative space.

3 business objectives for the site:
Content can be easily updated.
Clearly describe and portray our services.
Add a user login to increase traffic on the site.

I developed 3 personas for my site:

1. Larry Winthrop, age 64. Larry is the President of Prime Technologies, a company specializing in optical technologies for the life sciences. He loves to read autobiographies and historical fiction and records CSI and The Daily Show on his DVR. He enjoys sailing on his yacht with his wife, Judy, and their Jack Russell terrier, Max. Larry doesn’t have much free time to surf the net. He prefers sites the present information clearly with succinct descriptions to support images. He wants to be able to find information quickly and easily. Too many videos and animations distract and annoy him.

2. Mark Monrose, age 37, and Tim Maloney, age 42. Unhappy with their previous job, Mark and Tim started their own industrial design firm in 1998. They are excited to announce that they will be opening a second branch in San Francisco next year. They are researching local firms, making contacts, and checking out the competition. Tim does all of their renderings and CAD file creation, while Mark does most of the research and paperwork. They joke that Tim is the brains (computer geek, blogger, and gamer) and Mark is the braun (he is preparing for an Iron Man competition in the Fall). They are both advanced web users that spend hours on the Internet or downloading the latest iPhone app. They have both vowed never to grow up.

3. Rachel Blackstone, age 39. Rachel is currently climbing the corporate ladder in the Diagnostics Division of Bayer. Her company is searching for a new firm to work with and she is charged with scouting out the possibilities. She is a strong-willed and determined single mother of three, ages 4, 5, and 12. She reads home decorating magazines, Business Week and Forbes. She likes to relax and browse the web once her children are asleep for a little “me time” as she calls it. She is not very computer savvy, but she loves to Google and has her own Flickr account full of family photos. She prefers very graphic heavy sites with clear, simple navigation.

SKETCHES:

In my initial sketches I played with different logo graphics and several themes, including a calendar or office supply themed site. The first design I mocked up is the one depicted below, with wide diagonal nav buttons in the left column. I quickly realized, however, that this design left little room for subnav or much content, so I went ahead with another idea, bottom photo. This two column layout has two headers, one for the main nav and logo, and another one for sub nav. This clean, simple design seemed like if would be very easy to navigate and would be enjoyed by my personas.

INFORMATION DESIGN:

I followed the sitemap that was provided to organize the pages.

WIREFRAME:

The wireframe gives a basic idea of what info needs to fit on the page, but does not depict the final design or the final location of information (which is why the sidebar is on the right).

VISUAL DESIGN:

Both of these initial ideation comps utilized bright color schemes- too bright I decided. I felt they didn’t fit my audience, so I tried something else, grayscale.

I really liked this idea at first, so I further developed the design…

INTERFACE DESIGN and PROTOTYPING:

This comp started out as a great concept and has a strong aesthetic, but I felt like it wasn’t fulfilling the goal and needs of the company or personas. And trying to figure out the navigation for this layout was a nightmare. Back to the drawing board…

I decided on a design that had a bright, soothing green palette, not the garishly bright scheme some of my initial comps had.

Ahh, much better. This time I made sure I thought ahead to the HTML and how I was going to slice the page. I decided to start this comp by designing what I felt was going to be the most difficult page, the What We Do page, because it is the deepest nav on the site and it has the most content. By figuring out this Interface Design challenge right away and designing a strong framework/grid, the other pages fell into place. All of the necessary Information Design for the site could be easily located on this design. The design was flexible enough to allow for changes in location of hierarchical elements between pages (ie. text or images, buttons, could be placed interchangeably in the sidebar or in the main content area.

CHALLENGES:

I struggled with writing the CSS and combining that with writing the HTML code so that the div that I just added would appear in the correct spot, or even just appear at all. It was a very positive experience. I would like to study some more examples of CSS to further understand the syntax and hierarchy.

I ended up with a few minor glitches while presenting the site in class:
I used an AP div tag for the image in the main content area on the home page. Since the sight is auto centered, the AP div tag isn’t always in the correct place.
My roll-overs spazzed out on the What We Do subpages; apparently because they need to be in a table.

But hey, even with all the struggles and what I’m sure is very poorly written code…the site actually works!!!
See for yourself: http://www.everythingaboutweb.com/artcenterdev/midterm_geddes/index.html

Advertisement