Dawn Pedersen. Audience Every site's ultimate aim is to communicate something to its users. If your website doesn't communicate what you want it to, your.

Slides:



Advertisements
Similar presentations
New Semantic Elements (Part 2)
Advertisements

Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Dreamweaver Domain 3 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2 KellerAdobe CS5 ACA Certification Prep Dreamweaver Domain 2: Planning.
Designing for Multiple Screen Resolutions Screen resolution is the width and height of the computer screen in pixels Most monitors have many screen resolutions.
Understanding editorial and print design. what is print media? Communications delivered via paper or canvas. Print media is a process for reproducing.
Mgt 240 Lecture Web Site Design Principles April 5, 2005.
Mass Communications Web Design Jill Andes Computer Applications Comm. 115.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Web Page Layout Design Techniques From Moodboard to Mock-up.
Professional Website Portfolios Principles of Visual Design LCC 2720 Brian Schrank.
F.O.C.U.S. on Posters Tips for Making Successful Posters By Phillip Martin.
Sample pages of student research by Beth Walldorf.
Story Boards. Creating and using storyboards Storyboards are an essential tool when designing websites. They help keep developers and graphic artists.
Planning and Designing a Website Session 8. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be.
Why planning? In order to make a successful project good communication is key! The process of planning and designing a project involves many people from.
Academic Computing Services 2010 Microsoft ® Office Visio ® 2007 Training Get to know Visio.
Creating a Web Site Back to Table of Contents. Creating a Web Site Conceiving a Web Site Planning a Web Site 2 Creating a Web Site Section 9-1 Section.
Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.
Multimedia Design. Table of Content 1.Navigational structures 2.Storyboard 3.Multimedia interface components 4.Tips for interface design.
DESIGN PROCESS. DESIGN Every design starts from research and early concept.
Paper Prototyping Source:
Designing for the Web 7 Useful Design Principles.
By Danella Aguayo. DEFINITION SKETCH noun 1. A simply or hastily executed drawing or painting, especially a preliminary one, giving the essential features.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
 What is a wireframe?  What features are important?  Which wireframe tools might you want to try?
Creating an Attractive Site How will your site look. Think about what your customers are seeking and what type of Web site they find attractive.
Chapter 2 Web Site Design Principles
Web Site Design Principles
Web Development. Interaction Design How is information organized? How will people find their way around the site? How will people work with the information?
Lecture 3 Web Design What makes a "good" website? Getting started on your website. Planning the layout. Picking a theme. Effective Design Tips.
Web Development. Presentation Design Visualizing your web site or Visual Design.
STEPS IN THE WEB DESIGN PROCESS A 5 minute presentation on the latest Ideas and methods.
Multimedia Design 1. 2 Objectives By completion of this session, you will be able to: Organize your multimedia project Develop Flowcharts and Storyboards.
Website Usability presentation by Pasha Souvorin for Georgia Pathway in Advanced Web Design evaluating and planning for web design.
G053 - Lecture 07 Designing Your Web Pages Mr C Johnston ICT Teacher
Rux Richmond User Experience Presenting Yourself: Tips for showcasing your IA experience in your resume and portfolio February 26, 2009.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
Date 23 rd Jan Shatin 沙田 Mobile Information Architecture.
Interface Design 2 Week 2. Interface Design 2 :: Week 2 :: Calendar.
Wireframes in Physical Design Yonglei Tao. 1-2 Website Wireframes  A visual guide that represents the framework of a website  Created for the purpose.
Planning a Website Web Technologies I. The Site Design Process DEFINE Goals & Audience Content/Asset Collection Content/Style Information Delivery Requirements.
Posters, Magazines, Websites
Notes: Animation (yes or no): Text/Audio Narration: Title: Scene Graphics (yes or no) : Audio (yes or no): Slide number: Skill or Concept:
Printing Reports. Creating Reports  Reports are the best way to put information from database onto paper, PDF files, and other formats.  In a report,
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
Paper Prototyping Source: Paper Prototyping a method of brainstorming, designing, creating, testing, refining and communicating.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Web page layout in elegance.  Specific Designs for Target Audiences Consider your audiences tastes when creating your website.
Learning Aim B.  It is a good idea to think carefully about the design of a website before you try to implement it.
Unit 13 – Website Development FEATURES OF WEBSITES.
Learning Aim A.  Websites are constructed on many different features.  It can be useful to think about these when designing your own websites.
DMT612 Professional Preparation EFFECTIVE WEB DESIGN.
Using Indents and Tabs In this lesson, you will learn how to use the tab selector and the horizontal ruler to set tabs and indents, as well as how to use.
CD Packaging Design. The Creative Brief 1.Design a CD package: front, back cover and spines. Use the template which was ed to you by the instructor.
Design Process.
CD Packaging Design.
keys to STRONG graphic design
Wireframe.
Web Programming– UFCFB Lecture-4
Back to Table of Contents
Website Planning EIT, Author Gay Robertson, 2018.
Interface Design Interface Design
UI, UX: Who Does What? A Designers guide to the tech industry.
Elements of Effective Web Design
Design Process.
Presentation transcript:

