|
Web Design  This website demonstrates using wikis as teaching and learning tool. The course instructor is happy to share the teaching materials here with those who find it readable. |
Lecture /
Web Design BasicsA Web Design Lecture by Steven Choy Overview: The World Wide Web and the Internet - What is Web design? - Basic design principles - Website Evaluation Criteria - Overview of Standard Web Technologies - Internet domain names - Web Hosting Services - Should I hire a web designer? The World Wide Web and the Internet
As of March 31, 2011, world population = 6,930,055,154; Internet Users = 2,095,006,005; Penetration = 30.2%.
What is Web design?Five different aspects of the work of a Web designer:
Make decisions about all the elements on a webpage, including colours, layout, typography, photographs and graphics
Online portfolios of some web designers that work on graphics and interactive design
Todd Miller - http://www.iamtodd.com/
Dale Harris - http://www.daleharris.com/
Puneet Sakhuja - http://www.puneetsakhuja.com/
(you can find many examples in the web)
How information is presented and organized on the site
Information design is related to human-computer interface design, interaction design and usability testing
Websites are becoming ‘software-like’ nowadays, allowing people to do useful tasks such as filing income taxes, paying bills, and ordering goods and services.
You will need back-end programming skills if your website offers advanced functions such as interactive shopping carts, order processing or payment processing.
You will also need network and system administration skills if your client wants you to host and administer its websites.
Websites serve as an important marketing tool for businesses.
Web designers should therefore possess an understanding of the concepts of selling and promotion so that they can help clients implement customer-focused marketing strategies and reinforce their brand image online.
They will need to run online marketing campaigns using search engines, direct email, banner advertising, and so on, to promote their clients’ websites and attract repeat visitors.
Although Web design is primarily a creative task, it also involves a lot of collaboration and communication with co-workers and clients. Being proactive, communicating effectively and thinking on one’s feet are desirable qualities in a Web designer.
Basic design principlesSome common design principles that govern the field of Web design:
Website Evaluation Criteria
If slow, are the pages too long? Graphics too large?
The homepage is attractive, has strong eye appeal.
Is the purpose of the site, and each page within it, immediately clear?
Is page layout consistent throughout the site?
Is the colour scheme consistent throughout the site?
Are graphics consistent throughout the site?
Is the text clear and easy to read?
You can tell where you are within the site at all times.
Links are labelled clearly and their destination is obvious.
The navigation is located in a consistent location within each page.
Users get to information with a minimal number of clicks (no more than third level pages).
The graphics/sound/video make a significant contribution to the site.
The graphics/sound/video are clearly labelled, clearly identified.
Each graphic/sound/video serves a clear purpose.
Graphics are professional-looking and optimized for the Web.
There is sufficient information to make the site worth visiting.
The content is logically organized. The most important content can be located without scrolling the page.
The content is appropriate for the target audience.
The authors are clearly identified, reliable and provide their contact information.
The site has been recently created/revised.
Overview of Standard Web Technologies
See the details in HTML Tag Library - http://www.jessett.com/web_sites/html/html_tag_library.shtml
Original, HTML is made up of tags that define the structure of documents (e.g. titles, headings, paragraphs, lists) as well as tags that describe the way an element should be displayed in the Web browser (e.g. fonts).
However, mixing up structural tags and presentation tags, the way HTML does, can lead to code that is difficult to understand and maintain.
Style sheets bring an explicit separation between the structure of a document and its presentation.
To modify the presentation, the change can be restricted to the style sheet alone. Style sheets also offer greater control over fonts, colours, indents, margins, and the general look and layout of your webpages.
Main point: Use HTML for content and CSS for the presentation
To feel the power of CSS, visit http://www.csszengarden.com/ - a demonstration of what can be accomplished visually through CSS-based design.
XML is a markup language which allows you to create your own tags, which can then be used to produce self-describing documents. Unlike HTML, which is a language just for creating webpages, XML is a language that lets you create other languages, hence the term ‘extensible’ in its name. By designing your own customized markup language, you are free to create and attach your own markup tags to the data in your own documents.
XHTML is still the HTML that you know but written according to the rules of XML, which is much stricter.
As a result, XHTML produces valid, well-formed webpages which can be viewed consistently regardless of the browser and hardware platform used.
JavaScript is a programming language that is used to write the code that makes the website more interactive.
The code can be embedded right inside an HTML page or it can be found in an external file (with a ‘.js’: extension) that the webpage links to.
It is the responsibility of the browser to interpret and execute the JavaScript code that is included on the webpage.
Internet domain names
Web Hosting Services
(Find other sites hosted on a web server by entering a domain or IP address above.)
Should I hire a web designer?Creating a website involve
Thanks for ReadingIf you would rather like to have this lecture note in printed format, please click the print action link in the top right corner. If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk. |
