Before you build a website 2015
-
Upload
mwfordesigns -
Category
Technology
-
view
397 -
download
0
Transcript of Before you build a website 2015
![Page 1: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/1.jpg)
Before You Build
What questions should be answered.. before you build a website?
![Page 2: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/3.jpg)
The Idea
![Page 4: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/4.jpg)
I have the tools
Start Building
![Page 5: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/5.jpg)
I have the tools
Start Building
![Page 6: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/6.jpg)
Think about it
• Idea•Tools•Build
![Page 7: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/7.jpg)
You have the Tools and Idea
![Page 8: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/8.jpg)
WouldYouBuild
![Page 9: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/9.jpg)
A Plan
![Page 10: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/11.jpg)
Research
![Page 12: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/12.jpg)
Competition’s Website or Internet Presents
Pros | Cons
![Page 13: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/13.jpg)
Any Websites
![Page 14: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/14.jpg)
Your Audience
![Page 15: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/15.jpg)
People look at your Website for?
directions
information
entertainment
![Page 16: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/16.jpg)
Think about Searches
![Page 17: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/17.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/19.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/20.jpg)
Navigations
![Page 21: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/21.jpg)
Your Navs /Menus
Mobile navigation touch elements
![Page 22: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/22.jpg)
Hierarchical◦Too Shallow◦Too Deep
Linear Random
http://writemaps.com/
Website Navigation
![Page 23: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/23.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/24.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/25.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/26.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/27.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/28.jpg)
PlanningUser Flow
![Page 29: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/29.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/30.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/31.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/32.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/33.jpg)
Responsive Design
![Page 34: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/34.jpg)
Layout Design
![Page 35: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/35.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/36.jpg)
Yourself Management CEO Target consumers
Who are you Designing for..
![Page 37: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/37.jpg)
Design for Your Target Audience
![Page 38: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/38.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/39.jpg)
Colors are important
Understand Contrast on computers is very different than print.
![Page 40: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/40.jpg)
Styletil.espaletton.comcolor.adobe.com/create/color-wheel/
Design Styles
![Page 41: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/41.jpg)
http://subtlepatterns.com/ Create your styles
Backgrounds
![Page 42: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/42.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/43.jpg)
Color Schemes & Headings
![Page 44: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/44.jpg)
Fonts selections
![Page 45: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/45.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/46.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/47.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/48.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/49.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/50.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/51.jpg)
“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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/52.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/53.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/54.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/55.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/56.jpg)
Questions?
![Page 57: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/57.jpg)
@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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/58.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/59.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/60.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/61.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/62.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/63.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/64.jpg)
JCCC.edu/ce
Mary White
http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015
![Page 65: Before you build a website 2015](https://reader033.fdocuments.us/reader033/viewer/2022042819/55c4a395bb61eb3d578b485b/html5/thumbnails/65.jpg)
JCCC.edu/ce
Mary White
http://www.slideshare.net/mwfordesigns/before-you-build-a-website-2015