Website DesignLesson 3: Interactive websites, Environment and Design Tools

Dr. Husam Osta2014

- 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. ▫ This includes text as well as images – any multimedia objects.

2. Sort the information into topics. ▫ Topics should start at the broadest and work toward the narrowest.

3. For each page of the Web site, determine page title, headings, sub headings and content.

4. Plan the structure of the information and how the pages will link. ▫ This needs to be logical.

5. Layout the menu structure.6. Layout your template page.

▫ This should be the interior page of the Web site.

7. 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 Resolutions1. Decide on the lowest Screen Resolution2. Design Your Web Site On This Resolution3. While converting your design to HTML make sure all your

tables are measured in terms of percentages4. Within the table measure cells in terms of pixels except for the

cell for the content5. Insert images and content6. Test your site in all the resolutions

Static Vs Dynamic Websites

Static Dynamic

• 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

• 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 Layout2. Web page elements

Paragraph, heading, tables, text box, hyperlinks, images, clickable images

3. Navigation 4. CSS – cascade style sheets

Website Structure

•Correct & appropriate•Reliability of information source•Structure of presenting your information

▫Bullets / lists▫Tables▫Text style

Website Content

•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

• 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 - Linear

• 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 - Hierarchy

• 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

• 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; 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.

3. To help your search engine optimization (SEO). A common technique to enhance your SEO is to place links within

your site-using keywords - that point to other pages within your site.

Navigation Diagram – Site-Map

•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.

Navigation - Sitemap

I. Articles a. Commentary b. Reviewsc. Videos

II. Contributors a. Contributor 1 b. Contributor 2 c. Contributor 3

III. Contests IV. Community

a. Forum b. Arcade

i. Arcade Game 1 ii. Arcade Game 2 iii. Arcade Game 3

Site-Map example

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, pick-ups]. 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.