SlideShare una empresa de Scribd logo
VDIS10026 Managing
Design and eBusiness
SANGEETA JAIN
Design and the
Development
Process for
websites
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.
Web Design is…
 User-Centered Design
 User-Experience Design
 User-Focused Design
paper vs. browser
size vs. browser resolution
Designer have
no control over
the users’ screen
resolution
browser viewport
DPI VS. PPI
http://www.vsellis.com/understanding-dpi-resolution-and-
print-vs-web-images/
300 DPI 72 PPI
Colors on the web - RGB
RED, GREEN AND BLUE
FILE FORMATS
on the web
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
ELEMENTS
of web design
Elements of web design
 Text
 Images (Graphics)
 Animation
 Sound
 Video
 Interactivity
DESIGN STEP 1.
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.
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.
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/
DESIGN STEP 2.
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
DESIGN STEP 3.
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.
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
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.
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.
DESIGN STEP 4.
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!

Más contenido relacionado

La actualidad más candente

Intranet design strategies2011 (nx power lite)
Intranet design strategies2011 (nx power lite)Intranet design strategies2011 (nx power lite)
Intranet design strategies2011 (nx power lite)
Sara Durning, MDes
 
What Makes SharePoint UX Good?
What Makes SharePoint UX Good?What Makes SharePoint UX Good?
What Makes SharePoint UX Good?
Thomas Daly
 
Build the ultimate team hub with Microsoft Teams
Build the ultimate team hub with Microsoft TeamsBuild the ultimate team hub with Microsoft Teams
Build the ultimate team hub with Microsoft Teams
Microsoft Tech Community
 
Improve Your Website by Removing These 30 Things
Improve Your Website by Removing These 30 ThingsImprove Your Website by Removing These 30 Things
Improve Your Website by Removing These 30 Things
DNN
 
Web design content
Web design contentWeb design content
Web design content
MrCHenderson
 
ifPeople Online Marketing: How to Write and Distribute Messaging that Sells
ifPeople Online Marketing: How to Write and Distribute Messaging that SellsifPeople Online Marketing: How to Write and Distribute Messaging that Sells
ifPeople Online Marketing: How to Write and Distribute Messaging that Sells
ifPeople
 
Personalizing & Improving Office 365 & Your Digital Workplace
Personalizing & Improving Office 365 & Your Digital WorkplacePersonalizing & Improving Office 365 & Your Digital Workplace
Personalizing & Improving Office 365 & Your Digital Workplace
Richard Harbridge
 
Web engineering notes unit 5
Web engineering notes unit 5Web engineering notes unit 5
Web engineering notes unit 5
inshu1890
 
Notes8
Notes8Notes8
Halmstad Atea Bootcamp 2013
Halmstad Atea Bootcamp 2013Halmstad Atea Bootcamp 2013
Halmstad Atea Bootcamp 2013
Alan Hamilton
 
Web engineering notes unit 2
Web engineering notes unit 2Web engineering notes unit 2
Web engineering notes unit 2
inshu1890
 
Intranets & Digital Hubs with Office 365: What You Need to Know
Intranets & Digital Hubs with Office 365: What You Need to KnowIntranets & Digital Hubs with Office 365: What You Need to Know
Intranets & Digital Hubs with Office 365: What You Need to Know
Richard Harbridge
 
From Social What to Social WOW! How to design social user experiences that ma...
From Social What to Social WOW! How to design social user experiences that ma...From Social What to Social WOW! How to design social user experiences that ma...
From Social What to Social WOW! How to design social user experiences that ma...
LetsConnect
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Steve Williams
 
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To KnowTackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
Richard Harbridge
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
Olivier Tripet
 
Thinking The Unthinkable: Introduction
Thinking The Unthinkable: IntroductionThinking The Unthinkable: Introduction
Thinking The Unthinkable: Introduction
lisbk
 
