Assignment 2_1: Ideas/Sketches
Due Thursday, 11.01
The sites consists of 3-4 different page designs. Home and Portfolio Overview pages could be one and the same thing. Although there will be numerous project pages they can all follow the same design template.
- Home/Landing page
- About page with contact info
- Portfolio Overview page
- Portfolio Project Page
We'll follow a typical web development process: First step of the design phase will be sketches. Second step will be creating more refined designs in Illustrator before we start with coding.
Focus on typography and hierarchy of information. It should be immediately obvious what site I'm on, what the page titles, headlines and subheads are, how to navigate, what descriptive text information is etc. Use of images are restricted to project images. Background textures are possible. But more about that in the design phase.
Task
Develop and idea in sketch form for the pages mentioned above. Depending on your preference these sketches can be on paper or created in Illustrator. The layout is based on a 6-column grid of equal widths. Columns can be combined which is something you likely need to do for smaller screens. For example your layout could have 6 columns on big screens, 3 columns on tablets and 2 columns on smartphones. 3 and 2 are combined grid columns of 6.
I prepared an Illustrator documents that you could print out for your sketches. This "sketch sheet" you can download it here: Illustrator CC, older Illustrator. But keep in mind other grid/column combos are possible (for example 3 columns on desktop, 2 columns on tablet and 1 on smartphones).
Structuring content (text, images...)
Organizing and prioritizing information on a page helps users understand a message quickly and in what order to read things.
Prioritizing
If everything on a page appeared in the same style, it would be much harder to understand. By making parts of the page look distinct from surrounding content, designers draw attention to those items. Designers create a visual hierarchy to help users focus on the key messages that will draw people's attention, and then guide them to subsequent, less important information.
Organizing
Grouping together related content into blocks or chunks makes the page look more organized (and easier to understand). Users should be able to identify the purpose of each block without processing each individual item.
Visual Hierarchy
Most web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that helps people understand the most important information immediately. Hierarchy refers to the order in which your eyes perceive what they see. It is created by adding visual contrast between the items being displayed. Items with higher contrast are recognized and processed first.
Sketches, Wireframes
Definition from Wikipedia: "A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like."
An important aspect of a wireframe is that it shows the hierarchy of information. It helps to prioritize content without getting lost in the detail already. This is especially important for the mobile layout (important content should appear first (at the top) in a long vertical, scrolling page).
Wireframe sketches come in all kind of forms and shapes. But they all show the structure of a page with a minimum or now style. Here a few examples:
