Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Basic Web Dev
Bertrand Alexander D. Paran
UP ITDC
August 12: UI / UX Principles
August 13 – 22: Basic Web Programming
(HTML/CSS/JAVASCRIPT)
August 26: Evaluation of Website...
1 PowerPoint demonstrating the
principles f UI/UX
1 website as an exercise using
HTML/CSS and JavaScript due on
the 18th o...
Bertrand Alexander D. Paran
UP ITDC
UI/UX Principles
UI/UX Principles
• http://www.theworldsworstwebsiteever.com/
• http://www2.warnerbros.com/spacejam/movie/jam.htm
• http://...
By the end of this lesson:
• Ascertain a basic understanding of what precisely UI/UX is
• Understand and be able to relate...
Outline
•What is UI / UX
•The Scope of UI / UX
•The most Important Principles of UI
/ UX Design
What it UI / UX?
•Why do we need to study UI / UX?
Put Bluntly:
• UI is the platform that the user interacts with when
using your program.
• UX it the totality of the experi...
Good Examples
http://dzineblog.com/2
010/03/best-user-
interface-design-
resources-the-round-
up.html
http://www.nconsulti...
Bad Examples
http://uglyisnotgood.com/
More Examples
• http://pcic.gov.ph/
• http://www.genicap.com/Site/
UI/UX Further Defined
It is a form of Engineering
• The practice of approaching the design of anything using
proven and time tested knowledge in...
Build 1000 cars. Now.
http://www.popularmechanics.com/technology/engineering/gonzo/
4272846
http://www.blog.automotiveaddicts.com/modern-car-construction-
materials
The Scope of UI/UX
• Know the objective of your website.
• Engineer your website so that its design is centered around
tha...
Going Back:
Interlude:
•Watch the following vido to
highlight how UI / UX affects your
business.
• https://www.youtube.com/watch?v=v3f...
Design Principles
•The principles of UI Design that
influence the overall UX
• Aesthetics
• Usability
• Affordance
• Respo...
Aesthetics
• Beauty is on the inside? Unfortunately, not
for businesses in a competitive world
• Is the study of how thing...
Aesthetics
• Appearances have a substantial impact on
businesses
http://developme.wordpress.com/2010
/03/01/debit-card-fra...
Aesthetics
• People identify, and avoid certain personalities
• Trust is related to personality
• Perception and expectati...
Aesthetics
• Consumers judge products based on their companies
• Consider what type of personality you are creating with
y...
Usability
• “The extent of ease that users experience when using your
site”
• Is your site easy or hard to use?
• What are...
Usability
• Layout
• Is your website cluttered an disorganized, making it difficult
for the user to properly identify the ...
Usability
• Bad Layout
http://www.doobybrain.com/2009/11/05/
new-york-yankees-website-is-a-cluttered-
mess/
http://www.hon...
Usability
• Content
• Is the text misleading, confusing or not properly
representing the elements they are designed to des...
Usability
http://www.doobybrain.com
/2011/01/01/space-jam-
movie-website-still-online/
Affordance
• Affordance is the science of how the image or functionality
of an object adheres to what is expected of it.
•...
Affordance
• Examples of Affordance Implementation
• A button should look like a button and can be expected to
behave like...
Affordance
• Examples of Lack of Affordance Implementation
http://www.iconar
chive.com/show/f
ood-icons-by-aha-
soft/coffe...
Responsiveness
• Speed
• Is your site loading fast enough to maintain the user’s
attention?
• Are the images you are using...
Responsiveness
• Feedback
• Denotes the measure of a websites capacity to react with
user input, this contributes greatly ...
Responsiveness
• Errors
• The website should be able to provide an avenue to
respond to a user’s needs
• If there are erro...
Brand Image
• What constitutes the overall image of your site
http://www.tofuri
ous.com/marketin
g-tips/brand-
colors-what...
Brand Image
• Brand Image examples
http://www.kolle
win.com/blog/we
bsite-template/
Brand Image
• Brand Image examples
http://www.kolle
win.com/blog/we
bsite-template/
Brand Image
• Brand Image examples
http://www.kolle
win.com/blog/we
bsite-template/
Brand Image
• Consistency
• It is important to maintain a consistent design throughout
all pages, one that is commensurate...
Brand Image
• Consistency Implementation
http://colorlabsproject.com/themes/art
hemia-premium/
Brand Image
• Consistency
• Standards and conventions should be applied all throughout
each page
• If the search bar is at...
Summary
• UI is the congregation of the front facing elements that your
users interact with
• UI / UX can be applied anywh...
Exercise
• Form into 6 groups
• Research about any company website and create a 10
minute PowerPoint presentation explaini...
Upcoming SlideShare
Loading in …5
×

