Assignment 3_2: Wireframe Sketches in FIGMA
Due together with the Design Phase on 10.19.
The sites consists of 3-4 different page designs/templates. Although there will be numerous project pages they can all follow the same design template. HOME and ABOUT or HOME and PORTFOLIO overview pages can be combined into one page
- 1. HOME page
- 2. PORTFOLIO overview page
- 3. CLASS/PROJECT page
- 4. ABOUT page with contact info
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 FIGMA before we start with coding. In order to catch up with our schedule we'll be combining sketch and design phases. I recommend to start with sketches but soon move to Illustrator for more refined designs.
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 is restricted to project images. Background textures are possible. But more about that in the design phase.
Task
Develop 2-3 ideas in sketch form for the pages mentioned above in FIGMA. The layout can be based on the 6-column grid of equal widths used for the previous assignment or can have another grid. 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. If you think your site requires a different grid, go for it.
Structuring content (text, images...)
Organizing and prioritizing information on a page helps users understand the page 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.
Wireframe sketches come in all kind of forms and shapes. But they all show the structure of a page with a minimum or no style. Here a few examples:
