Download Website Design

Website Design
Lesson 3: Interactive websites,
Environment and Design Tools
Dr. Husam Osta
2014
- Concept Design
- Static Website Vs Dynamic Website
- Cascade Style Sheet (CSS) Intro
Concept Designs
• Story Board
• Mood Board
•
•
•
•
Layout Technique
Templates
Color Schemes
Screen Designs
How to Storyboard Your Web Site
• Creating a Web site is not hard to do
▫ but making it easy to navigate and informative can be
challenging.
• An easy way to make sure it all flows and is simple to
navigate is to storyboard your Web site.
• Storyboarding is an easy way to see what information goes
on which page and how that page will flow with the other
pages on the site.
• It will allow you to see how the site navigation needs to be
set up and avoid having to redo the menus or content on
multiple pages.
Steps to Storyboard Your Web Site
1.
Collect the information that you want to include on the Web site.
▫
2.
This includes text as well as images – any multimedia objects.
Sort the information into topics.
▫
3.
Topics should start at the broadest and work toward the narrowest.
For each page of the Web site, determine page title, headings, sub
headings and content.
Plan the structure of the information and how the pages will link.
4.
▫
5.
6.
This needs to be logical.
Layout the menu structure.
Layout your template page.
▫
7.
This should be the interior page of the Web site.
Test the layout.
▫
▫
Imagine that you are a visitor to the Web site. You can enter on any page.
Does it work? If not, start again.
Website Storyboard Examples
Mood Board – Example 1
Mood Board – Example 2
Mood Board – Example 3
Block-level & In-line Elements
• Block-level elements act as "containers" for other elements.
▫ In other words, you put other elements inside block elements
• A block-level element can contain other block-level
elements, as well as inline elements.
• An inline element can only contain other inline elements.
• It's perfectly okay to nest one inline element inside another
▫ However, inline elements can never contain block-level
elements.
Websites Templates
• A web site template is a pre-designed web page or
simply a web page without or with basic contents.
▫
▫
▫
▫
Faster
Reusable
Flexible
Inspiration
Screen Design
• Designing Websites For All Screen Resolutions
1. Decide on the lowest Screen Resolution
2. Design Your Web Site On This Resolution
3. While converting your design to HTML make sure all your
tables are measured in terms of percentages
4. Within the table measure cells in terms of pixels except for the
cell for the content
5. Insert images and content
6. Test your site in all the resolutions
Static Vs Dynamic Websites
Static
• A static website is stored on a
server using HTTP server
software
• Client sends HTTP Request with
a URL
• Server locates and send
requested file as an HTTP
Respond
Dynamic
• Application server is installed on
same server as HTTP server
software
• Client sends HTTP Request with
a URL
• HTTP server dispatches request
to application server
• Application server dynamically
construct HTTP response
Static Vs Dynamic Websites
Static
Dynamic
Static Website – features
• Content stored in an html page
▫ content does not update unless the file is updated
• Any changes to a static web page need to be made manually,
and then saved again.
• Static websites can only really be updated by someone with a
knowledge of website development.
• Static websites are the cheapest to develop and host
Static Website
• Advantages
 Quick to develop
 Cheap to develop
 Cheap to host
• Disadvantages
 Requires web development expertise to update site
 Site not interactive (as useful) for the user
 Content can get dull
Dynamic Website – features
• Content is generated “on the fly”
▫ content is gathered and delivered based on the user’s
request;
▫ usually content here is stored in a database
• Dynamic sites can be more expensive to develop initially.
• At a basic level, a dynamic website can give the website owner
the ability to simply update and add new content to the site.
▫ For example, news and events could be posted to the site
through a simple browser interface.
Dynamic Website
• Examples of dynamic website features:
▫
▫
▫
▫
▫
Content management system,
e-Commerce system,
Bulletin / discussion boards,
Ability for clients or users to upload documents,
Ability for administrators or users to create content
or add information to a site (dynamic publishing).
Dynamic Website
• Advantages
 Much more functional website
 Much easier to update
 New content brings people back to the site and helps in the
