1. CMP 868 - Creating Your Personal and Small Business Web Sites
Session II – Layout & Design
Master a Skill / Learn for Life

2. Session Outline Layout & Design Web Design Tools
Role of Design
Types of Websites
Responsive Web Design
Frameworks
Web Design Tools
Designing Effective Navigation
7/15/2019
Copyright 2017 © Carl M. Burnett

3. Layout & Design Outline
Role of Design
Flexible Design
Using the Grid
Good Alignment
Above the Fold
Organizing Information
Color Schemes
Using Gradients
Choosing Fonts
Your Look & Feel
Responsive Web Design
HTML5 Frameworks
CSS3 Frameworks
Mobile Frameworks
7/15/2019
Copyright © Carl M. Burnett

4. Role of Design Communicate Order Encourage Engagement
Define Boundaries
Easy-to-Use
Inspire Confidence
7/15/2019
Copyright © Carl M. Burnett

5. Flexible Design
7/15/2019
Copyright © Carl M. Burnett

6. Using the Grid
7/15/2019
Copyright © Carl M. Burnett

7. Good Alignment Markup Correctly with right HTML Space CSS Correctly
Use visual editing
Strong Alignment is better than Center Alignment
7/15/2019
Copyright © Carl M. Burnett

8. Above the Fold
7/15/2019
Copyright © Carl M. Burnett

9. Organizing Information
Hierarchy of Information
Tips:
Larger text more important
Higher on page more important
Be consistent
Use Bulleted Lists
Contrast Color Space
7/15/2019
Copyright © Carl M. Burnett

10. Color Schemes
7/15/2019
Copyright © Carl M. Burnett

11. Using Gradients
7/15/2019
Copyright © Carl M. Burnett

12. Choosing Fonts San Serif - Arial Serif – Times New Roman 7/15/2019
Copyright © Carl M. Burnett

13. Your Look & Feel Image Use Attitude of Text Font Use
Element Arrangement
7/15/2019
Copyright © Carl M. Burnett

14. Responsive Web Design Responsive Web Design (RWD)
 Web design approach.
 Develop sites that provide optimal viewing experience.
 easy reading and navigation.
 minimum of resizing, panning, and scrolling—across a wide range of devices.
Fluid Grid Layout - Page element sizing to be in relative - percentages, not absolute units.
7/15/2019
Copyright © Carl M. Burnett

15. Responsive Web Design
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions.
7/15/2019
Copyright © Carl M. Burnett

16. HTML5 Frameworks HTML KickStart HTML5 Boilerplate
Montagejs
Zebra
7/15/2019
Copyright © Carl M. Burnett

17. CSS3 Frameworks: Stylesheet Languages Toast Yaml Gumby Less Framework
Sass (Syntactically Awesome Stylesheets)
LESS (Leaner CSS)
Stylus
Responsive
Foundation
Bootstrap
Columnal
Toast
Yaml
Gumby
Less Framework
Susy
Kube
CSS Framework Comparison
7/15/2019
Copyright © Carl M. Burnett

18. Mobile Frameworks jQuery Mobile Sencha Touch Kendo UI Mobile
Chocolate Chip UI
mobile-frameworks-comparison-chart.com
7/15/2019
Copyright © Carl M. Burnett

19. Break Next - Web Design Tools 7/15/2019
Copyright 2017 © Carl M. Burnett

20. Web Design Tools Outline
Wireframe Design Apps
Free Web Design IDEs
Free Web Development IDEs
Downloadable Desktop Web Development Apps
Cloud Based Web Development
Online Website Builder Sites
Adobe Dreamweaver
Other Tools for Web Site Construction
7/15/2019
Copyright © Carl M. Burnett

21. Wireframe Design Apps frame box Gliffy Mockflow Mockingbird Proto
iPhone Mockup (iPhone)
Mokk.me (iPhone)
Sketch Design Resources
UI8 Design Resources
7/15/2019
Copyright 2017 © Carl M. Burnett

22. Free Web Design IDEs Sublime Text Brackets CoffeeCup Free HTML Editor
Webuilder
ICEcoder
BBEdit
Code Writer
Google Web Designer
7/15/2019
Copyright 2017 © Carl M. Burnett

23. Free Web Development IDEs
Visual Studio Code
Atom by Github
Komodo Edit
Netbeans
Light Table
RJ TextEd
CodeLobster
Bluefish
Coda
Aptana (JAVA Required)
Eclipse (JAVA Required)
7/15/2019
Copyright 2017 © Carl M. Burnett