Dawn Pedersen

Audience Every site's ultimate aim is to communicate something to its users. If your website doesn't communicate what you want it to, your audience will go to another site looking for the experience or content that you couldn't give them.

Audience In this class, we will focus on user-centered design. When you build a website, you're building it for your users, not you. You design for your user's strengths and weaknesses.

Audience You want to use every technique possible to: bring users to your site help them find what they're looking for make sure they have a rewarding experience, and keep them coming back.

Audience Understanding your audience is key to creating a user-centered design. Get as much information as possible about the site's target audience before you begin your design work. Ask your client the following questions:

Audience What types of visitors do you want to attract (demographics)? What are your goals for each type of visitor? What are the products/services involved? What are your goals for these products/services? How technically savvy is your expected audience? Will most be on high-speed connections, or on dial- up? How large to you expect your user base to be?

Visual Metaphor One way to get your site looking right is to figure out what the site is about. In other words, what is the site's theme, and how can you express that visually? A visual metaphor takes advantage of familiar visual elements (like images, interface elements, colors, or fonts) and reinforce the site's theme.

Visual Metaphor The word theme is used to refer to all kinds of different things in the world of web design—which can be kind of confusing. For our purposes, a theme is your site's purpose and content.

Visual Metaphor So, the theme of amazon.com is an online merchant that focuses mainly on books. The visual metaphor uses design elements (color, graphics, typography) that reinforce the site's theme.

Visual Metaphor Take a look at the following sites. What is the site's theme? What are some of the design elements that are used in the site's metaphor?

Visual Metaphor jobs.webdesignerwall.com

Visual Metaphor clubpenguin.com

Visual Metaphor silverbackapp.com

Visual Metaphor seriouseats.com

Visual Metaphor themorningnews.org

Visual Metaphor Resources: Visual Metaphors: 7 rockstar examples on the web Stock Visual Metaphors

Brainstorming a Visual Metaphor For any website design project, start by figuring out the theme. Then come up with a good visual metaphor. Not only that, but figure this out without worrying to much about how many columns you'll need, or what sort of navigation to use.

Brainstorming a Visual Metaphor Developing a visual metaphor is really all about brainstorming—spending some time to really think about your client's content, audience, and what visual elements they want to see on the page.

Brainstorming a Visual Metaphor Any remember one thing: don't discredit any ideas or concepts you come up with. Just write them all down—you can refine things later.

Brainstorming a Visual Metaphor Color, layout, and element placement are all important factors when deciding the best way to reinforce a site's theme. So, once you're clear on a theme, here's what you need to do:

Brainstorming a Visual Metaphor Choose some color palettes Pick colors that work well with the content and support the theme of the site. Use resources like kuler.adobe.com and colourlovers.com to build palettes and see how different colors will work together.kuler.adobe.com colourlovers.com

Brainstorming a Visual Metaphor Design layouts based on content Make layouts based on the content you've been given. The more columns you have, the more space you have to fill. Also remember that white space is important. You don't have to fill every available pixel. More about these layouts, called wireframes, in a bit.

Brainstorming a Visual Metaphor Use visual elements to reinforce the theme The use of imagery, iconography, and text can help reinforce the site's theme by making the site "look like the content." This is where your brainstorming will help the most. Use your list of ideas to come up with display elements that help emphasize your site's main themes.

Shaping Your Visual Metaphor with Page Elements Once you have a general site theme and have started to think about what you want on your site, you need to consider where all your client's content is going to go. How you lay out a site affects your overall visual metaphor a lot—it dictates what can and can't appear on a given page.

