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. storyboard your Web site 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 object s. 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 Resolutions 1.Decide on the lowest Screen Resolution 2.Design Your Web Site On This Resolution percentages 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 StaticDynamic 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 on the flyContent 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

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 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. like thisThis is particularly useful for tutorials like this. 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

You don't want to put a direct link to everything on your website on any single page. logical order.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 sitemapUse 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. Google, Yahoo! and Bing 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. SEO 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. Site-Map 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.Reviews c.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.