Web Design and Development

1. VDIS10026 Managing
Design and eBusiness
SANGEETA JAIN

2. Design and the
Development
Process for
websites

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. Web Design is…
 User-Centered Design
 User-Experience Design
 User-Focused Design

5. paper vs. browser

6. size vs. browser resolution

7. Designer have
no control over
the users’ screen
resolution

8. browser viewport

9. DPI VS. PPI
http://www.vsellis.com/understanding-dpi-resolution-and-
print-vs-web-images/
300 DPI 72 PPI

10. Colors on the web - RGB
RED, GREEN AND BLUE

11. FILE FORMATS
on the web

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. ELEMENTS
of web design

14. Elements of web design
 Text
 Images (Graphics)
 Animation
 Sound
 Video
 Interactivity

15. DESIGN STEP 1.

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

21. DESIGN STEP 2.

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

24. DESIGN STEP 3.

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

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

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

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

29. DESIGN STEP 4.

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