SlideShare une entreprise Scribd logo
1  sur  26
Web design
             or
rules for interface design



               Media Develop EU
1. WEB PAGE DESIGN




Web page design is what attracts visitors at
                first sight.


 But content is what makes them stay on
                   page.
Art vs. Technology

       Methods for creating interfaces:
• Artistic;
• Technical.


Can we break the rules ?


Which side shall we choose ?
Common mistakes

• Business model – web is not a brochure;
• IT architecture – web site structure and
  company structure;
• Web page design – need for preliminary
  tests;
• Structuring content – writing in a linear style.
Web page design

       Useful pixels
Rules 1 and 2



• If the design looks better without a certain
  element of it, remove the excess item !


• Control every pixel – GUI design (Graphical
  User Interface) !
Rule 3



  Using basic
fonts is a must !
Rule 4




The interface must be independent of the
               resolution !
Rule 5




       Quick links, quick downloads !



• Page size – what is it ?


• Conservative use of graphics does not
necessarily mean boring pages !
Rule 5
Rule 6

        Describe clearly and concisely the
                    hyperlinks !



• Titles of hyperlinks should not exceed 60
characters;
• Do not repeat the anchor and the main
text;
• Hyperlink and background colors should
differ.
Rule 7

        Use the same set of styles for all of
                   the pages !



• Do not use more than two fonts;
• Do not use absolute font sizes.
Rule 8

        Frames and tables – simply NOT !


• Some browser versions cannot display
frames correctly;
• Search engines have trouble with frames
and tables;
• In some browsers it’s difficult to bookmark
frames.
Rule 8

  Frames and tables – simply NOT !
Rule 9

        Post only trustworthy information !



• Sophisticated graphic design – first step to
confidence;
• If you use information from users – give
details on how and why you are using it.
Rule 10

      Printing your web page information –
                     why not ?




• Make two versions for all your long web
documents;
• Capabilities of the PDF format.
Conclusions

• From where are users coming ?
• Interface, independent of the resolution;
• Clear and concise hyperlink description;
• Set of styles;
• No frames;
• Quick links, quick downloads;
• Unconventional interface – where lies the
key?
2. CONTENT DESIGN




  The purpose of design is to allow users
           see the content.


“Nobody goes to the theater because of
the beautiful costumes” - Jacob Nielsen
Rule 11

          Write concisely !
Rule 12

   Check the text for correction !
Rules 13 and 14




• Use meaningful, not quotable titles !


• Use ordered and unordered lists or similar
  design elements to break the flow of
  monotonous text blocks !
Rule 15

      Enable brief review of the content !


The state of Nebraska is filled with many
internationally renowned attractions, all of which
attract a great number of people every year. The
most visited places in 1996 were Fort Robinson
(355,000 visitors), the national monument Scotts Bluff
(132,166), U.S. History Museum Arbor Lodge (100,000
visitors), Pioneer Settlers Museum Stuhr (60,000 visitors)
and U.S. Historical Park Buffalo Bill Ranch (28,446).
Rule 16

          Simple language !
Rule 17

          Readability !
Conclusions

• Write concisely;
• Check the text for correction;
• Possibility for brief reviews;
• Break the page;
• Page titles;
• Online help;
• Multimedia;
• Capability for response.
Thank you for your attention!




                    Media Develop EU

Contenu connexe

Tendances

Content focused web design
Content focused web designContent focused web design
Content focused web design
Eddie Monge
 

Tendances (8)

Front end-design and best practices
Front end-design and best practicesFront end-design and best practices
Front end-design and best practices
 
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
 
Drupal Design Tips
Drupal Design TipsDrupal Design Tips
Drupal Design Tips
 
Best Practices for Business Blogging
Best Practices for Business BloggingBest Practices for Business Blogging
Best Practices for Business Blogging
 
Kaspar Loog - Testers tired eyes
Kaspar Loog - Testers tired eyesKaspar Loog - Testers tired eyes
Kaspar Loog - Testers tired eyes
 