Shaping Your Visual Metaphor with Page Elements For example, if you only have a single column, it may be difficult to make the site "feel" like a newspaper or magazine. But add a few more columns and you make the page mimic the grid-like multi-column layouts of your typical daily paper.

Shaping Your Visual Metaphor with Page Elements Site identity This can include a logo, a slogan, and a brief site description. Site identity is typically contained in some kind of header, and it is critical to web usability. A user should known what site they're on from any page.

Shaping Your Visual Metaphor with Page Elements Main navigation This element is essential for users to get around your site. Design, placement, and the content of this element will help convey your site's theme in different ways.

Shaping Your Visual Metaphor with Page Elements Subnavigation This element displays content that lies under a main navigational item. This is usually only needed for larger sites and more complex content.

Shaping Your Visual Metaphor with Page Elements Body content This element is where all the magic happens. This is where you put the stuff that people are coming to see. Whether it's images, a blog post, or a YouTube video, all that stuff goes in the body content.

Shaping Your Visual Metaphor with Page Elements White space Also called negative space, this element is the area between all the different design elements on your page. White space helps break up blocks of content, gives the user's eye a little rest, and focuses the user's eye towards content.

Shaping Your Visual Metaphor with Page Elements Footer This portion of your layout can hold anything from copyright information to duplicate navigation links. Users will often look to this section for links or content that can't be located anywhere else on the site.

Shaping Your Visual Metaphor with Page Elements Sidebars These elements can hold everything from link lists to extra body content. They can also be useful for ancillary navigation and archive links for blogs.

Wireframes Once you've decided upon all the content areas that are appropriate for your site, and what the site's theme and visual metaphor will be, it's time to draw up a few wireframes. A wireframe is an illustration of the layout of fundamental elements in the web page's interface. Typically, wireframes are completed before any additional artwork is developed. Carefully planning your overall layout, before you create any graphics, can eliminate a lot of headaches later on.

Wireframes Wireframes can be created by hand or by using a variety of software programs. Visio is software that is ideally suited for wireframing, but it is expensive. Sometimes designers simply use Word, Excel, or Illustrator.

Wireframes Wireframes need to achieve a balance between being too detailed and too general. A wireframe that is too precise may leave little creative room for the designer. A wireframe that is too loosely defined can be misinterpreted by designers and developers. The wireframe format used should be dependent upon the audience. How to create a wireframe:

Wireframes 1. Decide on which page elements will be included. 2. Draw a rectangle on your paper which approximates the proportions of a browser window. 3. Use a ruler or draw carefully to indicate the placement of the various page elements. Take your time to show clean boundaries. Imagine that you will be submitting this work to a paying client.

Wireframes 4. Label each of the page elements. 5. Instead of drawing, you may use software instead—but take care to include the page outline and all the page elements neatly, and label each element. Drawing several wireframes will allow you to rule out less ideal layouts before you begin more complex drawings.

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Wireframes Sample Wireframe

Storyboards Clients sometimes don't really "get" wireframes, which is why it's a good idea to present them with the next step, a storyboard, instead. A storyboard, otherwise called concept art, is a drawing used to visualize your deign in its entirety. It gives you a chance to see how colors interact with one another, how your navigational system looks, how your visual metaphor plays out, and whether content is presented in the best way possible—without getting into code.

Storyboards Instead of creating an elaborate mockup in Photoshop, or a preliminary layout in XHTML and CSS, you can save a lot of time and effort to draw one or more storyboards so that you and your client can grasp what the site might look like. If your client needs changes or a whole new layout after viewing the storyboard(s), it's a simple matter to draw up a new storyboard or two. Storyboards have more detail than your wireframes, but are not as highly detailed as the final site will be.

Storyboards How to create a storyboard: 1. Again, draw a rectangle on your paper which approximates the proportions of a browser window. 2. Select one of your successful wireframe layouts. 3. Drawing cleanly and carefully, outline the major page elements.

Storyboards 4. Use horizontal lines or the label "text appears here" to indicate where text will go. 5. Use boxes with crossed diagonal lines or simple outlines to indicate image placement. 6. Sketch in logos, icons, headings, and navigation buttons. 7. Add color with colored pencils, crayons or markers.

Storyboards Allow your client to draw right on your storyboard—encourage them to give you as much feedback as possible. Ideally, you will provide them with two or more storyboards. Make sure that each storyboard meets your client's needs, but that they are different enough to give them a choice.

Storyboards Sample Storyboard

Storyboards Sample Storyboard