1 / 34

Web Design

Web Design. Sus Lundgren. Web: Advantages. Quick and easy publishing Information is easy to change, update, increase, remove No limits when it comes to Number of pages Number of images Colors Hypermedia Cross-referring very easy  Much easier than working with printed matter!.

kuper
Download Presentation

Web 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. Web Design Sus Lundgren

  2. Web: Advantages • Quick and easy publishing • Information is easy to change, update, increase, remove • No limits when it comes to • Number of pages • Number of images • Colors • Hypermedia • Cross-referring very easy Much easier than working with printed matter!

  3. Web: Disadvantages • Hypermedia • Chaotic spaghetti • Can’t control reading order • Links to and from other websites • Credibility • Information decay • Security issues • The pages look different depending on browser, OS and settings • Limits when it comes to • Plug-ins • Bandwidth

  4. A Comparison

  5. A Comparison

  6. A Comparison

  7. Web vs the “Normal” GUI • A web page is static • It cannot by itself react on what the user does; this requires some kind of submit to the server, and response from it • A web page is poor • HTML alone cannot provide things like animations, interactive responses etc • A “normal” client-side application is dynamic • Sometimes these too work against a server, but some data (e.g. data categories) are downloaded during launch; e. g. choices made in one menu may affect another

  8. Web: Challenges • Creating a stable design that works in any combination of browser, OS, window size and bandwidth • SIDER, http://www.cs.chalmers.se/idc/sider06/ • Creating good navigation and consistent look & feel • Attracting and keeping the users • Unique services • Unique information • Unique products or prices

  9. On Posture… • A web site has a posture somewhere in between sovereign and transient • Who are your users and your services? • Returning users? • Sovereign posture • Allow customization, e.g. color settings and sorting of information • Once-in-a-lifetime-users • Transient posture • Information-dense website? • Extreme focus on navigation • Transient info areas, e.g. stock market tickers

  10. Web: Challenges ”I don’t WANNA learn your site! I just wanna DO MY THING!” http://www.useit.com/jakob/photos/

  11. Design Guidelines • The most important question for the web designer: What’s the message, and to whom is it directed? • Thus, the content and the look&feel must be adapted to the target group and, to some extent, the sender • Don’t forget adapting the language! • If there are more then one target group, they should be ranked • A keyword is consequence; • Consequent and clear navigation • Consequent look • Consequent language & wording

  12. Information design • The information structure should • Reflect content and message • Be logical and easy to navigate • Shallow & wide or narrow and deep? • The latter preferred by newbies • Decide which pages should exist  set a structure  set the navigation design • Decide: Should a info unit (”a page”) exist on more than one place? Or be linked? Environmental concernms both under ”Production” and ”Policies”?

  13. Navigation • Shall reflect the information design • Shall be consequent • Shall indicate system state: where am I? This can be done in several ways • Visual changes in the navigation area • Bread crumbs (E.g. Products – Books- Fiction - Thrillers) • Headlines • Color coding or use of icons • Wording is very important!!! • ”Alla märken” vs ”Alla plagg” • Elements can be grouped using closeness, similarity or coloring

  14. Wording

  15. Wording

  16. Web page design • Define how many different templates you need. One? Two? Many? Which one is the most important? • Create the design in any way that suits you • Photoshop or any other drawing program • Directly in HTML • Be sparse with colors, generous with space and stick to one kind of illustrations • Test your templates very carefully; make sure they are stable and that all links work. • If you use tables or layers, make sure to check all browsers – and don’t forget to test with different window sizes, resolutions etc

  17. Text • Texts should be kept short(er than in print) • Users not as patient • Harder to read on screen • Long documents should come in several versions; one page with contents, as PDF...

  18. Miscellaneous • Don’t forget to give pages a Title • State keywords as meta information • Facilitates search • Contact information should be easy to find • Name images – facilitates for blind users • Frames or not? • Maintenance easier • Harder to bookmark • Navigation on top of page or to the left • Repeat navigation as simple text links at the bottom of the page • NO horizontal scrolling – ever • Logo linked to index page

  19. Design Issues • Flexible width? • lundsus@cs • Designmuseum • Designmuseum400 • GG • Font size • As pixels/points • Relative? • Banners, ads; where? • Designmuseum • Designing for variable content

  20. How Can a Web PageBe Made Interactive? • Plug-ins can provide animated instructions or rather responsive programs • Flash, Shockvawe, Java-applets • Code can be embedded in the HTML • JavaScript, JScript, VBScript • These are interpreted (non-compiled) • Code can be server-side, it’s in its own file and is linked to from the page • Perl, Tcl

  21. Complex web systems • E-commerce sites, intranets, extranets, forums • Need for functionalities like • Publishing possibilities • Login functionalities & secrecy • Adding material for downloads • Shopping cart functionalities • Memory within session (e.g. e-commerce; what if the system currently forgot what was in the shopping cart? • Different users have different access

  22. Technical setup • A web system consists of at least… • If a database is involved

  23. Technical setup • If a publishing system is involved… • Or perhaps order handling, user management etc…: software to access the database info is needed • Web design is not just about surface; just like any other GUI it is about interaction, and it takes both design and engineering!

  24. Web Design for Complex Systems • Templates, templates, templates • Normally all pages are dynamic, i.e. a code layer creates each requested page on-the-fly using snippets of HTML code filled with added database content • Navigation is template-run too • No need for frames from a maintenance-point-of-view • Re-usability keyword of the day • Different templates for different pages, but perhaps there are areas that occur on every page (e.g. the part with the logo?)

  25. Web Design for Complex Systems • Templates are often object related • One template per object (e.g. news item, case, calendar item, link item…) • Additional templates, e.g. to present a group of objects (front page for link list, front page for calendar items etc) • Remember: Can only show info that is actually in the database, or can be calculated using this info… • Not all customers understand this: “Oh, and can you show the buyers when their stuff will be delivered, exactly?” “Oh, and can you take down the moon for me?”

  26. Case: Linuxnyheter • Linuxnyheter was a website with news about Linux and Open Source • Linuxnyheter was targeted towards executives and IT-managers • It consisted of five major sections • news, articles, cases, links and events • In addition, there was a search engine, a dictionary, customizing functionalities etc. • Zope interface contained the database and created web pages • Java servlet interface for the publishing system • Linux server

  27. Links • HTML basics • http://www.davesite.com/webstation/html/ • http://www.htmlgoodies.com/primers/basics.html • Dreamweaver • Download a trial version: http://www.macromedia.com/downloads/ • Check out a tutorialhttp://www.macromedia.com/software/dreamweaver/productinfo/tutorials/gettingstarted/

  28. Links • On web design • Web Page Design for Designers http://www.wpdfd.com/index.htm • Vincent Flanders’ ”learning by not doing”: http://www.webpagesthatsuck.com • Usability • Jakob Nielsen: http://www.useit.com/ • Usable Web, link collection: http://usableweb.com/

More Related