before you build a website 2015

65
Before You Build What questions should be answered.. before you build a website?

Upload: mwfordesigns

Post on 07-Aug-2015

396 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Before you build a website 2015

Before You Build

What questions should be answered.. before you build a website?

Page 2: Before you build a website 2015

A Website Life Cycle

ResearchResearchResearch

Page LayoutDesign

Color schemaFontsBackgrounds

Build.. code

Buy

Support

www.your.com

content

Page 3: Before you build a website 2015

The Idea

Page 4: Before you build a website 2015

I have the tools

Start Building

Page 5: Before you build a website 2015

I have the tools

Start Building

Page 6: Before you build a website 2015

Think about it

• Idea•Tools•Build

Page 7: Before you build a website 2015

You have the Tools and Idea

Page 8: Before you build a website 2015

WouldYouBuild

Page 9: Before you build a website 2015

A Plan

Page 10: Before you build a website 2015

First Step

List whatyou know

1. We want a website

2. We have a domain

3. We have hosting4. We need help

Page 11: Before you build a website 2015

Research

Page 12: Before you build a website 2015

Competition’s Website or Internet Presents

Pros | Cons

Page 13: Before you build a website 2015

Any Websites

Page 14: Before you build a website 2015

Your Audience

Page 15: Before you build a website 2015

People look at your Website for?

directions

information

entertainment

Page 16: Before you build a website 2015

Think about Searches

Page 17: Before you build a website 2015

What you want on your website? What you don’t on your website? Who is your Target audience

Age Tech savvy and more…

Why are they viewing your site or business? How are they going to search for your

business or information?

Now you have...

Page 18: Before you build a website 2015

Static- basic information that never changes

Dynamic- Contact, poll, or form information where

you are collecting information from the user

Blog- NEWS or information that is current or new on

the site daily, weekly, or even monthly

Types of Pages

Page 19: Before you build a website 2015

Make your site easy to navigate◦ Provide clearly labeled navigation in the

same location on each page◦ Most common – across top or down left side

19

How will you DesignYour Menus

Page 20: Before you build a website 2015

Navigations

Page 21: Before you build a website 2015

Your Navs /Menus

Mobile navigation touch elements

Page 22: Before you build a website 2015

Hierarchical◦Too Shallow◦Too Deep

Linear Random

http://writemaps.com/

Website Navigation

Page 23: Before you build a website 2015

A clearly defined home page

Navigation links to major site sections

Often used for commercial and corporate websites

Hierarchical Organization

home

about products contact

product1 product2

Page 24: Before you build a website 2015

Be careful the page navigation is not too shallow.

They all have the same weight Too many immediate choices Confusing and less usable website.

Too Shallowhome

nav2

nav13

nav5

nav7

nav9

nav11

nav4

nav3

nav1

nav8

nav10

nav12

nav6na

v3anav3b

Page 25: Before you build a website 2015

Be careful that the page organization is not too deep.

◦ This results in many “clicks” needed to drill down to the needed page.

◦ User Interface “Three Click Rule” A web page visitor should be able

to get from any page on your site to any other page on your site with a maximum of three hyperlinks.

Too Deepnav1

nav2

nav3

nav2ana

v2b

nav3b

nav3a

nav2cna

v2e

nav2d

home

nav1b

navc1

navc1

navg3

navg1

navg2

nav2g

nav2f

Page 26: Before you build a website 2015

A series of class pages that provide a tutorial, tour, or presentation.

Sequential viewing is required

Linear Organization

home class 1 class 2 class 3 grade

Page 27: Before you build a website 2015

Usually there is no clear path through the site

May be used with artistic or concept sites

Not typically used for commercial sites

Random Organization

nav

navII

nav

navnav

nav1b

navI

navBnav1

navA

home

Page 28: Before you build a website 2015

PlanningUser Flow

Page 29: Before you build a website 2015

your navigations (menus) and the hierarchy of your website.

Do you need sidebar menus?Footer menus?

Remember to have a Terms of Service page and Privacy Policy pageYou may even need a DMCA page if you have material that is copyright◦ Freeprivacypolicy.com◦ Plugin https://wordpress.org/plugins/auto-terms-of-service-and-privacy-policy/

Now you have the pages…

Page 30: Before you build a website 2015

Fixed Layout◦ rigid design◦ Fixed-width often

at left margin

Centered box◦ More appealing if

fixed box of content is centered

Page Layout Design

Page 31: Before you build a website 2015

Fluid Layout◦ “liquid” design◦ Expands to fill the

browser at all resolutions.

Responsive: ◦ Page content

typically centered and often configured with a percentage width such as 90%-100%

Page Layouts

Page 32: Before you build a website 2015

Test at various screen resolutions measurements of devices are in pixels◦ Most widely used: 1024x768, 1366x768, and 1280x800◦ Tablets 768X1024 ◦ Phones 320X768

Design to look good at various screen resolutions◦ Centered page content ◦ Set to either a fixed or percentage width

Web Page Design Screen Resolution

72pixels / inch

Page 33: Before you build a website 2015

Responsive Design

Page 34: Before you build a website 2015

Layout Design

Page 35: Before you build a website 2015

You know the pixel width and height of… All view ports (Mobile, Tablet, and Desktop) Layouts for the pages on your website

◦ Home page template◦ Full width template◦ Sidebar template◦ Blog template◦ Post template

Now you have the layout for …

Page 36: Before you build a website 2015

Yourself Management CEO Target consumers

Who are you Designing for..