Ui and ux principles

1,137 views

Published on

A lecture series in Basic Web Design

Published in: Education
  • Login to see the comments

Ui and ux principles

  1. 1. Basic Web Dev Bertrand Alexander D. Paran UP ITDC
  2. 2. August 12: UI / UX Principles August 13 – 22: Basic Web Programming (HTML/CSS/JAVASCRIPT) August 26: Evaluation of Websites Class Schedule
  3. 3. 1 PowerPoint demonstrating the principles f UI/UX 1 website as an exercise using HTML/CSS and JavaScript due on the 18th of August 1 website as a final project due on the 26th Class Requirements
  4. 4. Bertrand Alexander D. Paran UP ITDC UI/UX Principles
  5. 5. UI/UX Principles • http://www.theworldsworstwebsiteever.com/ • http://www2.warnerbros.com/spacejam/movie/jam.htm • http://www.sickchirpse.com/10-of-the-worst-websites- ever/ • http://uglyisnotgood.com/
  6. 6. By the end of this lesson: • Ascertain a basic understanding of what precisely UI/UX is • Understand and be able to relate the importance of UX from a business perspective • Evaluate designs from a User’s Experience point of view • Be able to apply this knowledge for all future projects
  7. 7. Outline •What is UI / UX •The Scope of UI / UX •The most Important Principles of UI / UX Design
  8. 8. What it UI / UX? •Why do we need to study UI / UX?
  9. 9. Put Bluntly: • UI is the platform that the user interacts with when using your program. • UX it the totality of the experience resulting from his/her use of your program. http://www.convax.com /subservice/webdesign/ http://blog.lexa.spb.ru/archives/tag /web http://cs.stanford.edu/people/erober ts/cs201/projects/2010- 11/PsychologyOfTrust/ui3.html#0
  10. 10. Good Examples http://dzineblog.com/2 010/03/best-user- interface-design- resources-the-round- up.html http://www.nconsulting .ca/portfolio.php
  11. 11. Bad Examples http://uglyisnotgood.com/
  12. 12. More Examples • http://pcic.gov.ph/ • http://www.genicap.com/Site/
  13. 13. UI/UX Further Defined
  14. 14. It is a form of Engineering • The practice of approaching the design of anything using proven and time tested knowledge in pursuit of maximum efficiency and effectivity • UI/UX is the practice of designing websites and web applications pursuant of making the user experience better using proven and time tested knowledge • “To study UI/UX is to study the engineering of websites”
  15. 15. Build 1000 cars. Now.
  16. 16. http://www.popularmechanics.com/technology/engineering/gonzo/ 4272846
  17. 17. http://www.blog.automotiveaddicts.com/modern-car-construction- materials
  18. 18. The Scope of UI/UX • Know the objective of your website. • Engineer your website so that its design is centered around that goal. http://coolhomepages.com/revie w-my-work-detail.html?id=18 http://www.buzzfeed.com/ http://thegoldenarches.e- monsite.com/album/diaporam a/
  19. 19. Going Back:
  20. 20. Interlude: •Watch the following vido to highlight how UI / UX affects your business. • https://www.youtube.com/watch?v=v3f- 2WG7ONc
  21. 21. Design Principles •The principles of UI Design that influence the overall UX • Aesthetics • Usability • Affordance • Responsiveness • Brand Image
  22. 22. Aesthetics • Beauty is on the inside? Unfortunately, not for businesses in a competitive world • Is the study of how things are known via the senses
  23. 23. Aesthetics • Appearances have a substantial impact on businesses http://developme.wordpress.com/2010 /03/01/debit-card-fraud/ http://www.swisschaletph.com/philippine s/luzon/angeles_city/balibago/shopping_ malls_banks_atm.htm
  24. 24. Aesthetics • People identify, and avoid certain personalities • Trust is related to personality • Perception and expectations are linked to personality http://www.fanpop.com/clubs/steve- carell/images/25499065/title/steve- carell-l-wallpaper http://ibankcoin.com/chessnwine/ 2011/04/29/car-salesmen-giving- the-high-pressure-sales-pitch/
  25. 25. Aesthetics • Consumers judge products based on their companies • Consider what type of personality you are creating with your application based on appearance http://mangalsoni.blogspot.com/2012/0 6/dunkin-donuts.html https://www.servula.com/blog/enhanc e-user-experience-on-your-website- top-15-website-hitches-to-avoid
  26. 26. Usability • “The extent of ease that users experience when using your site” • Is your site easy or hard to use? • What are the factors that influence the ease or difficulty of using your website?
  27. 27. Usability • Layout • Is your website cluttered an disorganized, making it difficult for the user to properly identify the use of it’s elements? • The lack of form in your website will ultimately give it an amateurish appearance and detract from the website’s credibility, regardless of the quality of your product.
  28. 28. Usability • Bad Layout http://www.doobybrain.com/2009/11/05/ new-york-yankees-website-is-a-cluttered- mess/ http://www.hongkiat.com/blog/why- your-blog-repels-clients/
  29. 29. Usability • Content • Is the text misleading, confusing or not properly representing the elements they are designed to describe? • Are there crucial elements missing from your site (or just difficult to find?) • Avoid putting unnecessary details and distractions in your website that do not contribute to its function
  30. 30. Usability http://www.doobybrain.com /2011/01/01/space-jam- movie-website-still-online/
  31. 31. Affordance • Affordance is the science of how the image or functionality of an object adheres to what is expected of it. • When effectively executed, a user should be able to know what to do with it. • “The 4 second rule” when it comes to Web Design, a user should be able to identify the purpose of the website and each individual element within the first 4 seconds of looking at it. • This concept applies to entire websites.
  32. 32. Affordance • Examples of Affordance Implementation • A button should look like a button and can be expected to behave like a button. http://designreviver.com/inspirat ion/30-inspirational-call-to- action-buttons/ http://www.web3mantra.com/20 12/02/15/30-awesome-psd- buttons/
  33. 33. Affordance • Examples of Lack of Affordance Implementation http://www.iconar chive.com/show/f ood-icons-by-aha- soft/coffee- icon.html http://www.icona rchive.com/show/ mixed-icons-by- simiographics/Bo ok-icon.html https://www.iconf inder.com/icons/6 1564/blue_book_i con http://www.icona rchive.com/show/ minecraft-icons- by- chrisl21/Diamond -Sword-icon.html
  34. 34. Responsiveness • Speed • Is your site loading fast enough to maintain the user’s attention? • Are the images you are using too large to load quickly? • Is the code you are using efficient? https://dribbble.com/shots/955491-Speed http://www.iconsfind.com/20131216/speed- icon/
  35. 35. Responsiveness • Feedback • Denotes the measure of a websites capacity to react with user input, this contributes greatly to the UX • Buttons that depress on click • Loading indicators for processes that take time • Confirmation messages that appear after actions performed
  36. 36. Responsiveness • Errors • The website should be able to provide an avenue to respond to a user’s needs • If there are errors, a user should be provided with a way to contact the developer
  37. 37. Brand Image • What constitutes the overall image of your site http://www.tofuri ous.com/marketin g-tips/brand- colors-what-they- say-about-you- emotional- branding/
  38. 38. Brand Image • Brand Image examples http://www.kolle win.com/blog/we bsite-template/
  39. 39. Brand Image • Brand Image examples http://www.kolle win.com/blog/we bsite-template/
  40. 40. Brand Image • Brand Image examples http://www.kolle win.com/blog/we bsite-template/
  41. 41. Brand Image • Consistency • It is important to maintain a consistent design throughout all pages, one that is commensurate with the image of the brand. http://colorlabsproject.com/themes/arthemia-premium/
  42. 42. Brand Image • Consistency Implementation http://colorlabsproject.com/themes/art hemia-premium/
  43. 43. Brand Image • Consistency • Standards and conventions should be applied all throughout each page • If the search bar is at the upper right, then it should be at the upper right for all pages • As users move through your site, they should be reassured that they are still in the same place by a unifying theme • Applies not only to obvious elements like logos and navigation, but also content elements like fonts and backgrounds.
  44. 44. Summary • UI is the congregation of the front facing elements that your users interact with • UI / UX can be applied anywhere, not just websites or programmes • UI / UX Design Principles: • Aesthetics • Usability • Affordance • Responsiveness • Brand Image
  45. 45. Exercise • Form into 6 groups • Research about any company website and create a 10 minute PowerPoint presentation explaining how the website applied the principles discussed in this lesson • The PowerPoint itself has to exhibit the principles discussed in this lesson • At the end of the presentation, create 3 slides demonstrating bad UI / UX design, be creative with the ugliness • You may download any image on the internet to supplement the graphics you will use, so long as you credit the source

×