Archive for the 'Visual Design' category

Assignment Friday: Website Redesign

Aug 03 2012 Published by under Visual Design

This week in ICM 502- Visual Design at Quinnipiac University we were asked to take our proposal from last week and act on it to redesign the website.  I redesigned the website for StarSail Cruises.

That’s right, it’s that time of the week again.  Friday.  The day to celebrate the coming weekend, and the day where I show you one of the assignments I did this week. This is the second part of a two-part assignment.  Last week, I showed you the proposal I wrote for redesigning a website, in this case, StarSail Cruises.  This week, I am showing you the original and my redesign, following the proposal I wrote.

So here is the original website:

And this is what I redesigned it to:

The redesigned website is a lot cleaner and more comfortable to use.  It has colors that are associated with the logo, which helps it to maintain consistency.  Additionally, there are less number of fonts, it is more readable, and there is more flow.  I have also reduced redundancies in the navigation and chosen a less pixelated image for the header image.  Overall, I feel like this one is much less daunting and more professional.  What do you think?

 

One response so far

Designing a Webpage

Aug 01 2012 Published by under Visual Design

This week in ICM 502 – Visual Design at Quinnipiac University we are putting together everything we have learned throughout the semester to redesign a webpage.  The webpage I am redesigning is based off the proposal I wrote last week.

When designing a webpage, it is important to remember all of the elements that go into good design.  These include the seven principles of design, white space, typography, imagery, color, and layout.  It’s also important to remember the difference between print and web design, and the functionality of both.

In class, Jerry Laguerre shared this video, which helps get the basic layout set up ahead of time:

I am sure there are many other tricks for web designers out there, and I would love to see anything you have to share.

2 responses so far

Assignment Friday: Writing a Proposal

Jul 27 2012 Published by under Visual Design

This week in ICM 502 – Visual Design at Quinnipiac University we are writing proposals for redesigning the websites of the cruise companies we looked at earlier in the semester.  This assignment acts as a review of all the material we learned throughout the semester.

For this week’s assignment, I have chosen to write a proposal for redesigning Starsail Cruise‘s website.  This is based off the notes that I made earlier in the semester regarding the seven principles of design.

You can see the proposal for Starsail Cruises I wrote here.

2 responses so far

Hierarchy: The King of Presentation

Jul 18 2012 Published by under Visual Design

This week in ICM 502 – Visual Design at Quinnipiac University we are learning about the importance of the hierarchy of information in design.  This touches on a lot of what has been covered throughout the semester to present information in its proper order.

As designers, it is important to not only make your design pretty, but also to help guide the reader or viewer to get through the information in the order of importance.  Additionally, it is important to have an end goal in mind, and to design the layout to help accomplish this goal.  Without a goal in mind ahead of time, it is much less likely that you will meet accomplish something significant with your design.

Breaking it down, this is what you should focus on:

  • Develop a Goal
  • Organize Your Hierarchy
  • Design For Power Levels
    • “The Skim”
    • “The Branch”
    • Call To Action
    • Facilitation
  • The Designer Toolbox

Develop a Goal

Goals are the most important thing to look for when you set out to design.  You need to know what you (or your boss) wants to ultimately accomplish with the website.  Are you looking to get people to purchase something?  Make a phone call?  Share a picture?  Share with friends? Join the Navy? Kill the radio star?  Knowing what your end goal is will help you to get the rest of your design to point your reader in that ultimate direction.  Also, numbers are important.  If you want to get a 2% turnover rate, your design may be different than if you are looking for a 50% turnover rate.  Know these goals and you will be able to accomplish them.

Organize Your Hierarchy

What’s the first thing you want people to look at when they come across your design?  What is the most important thing that will catch their attention?  Where do they go from there?  Are they going to maintain interest in the next thing?  Will it lead them to the one after that?  Now, does your design lend itself well to this hierarchy?

Make sure that you arrange your elements to best lead your audience through the hierarchical process that is conducive to your goals.  In type, we often know how to set up this hierarchy.  We use titles for the first hierarchy.  Headers for the second and third hierarchy.  Body text for the next.  Sometimes we use bold text to help break it up, and knock things up a peg in the hierarchy.  This also helps with being more scan-friendly.  Shawn Borsky’s hierarchy chart helps you to see where the foundation is, and how to finally achieve your end goal in your hierarchy.  This chart is pulled from his article, “Using Power Structure and Gestalt for Visual Hierarchy.”