Content focused web design
Content focused web designContent focused web design
Content focused web design
 
Being Mobile: Mobile Web Development with WordPress
Being Mobile: Mobile Web Development with WordPressBeing Mobile: Mobile Web Development with WordPress
Being Mobile: Mobile Web Development with WordPress
 
dahava
dahavadahava
dahava
 

En vedette

Vb.net session 01
Vb.net session 01Vb.net session 01
Vb.net session 01
Niit Care
 

En vedette (17)

Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
Mastering the Details in Interface Design - Web Design World 2009 - SeattleMastering the Details in Interface Design - Web Design World 2009 - Seattle
Mastering the Details in Interface Design - Web Design World 2009 - Seattle
 
Major Section B-B
Major Section B-BMajor Section B-B
Major Section B-B
 
Untitled8
Untitled8Untitled8
Untitled8
 
Návrh projektu pre_inkubátorHUB_mikroriasy a produkcia biomasy
Návrh projektu pre_inkubátorHUB_mikroriasy a produkcia biomasyNávrh projektu pre_inkubátorHUB_mikroriasy a produkcia biomasy
Návrh projektu pre_inkubátorHUB_mikroriasy a produkcia biomasy
 
Ijasah S1
Ijasah S1Ijasah S1
Ijasah S1
 
Resume
Resume Resume
Resume
 
WOMEN’S FASHION WITH STYLISH WALK DOWN MEMORY LAN
WOMEN’S FASHION WITH STYLISH WALK DOWN MEMORY LANWOMEN’S FASHION WITH STYLISH WALK DOWN MEMORY LAN
WOMEN’S FASHION WITH STYLISH WALK DOWN MEMORY LAN
 
Portfolio
PortfolioPortfolio
Portfolio
 
Resume-Lulu
Resume-LuluResume-Lulu
Resume-Lulu
 
American postal code list.....German lebedev
American postal code list.....German lebedevAmerican postal code list.....German lebedev
American postal code list.....German lebedev
 
iDDNA® DNA-BASED ANTI-AGING PROGRAMS
iDDNA® DNA-BASED ANTI-AGING PROGRAMSiDDNA® DNA-BASED ANTI-AGING PROGRAMS
iDDNA® DNA-BASED ANTI-AGING PROGRAMS
 
Karnataka PUC Question Papers
Karnataka PUC Question PapersKarnataka PUC Question Papers
Karnataka PUC Question Papers
 
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
 
Vb.net session 01
Vb.net session 01Vb.net session 01
Vb.net session 01
 
B-GhostShipCruiseLines
B-GhostShipCruiseLinesB-GhostShipCruiseLines
B-GhostShipCruiseLines
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 

Similaire à Web design or rules for interface design

PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
butest
 
4087 chapter 08 8ed part2
4087 chapter 08 8ed part24087 chapter 08 8ed part2
4087 chapter 08 8ed part2
winegron
 
Website design principles
Website design principlesWebsite design principles
Website design principles
Dhairya Joshi
 

Similaire à Web design or rules for interface design (20)

Basic Web Design Principles and Elements
Basic Web Design Principles and ElementsBasic Web Design Principles and Elements
Basic Web Design Principles and Elements
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
Ch1
Ch1Ch1
Ch1
 
Web Design For The Nondesigner
Web Design For The NondesignerWeb Design For The Nondesigner
Web Design For The Nondesigner
 
Web Development
Web DevelopmentWeb Development
Web Development
 
The Do's and Don'ts of Effective Websites
The Do's and Don'ts of Effective WebsitesThe Do's and Don'ts of Effective Websites
The Do's and Don'ts of Effective Websites
 
4087 chapter 08 8ed part2
4087 chapter 08 8ed part24087 chapter 08 8ed part2
4087 chapter 08 8ed part2
 
Webdesign
WebdesignWebdesign
Webdesign
 
Future Scope of Website Designing in India
Future Scope of Website Designing in IndiaFuture Scope of Website Designing in India
Future Scope of Website Designing in India
 
Mobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your websiteMobuz Solutions | Things to remember when designing your website
Mobuz Solutions | Things to remember when designing your website
 
Webdesign
WebdesignWebdesign
Webdesign
 
Software and Website Development Company
Software and Website Development CompanySoftware and Website Development Company
Software and Website Development Company
 
Website design principles
Website design principlesWebsite design principles
Website design principles
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
webdesign.ppt
webdesign.pptwebdesign.ppt
webdesign.ppt
 
CCS PPT 10.pptx
CCS PPT 10.pptxCCS PPT 10.pptx
CCS PPT 10.pptx
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 

Web design or rules for interface design

  • 1. Web design or rules for interface design Media Develop EU
  • 2. 1. WEB PAGE DESIGN Web page design is what attracts visitors at first sight. But content is what makes them stay on page.
  • 3. Art vs. Technology Methods for creating interfaces: • Artistic; • Technical. Can we break the rules ? Which side shall we choose ?
  • 4. Common mistakes • Business model – web is not a brochure; • IT architecture – web site structure and company structure; • Web page design – need for preliminary tests; • Structuring content – writing in a linear style.
  • 5. Web page design Useful pixels
  • 6. Rules 1 and 2 • If the design looks better without a certain element of it, remove the excess item ! • Control every pixel – GUI design (Graphical User Interface) !
  • 7. Rule 3 Using basic fonts is a must !
  • 8. Rule 4 The interface must be independent of the resolution !
  • 9. Rule 5 Quick links, quick downloads ! • Page size – what is it ? • Conservative use of graphics does not necessarily mean boring pages !
  • 11. Rule 6 Describe clearly and concisely the hyperlinks ! • Titles of hyperlinks should not exceed 60 characters; • Do not repeat the anchor and the main text; • Hyperlink and background colors should differ.
  • 12. Rule 7 Use the same set of styles for all of the pages ! • Do not use more than two fonts; • Do not use absolute font sizes.
  • 13. Rule 8 Frames and tables – simply NOT ! • Some browser versions cannot display frames correctly; • Search engines have trouble with frames and tables; • In some browsers it’s difficult to bookmark frames.
  • 14. Rule 8 Frames and tables – simply NOT !
  • 15. Rule 9 Post only trustworthy information ! • Sophisticated graphic design – first step to confidence; • If you use information from users – give details on how and why you are using it.
  • 16. Rule 10 Printing your web page information – why not ? • Make two versions for all your long web documents; • Capabilities of the PDF format.
  • 17. Conclusions • From where are users coming ? • Interface, independent of the resolution; • Clear and concise hyperlink description; • Set of styles; • No frames; • Quick links, quick downloads; • Unconventional interface – where lies the key?
  • 18. 2. CONTENT DESIGN The purpose of design is to allow users see the content. “Nobody goes to the theater because of the beautiful costumes” - Jacob Nielsen
  • 19. Rule 11 Write concisely !
  • 20. Rule 12 Check the text for correction !
  • 21. Rules 13 and 14 • Use meaningful, not quotable titles ! • Use ordered and unordered lists or similar design elements to break the flow of monotonous text blocks !
  • 22. Rule 15 Enable brief review of the content ! The state of Nebraska is filled with many internationally renowned attractions, all of which attract a great number of people every year. The most visited places in 1996 were Fort Robinson (355,000 visitors), the national monument Scotts Bluff (132,166), U.S. History Museum Arbor Lodge (100,000 visitors), Pioneer Settlers Museum Stuhr (60,000 visitors) and U.S. Historical Park Buffalo Bill Ranch (28,446).
  • 23. Rule 16 Simple language !
  • 24. Rule 17 Readability !
  • 25. Conclusions • Write concisely; • Check the text for correction; • Possibility for brief reviews; • Break the page; • Page titles; • Online help; • Multimedia; • Capability for response.
  • 26. Thank you for your attention! Media Develop EU