24. Downloadable Desktop Web Development Apps
Justinmind
Craft by InVision LABS
Bolt 2.0 ($)
Flair Builder ($)
Indigo Studio ($$$)
Omnigraffle (iOS)($)
TETHR (iOS)
iPlotz (iPhone & Android)
Mockups.me - (Web & Desktop)
Balsamiq ($ - Web & Desktop)
7/15/2019
Copyright 2017 © Carl M. Burnett

25. Cloud-Based Web Development Sites
Adobe Dreamweaver
Axure ($)
Fluid ($)
HotGloo ($)
Moqups ($)
Invision ($$$)
Pidoco ($)
Protoshare ($)
Solidify ($)
UXPin ($)
Codepen
Cloud9
Codeanywhere
CodeEnvy
Kodingen
7/15/2019
Copyright 2017 © Carl M. Burnett

26. Online Web Editors WIX - http://www.wix.com
Godaddy Website Builder -
Weebly -
About.me –
WebsiteBuilder -
IM Creator -
Jimdo -
Ucraft -
WebNode -
WordPress -
7/15/2019
Copyright © Carl M. Burnett

27. Adobe Dreamweaver
7/15/2019
Copyright © Carl M. Burnett

28. Other Tools for Web Site Construction
PayPal -
Square -
Authorize.Net -
7/15/2019
Copyright © Carl M. Burnett

29. Student Exercise Online Website Editor Selection
Select a online web editor.
Select a template.
7/15/2019
Copyright 2017 © Carl M. Burnett

30. Break Next - Designing Effective Navigation 7/15/2019
Copyright 2017 © Carl M. Burnett

31. Class Outline What is Navigation? Laying out Your Navigation
Grouping Options
Tabbed Navigation
Dropdown Menus
Using Icons
The Role of the Homepage
You are Here
Encouraging Exploration
Adding Search
Effective Error Messages
Tips for Effective Links
7/15/2019
Copyright © Carl M. Burnett

32. What is Navigation?
7/15/2019
Copyright © Carl M. Burnett

33. Laying out Your Navigation
Header
Site Logo
Utility Links
Sitewide Navigation Options
Sidebar
Local
Navigation
Page Content
Sidebar
Bonus
Navigation
Footer – Background Links And Copyright Info
7/15/2019
Copyright © Carl M. Burnett

34. Grouping Options Before After Books CD’s Posters Wallpapers MP3’s
Who We Are
Visiting Us
Contact Us
After
Shop
Books
CD’s
Posters
Free Downloads
Wallpapers
MP3’s
About Us
Who We Are
Visiting Us
Contact US
7/15/2019
Copyright © Carl M. Burnett

35. Tabbed Navigation
7/15/2019
Copyright © Carl M. Burnett

36. Dropdown Menus
7/15/2019
Copyright © Carl M. Burnett

37. Using Icons
7/15/2019
Copyright © Carl M. Burnett

38. The Role of the Homepage
Clear Statement about Site
Clear Navigation
Prominent Search Box
Standard Navigation Bar
7/15/2019
Copyright © Carl M. Burnett

39. You are Here........ Give Each Page a Title
Change Color of Visited Links
Change Navigation Bar
Use Breadcrumbs
Create a Process Map
7/15/2019
Copyright © Carl M. Burnett

40. Encouraging Exploration
7/15/2019
Copyright © Carl M. Burnett

41. Adding Search
7/15/2019
Copyright © Carl M. Burnett

42. Effective Error Messages
7/15/2019
Copyright © Carl M. Burnett

43. Tips for Effective Links
Be Consistent
Avoid Quirky Names
Keep Link Text Short
Links Make Sense
Do Not Share Links
Link Text Descriptive
Don't tell where to click
Don't Draw Attention
Link At a Glance
Use Plain HTML
Warn if Link is to Doc
Address Link
Never Open a New Page
Only Hover Links
7/15/2019
Copyright © Carl M. Burnett

44. Student Exercise Design Site Navigation for your Site 7/15/2019
Copyright 2017 © Carl M. Burnett

45. Session Review Layout & Design Web Design Tools
Role of Design
Types of Websites
Responsive Web Design
Frameworks
Web Design Tools
Designing Effective Navigation
7/15/2019
Copyright 2017 © Carl M. Burnett