Week2 lecture-whatiswebdesign-part1
•Download as PPTX, PDF•
0 likes•509 views
This document discusses web design and the process of designing for the web. It defines web design as the visual front end development, including elements like fonts, menus, images and interactivity. It emphasizes the importance of responsive design to display content appropriately across different devices. The key steps in the web design process are outlined, beginning with planning, creating a sitemap and wireframe, designing mockups, developing HTML and CSS, testing, integrating content management systems, and analyzing site usage with analytics.
Report
Share
Week2 lecture-whatiswebdesign-part1
- 1. WEB DESIGN WHAT IS WEB DESIGN?
- 2. WHAT IS WEB DESIGN? • For the purpose of this course we will refer to web design as the visual part of web design. • This is called “Front End Web Development” • Part you can see and interact with • Front end web development includes: • Fonts • Menus • Buttons • Images and rotating sliders • Search boxes • Etc.
- 3. RESPONSIVE DESIGN • We now need to consider designing for all devices: • mobile phones • tablets • printers, • RSS readers • Great way to accomplish this is with responsive design • The same content is presented in different ways depending on the screen size Try it yourself – great responsive site is…
- 4. WHAT DOES WEB DESIGN INCLUDE? • Planning & organizing content • User interface: • Navigation • Content blocks • Images • Logo • Design: • Colours • Fonts • Spacing • Overall “feel” • Interactivity: • Video • Drop down menus • Pop up windows
- 5. DO I NEED TO BE A “PROGRAMMER” TO DESIGN FOR THE WEB? Good news! The answer is no! • Most front end development requires minimal scripting and little to no programming at all so don’t sweat it! • Very few designers can do everything • Many designers specialize in a part of the process DESIGN SENSE 100%
- 6. WEB DESIGN THE DESIGN WORKFLOW
- 7. STEP 1: PLANNING • What is the purpose and goal of the site? • Who the site is intended for (the target audience)? • What content will be included? • What else is the competition doing? • What are the newest trends and technology.
- 8. STEP 2: THE SITEMAP • The site-map is the foundation of the site – serves as the roadmap • How content will be organized • How visitors will navigate and experience the site
- 9. STEP 3: WIREFRAME • Based on the site map • Very basic design that shows how the various pages will be laid out • Includes: navigation areas, images, text and content, search and the logo
- 10. STEP 4: DESIGN MOCKUP The next step is to add visual elements to the rough layout – colours, images and other design elements such as keylines, colour blocks, backgrounds, etc.
- 11. STEP 5: CREATE THE HTML & CSS The next step is to add visual elements to the rough layout – colours, images and other design elements such as keylines, colour blocks, backgrounds, etc.
- 12. STEP 6: TEST, TEST, TEST Include older browsers as well as mobile and table environments if responsive design is a consideration. Think like a user and try all possible features on the site.
- 13. STEP 6: CMS INTEGRATION Using a Content Management System (CMS) allows site editing and maintenance to be distributed among several staff who may not have any HTML background.
- 14. STEP 7: ANALYTICS Including site analytics allows the number of page visits – as well as lots of other information – to be tracked over time. Google Analytics is popular because it’s free, easy to set up and provides a great deal of data.
Editor's Notes
- The sitemap will often change several times over the course of a site design Often user testing will show opportunities to make improvements – eg. changing the name of a section to make it clearer to the user Software exists to make this process easier and look more professional, eg: http://www.gliffy.com/uses/web-site-map-software/
- Need to design all possible pages on the site such as: content pages, section pages, contact pages, etc. The goal is to have the client “sign off” at this stage – this brings everyone together (designer and client), hopefully limiting more costly changes down the road This stage can be sketched or computer generated Software exists to make this process easier – eg. http://www.gliffy.com/uses/web-site-map-software/
- Usually this is done in Illustrator, Photoshop or other professional design software Design is done to scale so that it will accurately demonstrate how the site will look in a browser With move to responsive design, may also show how the site will look on a mobile device/phone and/or a tablet
- There are many ways to generate the behind the scenes code Often it’s a combination of starting with an existing template and adapting it to customize it to the look and feel of the site Or, it could be created from scratch using a WYSIWYG editor such as Dreamweaver
- There are many ways to generate the behind the scenes code Often it’s a combination of starting with an existing template and adapting it to customize it to the look and feel of the site Or, it could be created from scratch using a WYSIWYG editor such as Dreamweaver
- Popular CMSs include open source software such as: Drupal, Wordpress, Joomla Open source means that the software is free and available to anyone Other option is to purchase software from a company. This involves paying upfront for the software and often includes an annual licensing fee.