Breaking down the Microsoft Teams Architecture 200
Breaking down the Microsoft Teams Architecture 200Breaking down the Microsoft Teams Architecture 200
Breaking down the Microsoft Teams Architecture 200
D'arce Hess
 
Plone Kickstart Talk: Top Add-on Products
Plone Kickstart Talk: Top Add-on ProductsPlone Kickstart Talk: Top Add-on Products
Plone Kickstart Talk: Top Add-on Products
ifPeople
 
Web Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV SyllabusWeb Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV Syllabus
NANDINI SHARMA
 

La actualidad más candente (20)

Intranet design strategies2011 (nx power lite)
Intranet design strategies2011 (nx power lite)Intranet design strategies2011 (nx power lite)
Intranet design strategies2011 (nx power lite)
 
What Makes SharePoint UX Good?
What Makes SharePoint UX Good?What Makes SharePoint UX Good?
What Makes SharePoint UX Good?
 
Build the ultimate team hub with Microsoft Teams
Build the ultimate team hub with Microsoft TeamsBuild the ultimate team hub with Microsoft Teams
Build the ultimate team hub with Microsoft Teams
 
Improve Your Website by Removing These 30 Things
Improve Your Website by Removing These 30 ThingsImprove Your Website by Removing These 30 Things
Improve Your Website by Removing These 30 Things
 
Web design content
Web design contentWeb design content
Web design content
 
ifPeople Online Marketing: How to Write and Distribute Messaging that Sells
ifPeople Online Marketing: How to Write and Distribute Messaging that SellsifPeople Online Marketing: How to Write and Distribute Messaging that Sells
ifPeople Online Marketing: How to Write and Distribute Messaging that Sells
 
Personalizing & Improving Office 365 & Your Digital Workplace
Personalizing & Improving Office 365 & Your Digital WorkplacePersonalizing & Improving Office 365 & Your Digital Workplace
Personalizing & Improving Office 365 & Your Digital Workplace
 
Web engineering notes unit 5
Web engineering notes unit 5Web engineering notes unit 5
Web engineering notes unit 5
 
Notes8
Notes8Notes8
Notes8
 
Halmstad Atea Bootcamp 2013
Halmstad Atea Bootcamp 2013Halmstad Atea Bootcamp 2013
Halmstad Atea Bootcamp 2013
 
Web engineering notes unit 2
Web engineering notes unit 2Web engineering notes unit 2
Web engineering notes unit 2
 
Intranets & Digital Hubs with Office 365: What You Need to Know
Intranets & Digital Hubs with Office 365: What You Need to KnowIntranets & Digital Hubs with Office 365: What You Need to Know
Intranets & Digital Hubs with Office 365: What You Need to Know
 
From Social What to Social WOW! How to design social user experiences that ma...
From Social What to Social WOW! How to design social user experiences that ma...From Social What to Social WOW! How to design social user experiences that ma...
From Social What to Social WOW! How to design social user experiences that ma...
 
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft OfficeJensen Harris: Beyond Menus and Toolbars in Microsoft Office
Jensen Harris: Beyond Menus and Toolbars in Microsoft Office
 
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To KnowTackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
Tackling Teams & SharePoint Site Sprawl: Why It Matters & What You Need To Know
 
Information Architecture
Information ArchitectureInformation Architecture
Information Architecture
 
Thinking The Unthinkable: Introduction
Thinking The Unthinkable: IntroductionThinking The Unthinkable: Introduction
Thinking The Unthinkable: Introduction
 
Breaking down the Microsoft Teams Architecture 200
Breaking down the Microsoft Teams Architecture 200Breaking down the Microsoft Teams Architecture 200
Breaking down the Microsoft Teams Architecture 200
 
Plone Kickstart Talk: Top Add-on Products
Plone Kickstart Talk: Top Add-on ProductsPlone Kickstart Talk: Top Add-on Products
Plone Kickstart Talk: Top Add-on Products
 