search engines
 Can work as a system to allow staff or users to collaborate
• Disadvantages
 Slower / more expensive to develop
 Hosting costs a little more
Website Structure
• Depends on:
1. Web page Layout
2. Web page elements

Paragraph, heading, tables, text box, hyperlinks,
images, clickable images
3. Navigation
4. CSS – cascade style sheets
Website Content
• Correct & appropriate
• Reliability of information source
• Structure of presenting your information
▫ Bullets / lists
▫ Tables
▫ Text style
Navigation Diagram
• Linear navigation
▫ Navigating through your website in a straight line
• Hierarchy / Matrix navigation / non-linear
▫ Providing access to every page on your website
Navigation Diagram - Linear
• What is linear navigation in website design?
▫ Linear navigation is used for a website when you want
the visitor to go from one step to another in a
particular order.
• The idea here is that the visitor follows the pages in a
predefined order or sequence determined by the
designer.
• This is particularly useful for tutorials like this.
Navigation Diagram - Linear
Navigation Diagram - Hierarchy
• Hierarchical navigation ties your website together
• The Hierarchical navigation model goes from the general to
the specific;
▫ homepage -> main sections -> subsections -> databases.
• It is a way to tie together many areas of information into a
working website structure.
• A visitor could easily go from the homepage to other areas
of the website and back again.
Navigation Diagram - Hierarchy
Navigation Diagram
• You don't want to put a direct link to everything on your website on
any single page.
• Your website links should progress through logical order.
• Too many links to choose from and your visitors often won't know
what to click on
• Use sitemap for a secondary navigation source
Navigation Diagram – Site-Map
• There are three reasons why adding a sitemap to your web site.
1.
To provide another effective means for your visitors to find content.
2.
You can submit your sitemap to Google, Yahoo! and Bing;


3.
This makes it easier for the search engines to index your site.
It will not necessarily increase your Page Rank, but you can know that your
pages are effectively being indexed.
To help your search engine optimization (SEO).

A common technique to enhance your SEO is to place links within your siteusing keywords - that point to other pages within your site.
Navigation - Sitemap
• Sitemap:
▫ Provide a good starting point for visitors to find
content in case they happen to become lost or
confused.
▫ It is one more step you can take to increase your SEO
by creating links within your site.
Site-Map example
I.
Articles
a.
b.
c.
II.
Commentary
Reviews
Videos
Contributors
a.
b.
c.
Contributor 1
Contributor 2
Contributor 3
III. Contests
IV. Community
a.
b.
Forum
Arcade
i. Arcade Game 1
ii. Arcade Game 2
iii. Arcade Game 3
Thank You
Story board ex 1
• A website is under construction, during the development phase the
developer need the hierarchy of the website in all. Therefore, you as
a designer are asked to create a storyboard of that website that
represents an e-Learning System.
The website should give the visitor the ability to register new users
to be able to access all services in this e-learning system. The user
can attend virtual classes for management subjects & informatics
subjects. Through these classes the user can access downloadable
materials needed based on the subject. The user can also access
library resources through the homepage based on major; which also
can be accessible through classes as well. Moreover, the user can
access their own profile to add/modify their own contact details and
to check their own marks for subjects taken. The contact details
should be also available for visitors for any enquiry needed about
the institute.
Story board ex 2
• A website is under construction, during the development phase the
developer need the hierarchy of the website in all. Therefore, you as
a designer are asked to create a storyboard of that website that
represents an online Car Rental.
The website should give the visitor an access to a page where all cars
available in the car rental shop, however they should be divided into
3 sub-sections [class A, class B, class C]. After that page is processed
the visitor will be redirected to another page if a reservation for a
driver is needed. By the end of this process, the visitor will be
directed to payment method where it could be done in two options
(pay online OR pay on car pickup). The online car rental shop also
provides another section where visitors can rent big cars for other
usage, that section will be divided into 2 sub-sections [Vans, pickups]. The shop should provide information for visitors with
branches available as well as contact details. Another page should
also be about the history of the shop and their regular clients from
big companies.