Page 37: Before you build a website 2015

Design for Your Target Audience

Page 38: Before you build a website 2015

Bright colors for Younger children

ColorsDark colors for Young Adults

Neutral colors for Everyone

White and larger for Senior Adults

Page 39: Before you build a website 2015

Colors are important

Understand Contrast on computers is very different than print.

Page 40: Before you build a website 2015

Styletil.espaletton.comcolor.adobe.com/create/color-wheel/

Design Styles

Page 41: Before you build a website 2015

http://subtlepatterns.com/ Create your styles

Backgrounds

Page 42: Before you build a website 2015

Repetition◦ Repeat visual elements

throughout design Contrast

◦ Add visual excitement and draw attention

Proximity◦ Group related items

Alignment◦ Align elements to create

visual unity

Visual Design Principles

Page 43: Before you build a website 2015

Color Schemes & Headings

Page 44: Before you build a website 2015

Fonts selections

Page 45: Before you build a website 2015

Colors for your target audience Understanding of design principles Fonts and Size in point for h1-h6 Subtle patterns for backgrounds

Now you Have

Page 46: Before you build a website 2015

Establishing the Content before the build will help determine what pages you really need

Use of images, videos, and audio when appropriate, but not just because

Pages should be filled with content that is relevant to your website

Content

Page 47: Before you build a website 2015

Avoid long blocks of text Use bullet points

◦Easy◦To◦Read

Use headings and subheadings◦People scan content on the web

Use short paragraphs

Writing for the WebContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

Lorem ipsumThe standard 1500s"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem Ipsumlaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Page 48: Before you build a website 2015

Reliability and information◦ Relevant information makes the credibility of

the site◦ Link to sites you know are established and

provide more value to your site

Ethical use of information◦ You should own Photographs ◦ Copyright and the Web

On the Web

Page 49: Before you build a website 2015

Use common fonts:◦ Arial, Helvetica, Verdana, Times New Roman

Use appropriate text size: ◦ medium, 1em, 100%

Use appropriate line length ◦ Between 50-75 characters is recommended

Use strong contrast between text & background

Use columns instead of wide

areas of horizontal text

Design “Easy to Read” Text

Page 50: Before you build a website 2015

Carefully choose text in hyperlinks

◦ Avoid “click here” ◦ Hyperlink key words or phrases◦ Do not hyperlink entire sentences

Chek yur spellin (Check your spelling)

More Content Design Considerations

Page 51: Before you build a website 2015

“The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”

– The Center for Universal Designhttp://www.ncsu.edu/ncsu/design/cud/

Universal Design

Page 52: Before you build a website 2015

Web Content Accessibility Guidelines 2.0WCAG 2.0◦ http://www.w3.org/TR/WCAG20/Overview◦ http://www.w3.org/WAI/WCAG20/quickref

Based on Four Principles (POUR)1. Perceivable

Content must be easy to see or hear

2. Operable Interface components in the content must be operable by both mouse and keyboard

3. Understandable Content and controls must be easy to read and well-organized

4. Robust.Content uses correct syntax and function on popular operating systems, browsers, and assistive technologies.

http://webaim.org/articles/pour/

Design for Accessibility

Page 53: Before you build a website 2015

You can adjust the pages to the content you have

You own the content and assetsYou are creating content in an outline

fashion for readability on the webYou have a font selected for headersYou are following accessibility guidelines

Now you have Content..

Page 54: Before you build a website 2015

A Website Life Cycle

ResearchResearchResearch

Page LayoutDesign

Color schemaFontsBackgrounds

Build.. code

Buy

Support

www.your.com

content

Page 55: Before you build a website 2015

Let’s build a website Research competition Research your likes Research your target audience Gather Content Design the user flow Design the layout of your content Pick colors, fonts and backgrounds Work from your Plan Now you Build Support and Review

In summary

Page 56: Before you build a website 2015

Questions?

Page 57: Before you build a website 2015

@mw4designsMWforDesigns.com

JCCC.edu/ce

Mary White

http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015

Page 58: Before you build a website 2015

Graphics & Multi media Page Load times Mobile Design Checklist Responsive Web Design Web Design Best Practices Checklist

My Extra Resources

Page 59: Before you build a website 2015

File size and dimension matterProvide for robust navigationAntialiased/aliased text considerationsProvide alternate textUse only necessary multimedia

Use of Graphics & Multimedia

Page 60: Before you build a website 2015

Watch the load time of your pages It should be 2-5 sec max Try to limit web page document and associated

media to under 60K on the home page

Web Page Design Load Time

Page 61: Before you build a website 2015

Small screen size ~320 – 500 px Larger font point size Larger buttons for touch Bandwidth issues Single-column layout Maximize contrast Optimize images for mobile display Descriptive alternate text for images Avoid display of

non-essential content

Mobile Design Checklist

Page 62: Before you build a website 2015

Ethan Marcotte, noted web developerhttp://www.alistapart.com/articles/responsive-web-design

Progressively enhancing a web page for different viewing contexts (such as smartphones and tablets) through the use of coding techniques, including flexible layouts and media queries.

Examples:◦ http://mediaqueri.es/

Responsive Web Design

Page 63: Before you build a website 2015

http://terrymorris.net/bestpractices

Web Design Best Practices Checklist

•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility

Page 64: Before you build a website 2015

@[email protected]

JCCC.edu/ce

Mary White

http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015

Page 65: Before you build a website 2015

@[email protected]

JCCC.edu/ce

Mary White

http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015