Web Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV SyllabusWeb Engineering UNIT II Notes as per RGPV Syllabus
Web Engineering UNIT II Notes as per RGPV Syllabus
 

Similar a Web Design

Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Drupal Camp Delhi
 
Lecture4
Lecture4Lecture4
Lecture4
hstryk
 
Best Search Engine Optimization Online Course
Best Search Engine Optimization Online CourseBest Search Engine Optimization Online Course
Best Search Engine Optimization Online Course
Scholar studysolution
 
Understanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdfUnderstanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdf
Promanage IT Solutions
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
Brenna Mickey
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
Tom Pham
 
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
Keyideas Infotech Private Limited
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.doc
butest
 
Graphical user interface of web form
Graphical user interface of web formGraphical user interface of web form
Graphical user interface of web form
mentorrbuddy
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
academicjfurio
 
Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”
Scholar studysolution
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
Keyideas Infotech Private Limited
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
Jasvinder Singh
 
Mkt460 Week3
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
Michael Germano
 
Website development
Website developmentWebsite development
Website development
OGEN Infosystem
 
Website development
Website developmentWebsite development
Website development
OGEN Infosystem
 
proposal4.ppt
proposal4.pptproposal4.ppt
proposal4.ppt
Piseaniket66gmailcom
 
MKT 460 Week 3
MKT 460 Week 3MKT 460 Week 3
MKT 460 Week 3
Michael Germano
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
Cool Sky
 

