SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Creative  Design  &  Usability   Engineering
Overview ,[object Object],Usability Engineering/Human Computer Interaction/ Interaction Design/User Experience Design
User Experience Design - Methodology
Artifacts of Design Practice ,[object Object],[object Object],Site Maps Storyboards Schematics Mock-ups ,[object Object]
Schematics ,[object Object]
Mock-ups ,[object Object]
Mock-ups
[object Object]
How the Eyes Move ,[object Object],[object Object],[Eyetrack III, Poynter Inst. 2003]
How Users Look at News Web Sites ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[Eyetrack III, Poynter Inst. 2003]
Response Times ,[object Object],[object Object],[object Object],[object Object],[Nielsen 1997, Miller 1968, Card et al. 1991]
Color Schemes ,[object Object],[object Object],[object Object],[object Object],[Skaalid 1999, Classic Graphic Design Theory]
Costco Implementation ,[object Object],[object Object]
Text and Background ,[object Object],[object Object],[object Object]
How to Make Web Pages Readable ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[Nielsen, 2006]
Costco Implementation ,[object Object]
Skill Sets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Skill Sets ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Online Design work www.vayama.com www.onhotels.com www.sotctours.com  www.costcotravel.com  www.alaska.org  www.classicvacations.com www.ftc-i.net www.endurancegroup.com mahades.maharashtra.gov.in www.door2tour.com www.proflowers.com reservations.wynnlasvegas.com www.voyage.tv electronics.bluestarindia.com ,[object Object]
Thank You Engineering Business Outcomes ,[object Object]

Weitere ähnliche Inhalte

Ähnlich wie Creative Design Process and Best Practices

ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsGilbert Guerrero
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Projectxyz01
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebMichael Maclennan
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web AccessibilityMoin Shaikh
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTREgroversimrans
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile TrendsMark N Swaine
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devicesjameswillweb
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)admecindia1
 
13 si(systems analysis and design )
13 si(systems analysis and design )13 si(systems analysis and design )
13 si(systems analysis and design )Nurdin Al-Azies
 
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02Natalia Fomina
 
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 Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles CompetenciesSameer Chavan
 
The Science of Subtraction: A Minimalist Guide to Web Design
The Science of Subtraction: A Minimalist Guide to Web DesignThe Science of Subtraction: A Minimalist Guide to Web Design
The Science of Subtraction: A Minimalist Guide to Web DesignArabNet ME
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignAllan Huang
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Michelle Reyes
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteRavi Bhadauria
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdfTECHCENTRAL3
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Keith Instone
 

Ähnlich wie Creative Design Process and Best Practices (20)

ARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page CompsARTDM 171 Week 9: Designing Page Comps
ARTDM 171 Week 9: Designing Page Comps
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial Web
 
Basics of Web Accessibility
Basics of Web AccessibilityBasics of Web Accessibility
Basics of Web Accessibility
 
Web designing & web development! BATRA COMPUTER CENTRE
Web designing &  web development! BATRA COMPUTER CENTREWeb designing &  web development! BATRA COMPUTER CENTRE
Web designing & web development! BATRA COMPUTER CENTRE
 
UX / UI Mobile Trends
UX / UI Mobile TrendsUX / UI Mobile Trends
UX / UI Mobile Trends
 
Optimizing Sites for Mobile Devices
Optimizing Sites for Mobile DevicesOptimizing Sites for Mobile Devices
Optimizing Sites for Mobile Devices
 
Responsive Web Designing Fundamentals
Responsive Web Designing FundamentalsResponsive Web Designing Fundamentals
Responsive Web Designing Fundamentals
 
Responsive web designing ppt(1)
Responsive web designing ppt(1)Responsive web designing ppt(1)
Responsive web designing ppt(1)
 
13 si(systems analysis and design )
13 si(systems analysis and design )13 si(systems analysis and design )
13 si(systems analysis and design )
 
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-022230  Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
2230 Fomina Natalia - Memo Ticket - DES509-Magee j-crit-02
 
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 Experience Roles Competencies
User Experience  Roles  CompetenciesUser Experience  Roles  Competencies
User Experience Roles Competencies
 
The Science of Subtraction: A Minimalist Guide to Web Design
The Science of Subtraction: A Minimalist Guide to Web DesignThe Science of Subtraction: A Minimalist Guide to Web Design
The Science of Subtraction: A Minimalist Guide to Web Design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 
Types of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia InstituteTypes of Layouts by ADMEC Multimedia Institute
Types of Layouts by ADMEC Multimedia Institute
 
digital marketing[1].pdf
digital marketing[1].pdfdigital marketing[1].pdf
digital marketing[1].pdf
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)
 
Web designing
Web designingWeb designing
Web designing
 

Kürzlich hochgeladen

DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 

Kürzlich hochgeladen (20)

DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
guest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssssguest bathroom white and bluesssssssssss
guest bathroom white and bluesssssssssss
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 

Creative Design Process and Best Practices

Hinweis der Redaktion

  1. We realize that what matters most are not just great technology solutions, but building great presentation systems that shape the user experience and create positive brand interactions, which ultimately translate to greater value for the client and better-engineered solutions at the back-end.
  2. Usability Engineering is a planned & methodical approach to developing any products & websites that works for the users and deliver the results that they are looking for. It ’ s a practical and systematic way of creating user interfaces and the framework through which a user would interact with the product or the website
  3. Interaction: Determine the goals for the solution from the perspective of the user and the business Determine the user profile, user needs, user behaviour & concerns and target usability requirements Determine feature functionality Evaluate existing versions of the product (If any) Perform a competitive analysis   Ideation: Sketch out information architecture & navigational flow at an abstract level Create and project an identity that ’ s true to the core brand properties and can be owned by no one else Develop and streamline content Ideating concept & theme Design interface layout keeping the brand orientation and usability aspect in mind. Interactive visual presentation (conceptual prototype) for the client ’ s approval. Repeat this process (production iteration) until the business goals and user needs are met.   Implementation: Create templates and perform validation, compatibility, optimization testing. Development of UID - user interface design (Functional prototype). Evaluate performance through testing, quality assurance, usability testing, compatibility & scalability testing Repeat this process (production iteration) until the business goals are met. The final deliverable of this process is relevant functionality, strong branding, user-centric design and consistent look & feel demonstrated through UID.    
  4. Mention that these are “real artifacts.”
  5. Represents the information and navigation content of a page. Graphic elements are used such as shading, typography, line, layout – but these are not meant to be taken literally from a graphic design standpoint. These would often be roughed out using pen and paper and then created using a graphics program like Illustrator. Sometimes in HTML, sometimes in Word, sometimes in Visio.
  6. Sometimes roughed out on paper, though if working from schematics perhaps not. Usually created in Photoshop, sometimes would evolve to “dead” or “semi-active” HTML.