Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information...

33
Dashboard Razzle Dazzle Marcy Miller Tait Monday, July 4, 2022 Copyright 2009, Information Builders. Slide 1

Transcript of Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information...

Page 1: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle

Marcy Miller TaitFriday, April 21, 2023

Copyright 2009, Information Builders. Slide 1

Page 2: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleAgenda

Agenda Colors White Space Content Examples

Copyright 2009, Information Builders. Slide 2

Page 3: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Color schemes chosen like this are much more likely to be successful than ones chosen arbitrarily from a palette in a computer

program

Dashboard Razzle Dazzle - Colors

Page 4: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

http://www.webdevelopersnotes.com/design/14.php3

Dashboard Razzle Dazzle - Colors

Page 5: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

“Web Safe” Colors

Dashboard Razzle Dazzle - Colors

Page 6: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

White Space

Page 7: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleWhite Space

What Is White Space? Put simply, white space is the space between different elements of a

design – the area between text, images, paragraphs, headers, footers, links, etc. It is the space between different elements on a page, the space between letters, and the space between lines in a paragraph.

White space allows for easier scanning of a website. It reduces the amount of text visitors see all at once and makes reading much easier. It allows for the visual separation of design elements without adding any new elements such as visible lines or boxes. It is clean, looks professional when used correctly, and gives a site an uncluttered and fresh feel.

White space is sadly one of the most underrated elements of a strong web design. Just because it isn’t shiny or glossy doesn’t mean it isn’t important or essential to a website.

Let’s take a look at a couple of websites that are using white space effectively in their design.

Page 8: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleWhite Space

Made By Sofa creates a strong design message by using a large image at the top of the site with content and navigation below. Sofa works with white space to separate three elements: titles, paragraphs, and tagline.

Page 9: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleWhite Space

Information Architects creates a clean and uncluttered feel on their website by using white space to separate their logo, text, paragraphs, and headings

Page 10: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Content

Page 11: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleContent

Content should never be an afterthought - just something to fill in the white space between images and flashy multimedia presentations. Is the information accurate and on target to its purpose? First, identify for yourself what the purpose of your pages is. If you

don't have your purpose in mind, no one else will either. Think about where people may want to go from your pages, and

provide links or buttons or menus to those places. Make it as easy as possible to navigate. Not everyone has

mastered the Back function of their browser. Some people don't like to scroll pages, so keep your pages short. Be consistent in your buttons or links. Don't change them from

page to page without reason. It is much easier to use if it is consistent.

Page 12: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleContent

Avoid long lines of text as they create boring, hard to read Web sites. Visual boredom results when type extends in an unbroken

line from the left to the right margin of the screen. Long lines are tiring because your Web site reader's eyes

have to make numerous left-to-right shifts. It's also easy to get lost making the transition from the last

word of one line to the first word of the next. Short lines of type create white space to the left and right of

each paragraph. This white spaces frames your message and also provides space to place secondary text or visual information.

Page 13: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle DazzleContent

Avoid large, meaningless graphics. Large graphics take longer to download than small graphics. Long downloading times are only justified if the result is meaningful information.

Use Animation with purpose. Avoid multiple flashing images just for the purpose of having animation. Blinking text. One of the most annoying things you can put

on a page is blinking text. Sure, it attracts attention--at first! But after a few repetitions, it is an annoying distraction.

Overuse of animated GIFs. Animated GIFs are another "feature" that helps attract attention. Sometimes they are clever, but more often than not, they rapidly become annoying.

Page 14: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Examples

Page 15: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 16: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 17: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 18: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 19: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 20: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 21: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 22: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 23: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 24: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 25: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Dashboard Razzle Dazzle - Examples

Page 26: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 27: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 28: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 29: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 30: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 31: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 32: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.
Page 33: Dashboard Razzle Dazzle Marcy Miller Tait Wednesday, October 07, 2015 Copyright 2009, Information Builders. Slide 1.

Questions?