Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Web Design

430 Aufrufe

Veröffentlicht am

Web Design and Development

Veröffentlicht in: Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

Web Design

  1. 1. VDIS10026 Managing Design and eBusiness SANGEETA JAIN
  2. 2. Design and the Development Process for websites
  3. 3. Web Design is a multidisciplinary pursuit pertaining to the planning and design of websites, including, but not limited to content management, information architecture, technical development, visual design and networked delivery.
  4. 4. Web Design is…  User-Centered Design  User-Experience Design  User-Focused Design
  5. 5. paper vs. browser
  6. 6. size vs. browser resolution
  7. 7. Designer have no control over the users’ screen resolution
  8. 8. browser viewport
  9. 9. DPI VS. PPI http://www.vsellis.com/understanding-dpi-resolution-and- print-vs-web-images/ 300 DPI 72 PPI
  10. 10. Colors on the web - RGB RED, GREEN AND BLUE
  11. 11. FILE FORMATS on the web
  12. 12. GIF •Graphics Interchange Format •GIF allows transparent backgrounds •GIF format supports animation •GIF format is non-lossy JPG •Joint Photographic Experts Group •JPEG is a lossy format •JPEG doesn’t support transparency or animation PNG •Portable Network Graphics •PNG is a non-lossy format •PNG supports transparency •PNG doesn’t support animation on all browsers
  13. 13. ELEMENTS of web design
  14. 14. Elements of web design  Text  Images (Graphics)  Animation  Sound  Video  Interactivity
  15. 15. DESIGN STEP 1.
  16. 16. Content Management  Web content is the textual, visual or audio, video, animated content that is used to build the user experience on websites.  First gather all the content required for the website.  Categorise the content according to its hierarchy  This will decide the navigation systems of the website  Label each set of content  This will help decide the labels for the links on the navigation  Determine the features and functions that will go on the website  This includes features like search, language options, FAQ, help etc.
  17. 17. User Analysis  User Analysis or User Task Analysis is the process of learning about users by observing them in action to understand in detail how they perform their tasks on the website and achieve their intended goals.  In addition to the user demographics such as age, gender, income group, education, location etc. the user analysis also gathers information about the purchasing characteristics of the user.  This typically helps to further refine the content of the website and shopping process to facilitate easy access to information and to design and develop a quick check-out system.  At the end of the content management and user analysis, the designer should be able to comprehend the hierarchy of information and its structure on the website.
  18. 18. Information Architecture  Based on the decisions made in the previous step build a sitemap for the website. A sitemap is a list of pages of a website typically organized in hierarchical fashion.  http://www.iainstitute.org/  http://boxesandarrows.com/
  19. 19. DESIGN STEP 2.
  20. 20. Wireframes  Wireframes provide a detailed view of the content that will appear on each page. Although they do not show any actual design elements, the wireframes provide a guide for the layout of the webpages.  https://www.usability.gov/how-to-and- tools/methods/wireframing.html
  21. 21. DESIGN STEP 3.
  22. 22. Visual Design  Once the blueprint for the site has been defined through the creation of the sitemap and wireframes, the next step is to create a visual style.  The overall visual style will most likely be determined by the visual identity and branding of the business.  The goal is to be consistent and to connect the digital media with all other forms of the business’s communications.  The company’s brand plays an important role in this part of the process, as designers will want to visually convey key brand perceptual ideas within the design.
  23. 23. GUIDELINES for overall design  Make it simple  Easy to understand  Easy to use (intuitive)  Build in consistency  Follow the Principles of Design  Follow the Color Theory
  24. 24. GUIDELINES for text  Text should fit in with the purpose, organization and style of the website.  Text should help to guide the viewers’ focus to the important content on the page.  Avoid using too many font faces or variations.  Provide textual equivalent alternatives for graphic content.
  25. 25. GUIDELINES for graphics  Graphics should fit in with the purpose, and style of the ebusiness.  Graphics should help to guide the viewers’ focus to the important content on the page.  Avoid repetitive use of overly bright or potentially distracting images.  Avoid the use of graphics to convey textual content information.
  26. 26. DESIGN STEP 4.
  27. 27. Development  With designs approved, it’s time to start to build out the HTML and CSS of the site. This is what is called as “back-end” development and is typically carried out by the developers in coordination with the designers.  Before the site is launched, it will be placed on a production server for testing. Testing of the site is critical as it will show any issues that need to be addressed before the site goes live.  The site will need to be reviewed on multiple browsers and multiple devices.  Once the site is tested and free of errors it is launched for the world to see!