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