CSS Resume templates

Click here to see a listing of resume templates.

Posted in Uncategorized | Leave a comment

J query scroll to link

Click on the link below to read about and use the code to add the scrollto effect to your site.

Scrollto

Posted in Uncategorized | Leave a comment

Reading for week 3

10 Things You Should Know About Being A Web Designer

Nice web design blog with simple explanations of CSS

Posted in Uncategorized | Leave a comment

Homework for week 2

Create information architecture for your website. Take into consideration the class discussions and the sites that we have looked at in class. Read the post below to understand more about IA.

First of all, let’s define the term Information Architecture or IA:

An IA is the structure of a system. It is the model produced when a website’s content and functionality are organized so users can easily access everything in the final site. Its main purpose is to optimize the user experience, meaning anyone visiting your site will be able to intuitively navigate to the information for which she is looking.

Your website, however small and simple, is actually a system for delivering information and facilitating task completion to an inquisitive public. The more carefully you structure your site’s navigation, the better and more quickly it will deliver content. There’s nothing more frustrating to a web user that a confusing or misleading navigation. Developing a clear information architecture will prevent that from happening.

If you take the time to create an IA for your site, you will know what content you need, how the user will be guided, and how the site will be structured. This is hugely helpful information to have before you start designing.

A Word About User Experience

The web development process should be user-centered from start to finish, no matter which step you are on. In the early days of the internet, design tended to be about the designer, and what he could imagine was cool or new. Now we know that unless the user finds the experience useful, compelling, and satisfying, she will simply leave the site probably never to return. This means that even if the interface is beautiful, a site is a failure if its information architecture is garbled, or its coding is subpar.

Also, if you are working for a client, never forget to keep his objectives in mind.

“As user experience designers we have to find the sweet spot between the user’s needs and the business goals, and furthermore ensure that the design is on brand.”

Whitney Hess

Creating an Effective Information Architecture

You need to take the following into account:

  • Your end objectives
  • The constraints you have to deal with
  • The content you have or will generate
  • The requirements for the people who will visit your site (this depends on who your target audience is).

Card Sorting

One great way to organize your content is to write out your main topics and subtopics on cards, one item per card. Then sort the cards into the groups that make the most sense. It is great if you can have a couple of representative users sort the cards into groups that make sense to them, just to see if your logic holds true.

Sitemaps

Once you have taken note of the way things are tending to be grouped, create a sitemap. A sitemap is a high-level chart where each topic (or page) is represented by a box, and the basic relationships between pages is drawn in a simple manner. Take the time to draw a couple of sitemaps and get it right.

Prototypes

If you have any complicated transactions or moments in your site, be sure to draw up detailed storyboards of how those moments will progress. If you have time, be sure to prototype these sequences. Prototypes are models of the sequence—you can make them out of sheets of paper or code a rough version of the transaction in Flash or HTML. The point is to have a user go through the transaction in order to test it.

Content Inventories

Depending on how large your site is, a content inventory may come in handy. Basically, you create a spreadsheet with all of the content organized by page and such.

Wireframes

A sample wireframe

Once you have established the overarching relationships between content areas, it’s time to go in and create detailed wireframes of each individual page type. Wireframes are simple, unembellished diagrams of the page structure. They help you figure out how each element on the page relates to the others, and provide invaluable insight on how the page should look and function.

Posted in Uncategorized | Leave a comment

Homework for week 1

Create 3 different rough sketches for your portfolio sites.
These roughs need not be too concerned with the structure of the website, but they do need to concentrate on 3 distinct look and feels. Be sure to look online for inspiration.

READ the following and be prepared to discuss in class:

Sketching Interactions

As designers, you already use sketching at key moments in your process. I just wanted to take a moment and show you some examples of how other designers try to convey moments of interaction.

Sketching comes early in the interactive design process, just as it does with other design disciplines. Before you wireframe, before you decide on interfaces, you sketch. Capturing the little moments—the drag-and-drop, the fly-out menu—that is the challenge. Some people choose to storyboard, just as film and TV motion designers do. Others develop a notation system of their own to depict the interactions.

What is a sketch?

To paraphrase David Malouf:

  • It needs to happen quickly.
  • It needs to be cheap enough as to be disposable (materials & time).
  • There need to be a lot of sketches for comparing and contrasting.
  • The visual style needs to be simple and clear so the entire team will understand it.
  • It needs to be rough so no one gets attached to it.

Articles used to create this lesson:

Interactive Design Notation (opens as a pdf) Jakub Linowski  |  October 29th, 2009

Shades of Grey: Thoughts on Sketching Will Evans  |  June 24th 2010

Sketch, sketch, sketch Joshua Brewer  |  January 21, 2010

UXLX report: day 2 David Malouf  |  May 19th, 2010

Posted in Homework | Leave a comment