Transcript Website Design

Website Design
Lesson 3: Interactive websites,
Environment and Design Tools
Dr. Husam Osta
2013
- 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 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