The hierarchy is also done with visuals.  Remember that visuals carry visual weight, and can help lead your story along.  But if your least important visual has the most visual weight, it can detract from the overall message and lose your reader.  Brandon Jones uses this as an example to demonstrate visual weight in his article “Understanding Visual Hierarchy in Web Design.”

When you look at this, you notice that the square has the most visual weight.  This is due to its massive size.  But what else carries a lot of visual weight?  The orange and pink circles?  They aren’t near as large as some of the other circles, but because of their bright and attractive color, they carry some more visual weight.  You can read more about how some colors are more effective for drawing attention (and thus carry more visual weight) in my article on Color Theory.

Design for Power Levels

When you design your page, you want to make sure that you hit different power levels for different users.  Not everyone will read your page the same way.  As such, it is important that you understand the different levels of reading to really make the most impact on the largest number of your readers.  Much like in print journalism, where you use the inverted pyramid style of writing, it is important to have your most important information more accessible to these readers, and the extra nuggets in the smaller hierarchies.  As Borsky describes it, these power levels are “The Skim,” “The Branch,” the Call to Action, and the Facilitation.

The Skim

Many power readers will skim an article before they even begin to read it.  They will look at the titles, the headers, and the images to see if what is there is even worth reading.  If these don’t get their attention, they will likely move on, and not come back.  Hopefully your design at this level has given them at least a basic understanding of what your page is about.

The Branch

After you have caught the attention of the skimmers, you now have them in the branch.  This means, in web, that not every user will click on the same link.  So you have to offer a variety (but not too much variety) so that you can let them feel like they are in control of their own destiny.  This will also help to diversify your audience, and end up with a larger percentage of initial contact to end goal being met.  Remember, though, that too much choice will end up overwhelming your audience, and they won’t make a choice.  You may end up with a much larger initial contact, but your number (not percentage) of end goal turnover will likely be much smaller.  Try and keep it to somewhere between two and four options for optimal choice selection.

Call to Action

Ultimately, we want our readers to do something.  Register on the website.  Sign up for a service.  Buy a product.  Subscribe.  Share.  Something.  Anything.  The best way to do this, once you have gotten past the branch, is with a call to action.  You don’t want it to be too obvious, like a flashing moving noisy image that shouts “CLICK ME!”  This will make the reader feel like the whole thing has been a cheap ploy to get him to that point in the first place.  But you do need it to be conspicuous enough that they know what it is you eventually want them to do, but that it is their choice to do so.  Sometimes, your call to action isn’t even a button.  Something like “Read on” is a call to action, but is not overly garish.

Facilitation

The final step before the final step.  The facilitation is the last thing that helps them get to the end goal.  It is not the end goal itself, though.  A click on the “Contact Us” page does not equal an email or a phone call.  But it is the last step to get there.  Here, it is important to be friendly and commanding, and offer easy skimability (again with the skim) and minimal commitment.  This will help you turn that initial contact into your final end goal.

The Designer Toolbox

There are many tools that you can use to help you accomplish the hierarchy and get your readers to end goal.  Below we will cover some of these in summary.

Gestalt

Gestalt, which is German for the “unified whole,” is the human psychology that tries to take all the individual pieces and organize them into a whole.  Much like the shapes above, we are taking a bunch of pieces and making them into one group.  To do this, you should have your pieces flow from one to another.  Continuation.  Similarity.  Closure.  Proximity. These all help you organize your elements into one unified whole page.  Borsky’s article has a lot of good examples of this in his second half.

Images

Different images have different effects.  Some are good as background.  Others are good for helping to move you from one part of the page to another.  Effective use of images will help carry your design a long way.

Typography

Different types of type can help carry your hierarchy, and some will actually deter your message and not help with your unified whole.  Understanding typography will help keep your gestalt.

White Space

White space is important for helping to organize your page and create different groups without the need for borders and lines.  Effective use of white space can really lend itself to the professionalism of your layout.

No responses yet

Assignment Friday: Comparing a Magazine to its Website

Jul 13 2012 Published by under Visual Design

This week in ICM 502 – Visual Design at Quinnipiac University we were asked to compare a magazine by its print and online versions.  I choose to use People magazine.

As I talked about earlier in the week, designing for the web and designing for print requires two different focuses for two different audiences.  The following video is an example of how People magazine uses those differences.

What magazine do you think has done well in the transfer from print to digital?

No responses yet

Older posts »