DESIGN YOUR OWN WEB SITE · 20/02/2015 · Copyright 2015, Colordance Design, All Rights Reserved...

Copyright 2015, Colordance Design, All Rights Reserved

FRANK JACKOWIAKPHOTOGRAPHER AND EDUCATOR

p: 630.430.2487

e: [email protected]

DESIGN YOUR OWN WEB SITESEA Conference

February 20, 2015


Agenda Begin The Creative Process

Website Purpose

Key Elements

– Identity

– Target Audience Preferences

– Concept & Color

Website Usability

– Minimize Navigation–Key Words

– Scanning vs Reading

– Animation/Sound

Construction

– Site Map (Hierarchy of Information/Content)

– Layout & White Space

– Sketch

Brainstorm Concepts

2


So, You Want A Web Site!

Identify Web Site Purpose

– Sell Your Art Online?

• Online shopping cart & portfolio gallery

– Promote Your Events?

• Calendar, online registration & payment

– Educate Viewers About Your

Services/Programs?

• News/blog posts

• Photo galleries

• Videos

Green and Easy Way to Provide Specific

Materials to Your Customers– For workshop slides visit

http://www.colordancedesign.com/docs/ws20150220.pdf

3

Create A Content Rich Site

http://www.colordancedesign.com/docs/ws20150220.pdf


Identity Essentials

Creative Business Name & Tagline

– Either Could Be Used for Domain Name

Logo or Brand Mark

– Iconic, Symbolic Mark Meant to Last Overtime,

Appeals to Your Target Audience

– Typographic, Graphic Illustration with Type

Treatment, or Letter Substitution

– Two Colors Max or One Color with Tint

– Readable in Large and Small Sizes (e.g. 100px)

Overall Concept Influences Choice of Colors,

Imagery, Layout

Often Determines Color Scheme

– Color Gives Instant Meaning & Emotion

– Consult Color Harmony Book– Identify 5 colors: heads 1, 2, 3; nav up, mouseover,

down; border, copyright bar, links

4


Color — A Lightening Bolt

Conveys Ideals, Symbols, Meaning, Mood

Subliminal, Powerful, Stimulates Senses

5

Stimulating

High Energy

Provocative

Tender/Sweet

Feminine

Happy

Friendly

Childlike

Cheerful

Sunny

Warmth

Imaginative

Enduring

Earthy/Rich

Rustic

Dependable

Trustworthy

Calming

Refreshing

Nature/Healing

Money

Sensual/Spiritual

Regal/Futuristic

Artistry/Unique

Classic Timeless

Permanence

Professional

Purity

Brilliance

Clean

Power

Sophisticated

Dramatic

Pleasing/Rich

Classy/Unique

From Pantone Guide to Communicating With Color


Research Your Niche

Who Is Your Audience?

– Gender, Age, Values, Ethnic Background

What Style “Drives” Their Culture?

– Casual

– Rustic

– Contemporary

– Elegant

– Playful

– Historic

– Alternative

Your Web Site Design Needs to

Appeal to Their Taste

– Yours is Secondary

6


Website Usability Matters

Home Page Visual Introduction

– First Impression – Primarily Visual

– Logo – Top Left Corner All Pages

– Summary Paragraph for SEO

– Contact Info, Facebook, LinkedIn,

Join Our Mailing List

Secondary Page

– Less Visual, More Content

– Unified Look with Home Page

Consistent Navigation

– 7-9 One Word Global Nav

Headings

– Links One Consistent Color/Style

Audiences Do Not Like

– Much Scrolling

– Music Unless They Control When

It Plays

7

Be Careful With Animation

– The Eye is Drawn Toward Movement

– Use to Direct Attention To a Main

Point of Interest

– Be Careful Not To Pull the User’s

Eye Off the Page (avoid swipes)

– Use fades rather than swipes for

photo transitions

– Can Be Helpful to Tell a Story

Build A Content Rich Site

– Post Content of Interest to Viewers

– Keep It Updated!

– Create Reasons to Return to Your

Site

Responsive Website

References– http://www.nngroup.com/articles/

http://www.nngroup.com/articles/


Scanning vs Reading

Type

– Use Common Fonts Available

on both PCs and MACs

• Georgia, Verdana specifically

designed for web

• Arial, Times New Roman,

Trebuchet MS

– No More Than 3 Font Types

– 12 Words per Line for

Readability

– All Caps and/or Centered Text

Reduces Reading Speed

– Italics Breaks Up on “small”

Font Sizes

Font Size and Type

– Serif Fonts easier to read IF

they are large enough

– Sans Serif reads more slowly

and is good for headings

8

10 Second Threshold per Page

– Users often leave Web pages after

10-20 seconds

– Short Paragraphs & Sentences

– Make First Word Important

– Key Words Embedded in Heads

& Body Copy

– Use Heads, Sub Heads, Bulleted

& Numbered Lists

Avoid a “Busy” look

– Use Color to Focus Attention

– Organize Data and Links so the Eye

is Not Confused as to Where to Look

Meaningful Imagery

– Increases Recall & Comprehension

– Engages Viewer Curiosity/Creativity

– Creates a “Sense of Discovery”

Copyright 2015, Colordance Design, All Rights Reserved9

Hierarchy of InformationSite Map

Ask Yourself What Content Do I Have,

What Do I Need To Create?

