1 / 32

Website Design

Learn how to efficiently storyboard a website, organize content, design layouts, and implement CSS for dynamic and static websites.

kauffman
Download Presentation

Website Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Website Design Lesson 3: Interactive websites, Environment and Design ToolsDr. HusamOsta 2013

  2. - Concept Design- Static Website Vs Dynamic Website- Cascade Style Sheet (CSS) Intro

  3. Concept Designs • Story Board • Mood Board • Layout Technique • Templates • Color Schemes • Screen Designs

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

  5. Steps to Storyboard Your Web Site • Collect the information that you want to include on the Web site. • This includes text as well as images – any multimedia objects. • Sort the information into topics. • 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. • This needs to be logical. • Layout the menu structure. • Layout your template page. • 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.

  6. Website Storyboard Examples

  7. Mood Board – Example 1

  8. Mood Board – Example 2

  9. Mood Board – Example 3

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

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

  12. Screen Design • Designing Websites For All Screen Resolutions • Decide on the lowest Screen Resolution • Design Your Web Site On This Resolution • While converting your design to HTML make sure all your tables are measured in terms of percentages • Within the table measure cells in terms of pixels except for the cell for the content • Insert images and content • Test your site in all the resolutions

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

  14. Static Vs Dynamic Websites Static Dynamic

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

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

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

  18. 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).

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

  20. Website Structure

  21. Website Structure • Depends on: • Web page Layout • Web page elements • Paragraph, heading, tables, text box, hyperlinks, images, clickable images • Navigation • CSS – cascade style sheets

  22. Website Content • Correct & appropriate • Reliability of information source • Structure of presenting your information • Bullets / lists • Tables • Text style

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

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

  25. Navigation Diagram - Linear

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

  27. Navigation Diagram - Hierarchy

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

  29. Navigation Diagram – Site-Map • There are three reasons why adding a sitemap to your web site. • To provide another effective means for your visitors to find content. • 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. • 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.

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

  31. Site-Map example • Articles • Commentary • Reviews • Videos • Contributors • Contributor 1 • Contributor 2 • Contributor 3 • Contests • Community • Forum • Arcade i. Arcade Game 1 ii. Arcade Game 2 iii. Arcade Game 3

  32. Thank You

More Related