before you build a website 2015
TRANSCRIPT
Before You Build
What questions should be answered.. before you build a website?
A Website Life Cycle
ResearchResearchResearch
Page LayoutDesign
Color schemaFontsBackgrounds
Build.. code
Buy
Support
www.your.com
content
The Idea
I have the tools
Start Building
I have the tools
Start Building
Think about it
• Idea•Tools•Build
You have the Tools and Idea
WouldYouBuild
A Plan
First Step
List whatyou know
1. We want a website
2. We have a domain
3. We have hosting4. We need help
Research
Competition’s Website or Internet Presents
Pros | Cons
Any Websites
Your Audience
People look at your Website for?
directions
information
entertainment
Think about Searches
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...
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
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
Navigations
Your Navs /Menus
Mobile navigation touch elements
Hierarchical◦Too Shallow◦Too Deep
Linear Random
http://writemaps.com/
Website Navigation
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
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
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
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
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
PlanningUser Flow
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…
Fixed Layout◦ rigid design◦ Fixed-width often
at left margin
Centered box◦ More appealing if
fixed box of content is centered
Page Layout Design
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
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
Responsive Design
Layout Design
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 …
Yourself Management CEO Target consumers
Who are you Designing for..
Design for Your Target Audience
Bright colors for Younger children
ColorsDark colors for Young Adults
Neutral colors for Everyone
White and larger for Senior Adults
Colors are important
Understand Contrast on computers is very different than print.
Styletil.espaletton.comcolor.adobe.com/create/color-wheel/
Design Styles
http://subtlepatterns.com/ Create your styles
Backgrounds
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
Color Schemes & Headings
Fonts selections
Colors for your target audience Understanding of design principles Fonts and Size in point for h1-h6 Subtle patterns for backgrounds
Now you Have
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
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."
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
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
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
“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
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
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..
A Website Life Cycle
ResearchResearchResearch
Page LayoutDesign
Color schemaFontsBackgrounds
Build.. code
Buy
Support
www.your.com
content
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
Questions?
@mw4designsMWforDesigns.com
JCCC.edu/ce
Mary White
http://www.slideshare.net/mwfordesigns/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
File size and dimension matterProvide for robust navigationAntialiased/aliased text considerationsProvide alternate textUse only necessary multimedia
Use of Graphics & Multimedia
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
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
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
http://terrymorris.net/bestpractices
Web Design Best Practices Checklist
•Page Layout•Browser Compatibility•Navigation•Color and Graphics•Multimedia•Content Presentation•Functionality•Accessibility
JCCC.edu/ce
Mary White
http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015
JCCC.edu/ce
Mary White
http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015