5 5 ESSENTIAL WEB DESIGN ELEMENTS A Writers Guide to Website Design.

Slides:



Advertisements
Similar presentations
Web 2.0 Programming 1 © Tongji University, Computer Science and Technology. Web Web Programming Technology 2012.
Advertisements

Mistakes in Web Design. Top 10 Mistakes in Web Design 10. Long download times 9. Outdated info 8. Link colors & consistency 7. Lack of navigation support.
3.01D Design Multimedia Presentations
Typography Typography exists to honor content. — Robert Bringhurst,
Better blogging 10 steps to… Andrea Ressell – Centre for Educational Technology, University of Cape Town, South Africa.
Web Development & Design Foundations with XHTML
Matt Bailey SiteLogic Advanced Website Marketing.
Learning the Basics – Lesson 1
Communicative Writing Week 8 MMC120 Instructed by Hillarie Zimmermann MMC120 Instructed by Hillarie Zimmermann.
Communicative Writing Week 8 MMC120 Instructed by Hillarie Zimmermann MMC120 Instructed by Hillarie Zimmermann.
Chapter 13 Web Page Design Studio
Writing for the web training Date 09/06/14 Abigail Parris/ Web Content Editor.
Basics (and musts) of web design: integration of plain language, usability, and information architecture Lisbon | October 13, 2010.
D4912 – Website Rebranding, Day 1 Impact clarification June 2006 V4.0.
Be Brilliant with Student Loans Material Makeover: basics of effective design MASFAA Wednesday, November 19, 2003.
Writing for the Web. User Behavior Only 16% of people read web content word for word.
Principles of Web Design for Online Educators Rodger Hergert Illinois Online Network May 18, 2005.
Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.
Web Design Plundered from Lynch and Horton. © 2004the University of Greenwich 2 10 x don't use Frames Leading edge technology Scrolling text, marquees,
Connie Padilla - New Mexico State University Writing for the Web Increase usability of your site by writing and formatting for the web.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Planning and Designing a Website Session 8. Designing a Website Like all technical artefacts a website needs to be carefully planned and designed to be.
]. Website Must-Haves Know your audience Good design Clear navigation Clear messaging Web friendly content Good marketing strategy.
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
University of South Alabama Library Website Design and Accessibility Evaluation.
Expression Web 2 Concepts and Techniques Expression Web Design Feature Web Design Basics.
V How to write for the web Russell Warfield, Sustainability Communications Coordinator Friday 29 November.
Chapter 12: The Internet The ultimate direct. Internet Facts U.S. firms spend $14.7 billion on Internet advertising in 2005 By 2010, they are expected.
Define html document byusing Example : Title of the document The content of the document......
Information Resource Design ”How to make a web page scannable” Check out this webpage: Read the summary,
Testing and Debugging Web pages. Final exam Wednesday, May 10: 10am – noon Content: guidelines will be distributed next lecture Format: Matching, multiple.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
The quick guide to Ambu’s design
The Internet Writer’s Handbook 2/e Web Page Design Writing for the Web.
Writing for the Web Research on how users read on the Web and how authors should write their Web pages.
An Introduction To Websites With a little of help from “WebPages That Suck.
Web Development. Presentation Design Visualizing your web site or Visual Design.
Creating a Usable Web Site Royce Shin - Web Development University of Minnesota.
Web site development: Basics & MS FrontPage. What I hope to demonstrate n n Basics of a good web site n n How to most effectively communicate via the.
Web software. Two types of web software Browser software – used to search for and view websites. Web development software – used to create webpages/websites.
Interface Design.
“The Top Ten Guidelines for Homepage Usability” Written by: Jakob Nielsen Presented by: Jeff Wenck Source:

Web Page Concept and Design :
Writing for the Web: 10 Tips Goodbye paper, hello screen. Karen Lindell
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Computer-based Media Language Elements Understanding how we communicate through media Stewart.C. (2007). Media: New Ways and Means. John Wiley & Sons:
Microsoft Expression Web 3 Expression Web Design Feature Web Design Basics.
Online Journalism – Multimedia Package Writing Professor Neil Foote, University of North Texas.
YOUTH & FAMILIES AGRICULTUREHEALTHECONOMYENVIRONMENTENERGY COMMUNITIES Design with User in Mind.
WHY DO YOU NEED IT? What is a wireframe?. A wireframe is… A wireframe is a simple visual guide to show you what a Web page would look like. Wireframes.
Online Copywriting eMarketing: The Essential Guide to Online Marketing
1 CSE 403 Web Patterns and Design These lecture slides are copyright (C) Marty Stepp, 2007, with significant content taken from slides written by Valentin.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
“Top Ten Guidelines for Homepage Usability” Article Author: Jakob Nielsen Presenter: Amish Patel Date of Presentation Sept. 16, 2008.
MIT 511- Web Design & Usability
15 Basic Web Designing Tips
Introducing the World Wide Web
Web software.
Objective % Explain concepts used to create websites.
Web Programming– UFCFB Lecture-4
PowerPoint Template Navy Cover with Icons.
PowerPoint Template Navy Cover with Icons.
WRITING FOR THE WEB ® Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Five Sections Usage idea: Change colors and font to fit the style you want for your presentation. Section Three Section One Section Five Section Four.
Writing for Communication on the Web
Common Page Design Elements
Presentation transcript:

5 5 ESSENTIAL WEB DESIGN ELEMENTS A Writers Guide to Website Design

Element 1: Brand Yourself What is a brand? A brand is more than a logo You create a brand with: Icons, logos, informational graphics, colors and typography Specific, parsed components of content for web consumption A consistent look-and-feel for all pages of your website 2 ©

Brand Examples Well-known Brands:Author Website: 3 ©

Element 2: Intuitive Navigation Navigation is how a person navigates, or moves, from one part of your site to the next. Navigation should: Be clear and easy to follow Always link to the main sections of your site Be consistent and present on all pages 4 ©

Navigation Examples Good: Bad: Shown right, 3D navigation is almost always bad. It's harder to manipulate, it doesn't show the choices as well as a 2D interface, and it tends to be slower to use. *Image from archived specialized.com) Shown below, tab metaphors are a good example of intuitive navigation: 5 ©

Element 3: Write for the Web Most of your online audience will scan content rather than reading it. 6 ©

Write for the Web by Using: Highlighted keywords using: Hypertext links Typeface variations (i.e. size, bold, italics–not ten different fonts!) Color Bulleted lists One idea per paragraph You must hook users with the first few words in the paragraph. Less text than conventional writing Use half the word-count to convey your message 7 ©

Element 4: Search Function Every good website has a search feature to allow users to search the site Users want to feel empowered to find what they are looking for in the quickest way possible 8 ©

Element 5: Engaging Content Write to Be Read Write Powerful Headlines Use Lists Employ Effective Images and Captions Use Hyperlinks to Supply Supplemental Information 9 ©

5 Essential Web Design Elements Consistent Brand Intuitive Navigation Write for the Web Search Function Engaging Content 10 ©

Jupiter Images, Unlimited. Stock photos, royalty free images and stock photography. All document images. Retrieved October 31, 2008, from Lynch, Patrick J. & Horton, Sarah. (2001). Web style guide: Basic design principles for creating web sites. New Haven and London: Yale University Press. Nielsen, Jakob. (2008). Four bad web designs: Jakob Nielsens alertbox. Retrieved October 30, 2008, from Sitepoint. (2008) Retrieved October 30, 2008, from Sun Microsystems (2008). Writing for the web: Writing to be read. Retrieved October 30, 2008, from References: 11 ©