Similar a Web Design (20)

Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
Graphics Designing (Character, Posters, Advertisements, Brochure, Interface B...
 
Lecture4
Lecture4Lecture4
Lecture4
 
Best Search Engine Optimization Online Course
Best Search Engine Optimization Online CourseBest Search Engine Optimization Online Course
Best Search Engine Optimization Online Course
 
Understanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdfUnderstanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdf
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 
User Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing PortalsUser Centered Design and SharePoint Publishing Portals
User Centered Design and SharePoint Publishing Portals
 
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
10 Ideas To Make Your Website Look Nicer | Keyideas Infotech
 
T2L3.doc
T2L3.docT2L3.doc
T2L3.doc
 
Graphical user interface of web form
Graphical user interface of web formGraphical user interface of web form
Graphical user interface of web form
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
 
Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”
 
10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech10 Hottest Web-Design Trends | Keyideas Infotech
10 Hottest Web-Design Trends | Keyideas Infotech
 
RWD - Bootstrap
RWD - BootstrapRWD - Bootstrap
RWD - Bootstrap
 
Mkt460 Week3
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
 
Website development
Website developmentWebsite development
Website development
 
Website development
Website developmentWebsite development
Website development
 
proposal4.ppt
proposal4.pptproposal4.ppt
proposal4.ppt
 
MKT 460 Week 3
MKT 460 Week 3MKT 460 Week 3
MKT 460 Week 3
 
Web design and development trends
Web design and development  trendsWeb design and development  trends
Web design and development trends
 

Más de Virtu Institute

Lecture 5 - Writing a project report
Lecture 5 - Writing a project reportLecture 5 - Writing a project report
Lecture 5 - Writing a project report
Virtu Institute
 
Lecture 5 - Packaging Materials and Labelling
Lecture 5 - Packaging Materials and LabellingLecture 5 - Packaging Materials and Labelling
Lecture 5 - Packaging Materials and Labelling
Virtu Institute
 
Lecture 4 - Sustainable Packaging Design
Lecture 4 - Sustainable Packaging DesignLecture 4 - Sustainable Packaging Design
Lecture 4 - Sustainable Packaging Design
Virtu Institute
 
Legislation, Codes of Practice and Standards in Graphic Design
Legislation, Codesof Practice and Standards in Graphic DesignLegislation, Codesof Practice and Standards in Graphic Design
Legislation, Codes of Practice and Standards in Graphic Design
Virtu Institute
 
Digital strategy for ebusiness
Digital strategy for ebusinessDigital strategy for ebusiness
Digital strategy for ebusiness
Virtu Institute
 
Managing Design and eBusiness - Lecture 2
Managing Design and eBusiness - Lecture 2Managing Design and eBusiness - Lecture 2
Managing Design and eBusiness - Lecture 2
Virtu Institute
 
Managing Design and eBusiness - Lecture 1
Managing Design and eBusiness - Lecture 1Managing Design and eBusiness - Lecture 1
Managing Design and eBusiness - Lecture 1
Virtu Institute
 
Design and the Environment - Sustainable Design
Design and the Environment - Sustainable DesignDesign and the Environment - Sustainable Design
Design and the Environment - Sustainable Design
Virtu Institute
 
Design and the Environment - Cradle to Grave
Design and the Environment - Cradle to GraveDesign and the Environment - Cradle to Grave
Design and the Environment - Cradle to Grave
Virtu Institute
 
Digital Print
Digital PrintDigital Print
Digital Print
Virtu Institute
 
OHS and Copyright
OHS and CopyrightOHS and Copyright
OHS and Copyright
Virtu Institute
 
Photomedia in Creative Practice (MANIPULATE IMAGES)
Photomedia in Creative Practice (MANIPULATE IMAGES)Photomedia in Creative Practice (MANIPULATE IMAGES)
Photomedia in Creative Practice (MANIPULATE IMAGES)
Virtu Institute
 
Photomedia in Creative Practice (CREATE IMAGES)
Photomedia in Creative Practice (CREATE IMAGES)Photomedia in Creative Practice (CREATE IMAGES)
Photomedia in Creative Practice (CREATE IMAGES)
Virtu Institute
 
Lecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication TheoriesLecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication Theories
Virtu Institute
 
Lecture 2 - Film VS. Digital Photography
Lecture 2 - Film VS. Digital PhotographyLecture 2 - Film VS. Digital Photography
Lecture 2 - Film VS. Digital Photography
Virtu Institute
 
Introduction to Digital Design
Introduction to Digital DesignIntroduction to Digital Design
Introduction to Digital Design
Virtu Institute
 
A little about Designing
A little about DesigningA little about Designing
A little about Designing
Virtu Institute
 
Lecture 4 - Media Strategy
Lecture 4 - Media StrategyLecture 4 - Media Strategy
Lecture 4 - Media Strategy
Virtu Institute
 
Lecture 3 - Problem Statement
Lecture 3 - Problem StatementLecture 3 - Problem Statement
Lecture 3 - Problem Statement
Virtu Institute
 
Design Brief to Design - Decoding the Brief
Design Brief to Design - Decoding the BriefDesign Brief to Design - Decoding the Brief
Design Brief to Design - Decoding the Brief
Virtu Institute
 

Más de Virtu Institute (20)

Lecture 5 - Writing a project report
Lecture 5 - Writing a project reportLecture 5 - Writing a project report
Lecture 5 - Writing a project report
 
Lecture 5 - Packaging Materials and Labelling
Lecture 5 - Packaging Materials and LabellingLecture 5 - Packaging Materials and Labelling
Lecture 5 - Packaging Materials and Labelling
 
Lecture 4 - Sustainable Packaging Design
Lecture 4 - Sustainable Packaging DesignLecture 4 - Sustainable Packaging Design
Lecture 4 - Sustainable Packaging Design
 
Legislation, Codes of Practice and Standards in Graphic Design
Legislation, Codesof Practice and Standards in Graphic DesignLegislation, Codesof Practice and Standards in Graphic Design
Legislation, Codes of Practice and Standards in Graphic Design
 
Digital strategy for ebusiness
Digital strategy for ebusinessDigital strategy for ebusiness
Digital strategy for ebusiness
 
Managing Design and eBusiness - Lecture 2
Managing Design and eBusiness - Lecture 2Managing Design and eBusiness - Lecture 2
Managing Design and eBusiness - Lecture 2
 
Managing Design and eBusiness - Lecture 1
Managing Design and eBusiness - Lecture 1Managing Design and eBusiness - Lecture 1
Managing Design and eBusiness - Lecture 1
 
Design and the Environment - Sustainable Design
Design and the Environment - Sustainable DesignDesign and the Environment - Sustainable Design
Design and the Environment - Sustainable Design
 
Design and the Environment - Cradle to Grave
Design and the Environment - Cradle to GraveDesign and the Environment - Cradle to Grave
Design and the Environment - Cradle to Grave
 
Digital Print
Digital PrintDigital Print
Digital Print
 
OHS and Copyright
OHS and CopyrightOHS and Copyright
OHS and Copyright
 
Photomedia in Creative Practice (MANIPULATE IMAGES)
Photomedia in Creative Practice (MANIPULATE IMAGES)Photomedia in Creative Practice (MANIPULATE IMAGES)
Photomedia in Creative Practice (MANIPULATE IMAGES)
 
Photomedia in Creative Practice (CREATE IMAGES)
Photomedia in Creative Practice (CREATE IMAGES)Photomedia in Creative Practice (CREATE IMAGES)
Photomedia in Creative Practice (CREATE IMAGES)
 
Lecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication TheoriesLecture 3 - Visual Communication Theories
Lecture 3 - Visual Communication Theories
 
Lecture 2 - Film VS. Digital Photography
Lecture 2 - Film VS. Digital PhotographyLecture 2 - Film VS. Digital Photography
Lecture 2 - Film VS. Digital Photography
 
Introduction to Digital Design
Introduction to Digital DesignIntroduction to Digital Design
Introduction to Digital Design
 
A little about Designing
A little about DesigningA little about Designing
A little about Designing
 
Lecture 4 - Media Strategy
Lecture 4 - Media StrategyLecture 4 - Media Strategy
Lecture 4 - Media Strategy
 
Lecture 3 - Problem Statement
Lecture 3 - Problem StatementLecture 3 - Problem Statement
Lecture 3 - Problem Statement
 
Design Brief to Design - Decoding the Brief
Design Brief to Design - Decoding the BriefDesign Brief to Design - Decoding the Brief
Design Brief to Design - Decoding the Brief
 

Último

ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
GregMichaelTapawan
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
21uul8se
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
RashmitaSwain3
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
pavankumarpayexelsol
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
f22b6g9c
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
Kyungeun Sung
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
67n7f53
 

Último (20)

ADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdfADESGN3S_Case-Study-Municipal-Health-Center.pdf
ADESGN3S_Case-Study-Municipal-Health-Center.pdf
 
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
一比一原版亚利桑那大学毕业证(UA毕业证书)如何办理
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
modular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdfmodular-kitchen home plan civil engineering.pdf
modular-kitchen home plan civil engineering.pdf
 
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build  Your Online Presence 2024.pptxBest Digital Marketing Strategy Build  Your Online Presence 2024.pptx
Best Digital Marketing Strategy Build Your Online Presence 2024.pptx
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
一比一原版(UoN毕业证书)纽卡斯尔大学毕业证如何办理
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4International Upcycling Research Network advisory board meeting 4
International Upcycling Research Network advisory board meeting 4
 
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
一比一原版(LaTrobe毕业证书)拉筹伯大学毕业证如何办理
 

Web Design

  • 1. VDIS10026 Managing Design and eBusiness SANGEETA JAIN
  • 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
  • 6. size vs. browser resolution
  • 7. Designer have no control over the users’ screen resolution
  • 10. Colors on the web - RGB RED, GREEN AND BLUE
  • 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
  • 14. Elements of web design  Text  Images (Graphics)  Animation  Sound  Video  Interactivity
  • 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/
  • 19.
  • 20.
  • 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
  • 23.
  • 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!