design your own web site - colordance design · 22/02/2013 · “breathe life & spirit into a...

Copyright 2014, Colordance Design, All Rights Reserved

FRANK JACKOWIAK PHOTOGRAPHER AND EDUCATOR

p: 630.430.2487 e: [email protected]

capture the spectrum of your imagination

DESIGN YOUR OWN WEB SITE SEA Conference

February 21, 2014



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

– 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/ws20140221.pdf

3

Create A Content Rich Site



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

References – 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”


capture the spectrum of your imagination 9

Hierarchy of Information Site 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

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

Text

Navigation Navigation

Copyright Copyright

Copyright Copyright

Text

Text Text

Text

Navigation

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 • Geographic/Descriptive words someone would use

in a Goggle Search

Take Home – Collage Colors, Conceptual Images, and Descriptive

Words Together On Poster Board

13

Write Web Site Copy To Your Concept



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

15



Final Note – Search Engine Opt

Link to Google Recommendations for SEO (Search Engine Optimization) – http://static.googleusercontent.com/media/

www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

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).

http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf






THANK YOU

design your own web site - colordance design · 22/02/2013 · “breathe life & spirit into a...

Documents