– Content Rich Site Good Idea

• Helps search engine ranking

• Bookmarked, return visits, recommended to others

– Okay and Helpful if Content is Redundant

What Does The Viewer Expect To See?

– Most Important to Least Important

– “How To” Papers, Calculators, “Tips,” FAQ’s,

Rotating Quotes, Movie Clips, Photo Galleries

Use Broad One Word Navigation Heads

– Place More Specific Info On Individual Pages

If All Else Fails . . .Get Busy Writing and

Organize Later


Incubate Concepts & Ideas

Give Yourself Time To Be Creatively Inspired

– Swimming in a Sea of Images

Research/Browse What Is Already Out There

– Web Sites

– Books & Magazines

– Advertising Signage

– Craft and Retail Stores

– Nature – Shapes, Textures, Colors

– What You Have Gathered & Collected Over Time

Visual Concepts/Metaphors/Themes

“Breathe Life & Spirit Into A Design”

– Influences Written Copy, Color Scheme, Typography, Layout

– Evolves a Consistent Visual Identity Imprinting Your Messaging

10

Conceptual Design Provides A Necessary Organizing “Frame”


Concept Examples

11

Process Painting Workshops

Target Audience: Adults

Interested in Creativity

New Mexico & US

Visual Concept • Flow of Paint and Brush

• Paintbrush for nav bar

• Background paisley shapes convey

moving brush strokes

• Southwestern complementary color

scheme - coral/teal

• Photo bar of brilliant paintings

• Butterfly symbolic of

transformation

Poet, Author, Instructor

Target Audience: Educators,

Adults interested in creative

writing

Visual Concept

• Garden Sanctuary

• Serene, reassuring, calm,

peaceful, quiet color palette

invites viewer to “go within”

• Images of garden scenery

• Color palette gender neutral

Harvest Pow Wow

Target Audience: Families,

Scout Groups/Adults

interested in Native

American culture

Visual Concept: • Rustic/Warm color scheme

• Organic tan textured paper

• Graphic element of Ojibwey

embroidered design

• Colorful photos of Native

American dancers,

drummers, tipis and regalia


Layout Examples

12

LOGO LOGO

LOGO LOGO

Navigation

Te

xt

Navigation Navigation

CopyrightCopyright

Copyright Copyright

Text

Text Text

Text

Navigation

Text Text Text

Text


Brainstorm Colors/Concept/Words

With Your Business In Mind Select

– 5 -10 Paint Colors/Fabric Swatches/Paper Samples

– 3 Magazine Images which Conceptually Represent

Your Business

• Mission, goals, achievements, attributes

– With Paper/Sketch Book

• List 10-12 key adjectives/words that describe

attributes of your business

Glue colors, magazine images, 10 key words

on poster board

– In Remaining Space Collage Additional Images

• Keep in mind color palette

• Use magazine images, or draw with paper and pen

• Share with a partner, take home for more time

13

Write Web Site Copy To Your Concept


Example Collage BoardStained Glass Art

14

Color PalettePaint & Fabric Swatches

Ten Descriptive Words1. Handmade

2. Custom designed

3. Stained glass repair

4. Elegant –Tiffany

5. Provides Privacy

6. Colorful

7. Animal/Plant shapes

8. Variety of styles

9. Wide range of prices

10. Stained glass repair

3 Images of importance Collage key words

with more images


Create A Working Site Map

1. Write Each of Your Main One Word Global

Navigation Headings (7-8 Headings Max)

– Ex: About/Bio/Artist, Portfolio/Gallery,

Services/Classes, Calendar/Events, Shop/Buy

– Place Them In Your Preferred Order Across

The Width of Folder

2. Write More Specific Page Headings Below

– Arrange Primary Pages Underneath the

Appropriate Global Nav Headings

– These are your Primary Pages

3. Add More Specific Topic Pages Underneath

– Place Secondary Pages with Related Primary Pages

4. Helpful to Get Ideas from Other Web Sites


Sketch Home & Secondary Page Template

Home Page – Grab Viewer’s Attention

Intro To What You Are All About

– Primarily Visual (Photos, Graphic Elements,

Illustrations, Splash Animation Bars)

– Paragraph or Two of Text With Embedded Key

Words for SEO

– Logo Top Left Corner

• Contact Info, Facebook, “Join Our Mailing List”

Secondary Page

– More Content, Additional Graphic Elements

– Unified Design/Consistent Color Scheme

– Effective Use of White/Negative Space

– Photos Related to Page Content

Things To Watch

– Animation: The Eye Follows Movement

– Clutter: Too Much Content on a Page Can

Confuse Your Viewer

16


Final Note – Search Engine Opt

Link to Google Recommendations for

SEO (Search Engine Optimization)– https://support.google.com/webmasters/ans

wer/35769

Key Elements:– Content rich site

– Insert descriptive key words/text in:

• text, headings and image “alt” tags

• Use HTML <title> and “description” meta tags

– Get as many other similar sites to link to

yours as possible (links are a major factor

in page rating).

https://support.google.com/webmasters/answer/35769


THANK YOU

DESIGN YOUR OWN WEB SITE · 20/02/2015 · Copyright 2015, Colordance Design, All Rights Reserved...

Documents

Transcript of DESIGN YOUR OWN WEB SITE · 20/02/2015 · Copyright 2015, Colordance Design, All Rights Reserved...