Web Design - Innovation Hackathon
•
1 like•295 views
This document discusses various aspects of web design. It covers why web design is important, different types of design roles like graphic designer, UI designer, and UX designer. It discusses current design trends like material design and the popularity of cards on websites. It provides tips for good practices like following design standards and avoiding bad practices like default templates. The document emphasizes that good design leads to benefits like increased user engagement and reduced support costs. Overall it provides a high-level overview of web design, different roles, trends, best practices and why design is important for user experience.
Recommended
More Related Content
What's hot
What's hot (8)
Similar to Web Design - Innovation Hackathon
Similar to Web Design - Innovation Hackathon (20)
More from Frances Coronel
More from Frances Coronel (20)
Recently uploaded
Recently uploaded (20)
Web Design - Innovation Hackathon
- 1. Web Design We explore simplicity. @fvcproductions FOR DEVELOPERS
- 3. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 4. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 5. DON’T JUDGE A BOOK BY ITS COVER. by IDK THE MOST CLICHE QUOTE OF ALL TIME
- 6. But users don’t see your code. All they see is the cover of your app.
- 9. R 🤑 I
- 10. more frequent visits to your website increased return visits users staying longer decreased user errors decreased customer support costs reduced complaints
- 11. “If you think good design is expensive, you should look at the cost of bad design” Ralph Speth
- 12. A clean UI is like clean code. 🤔
- 21. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 22. Someone asked me what I do all day and I said I move things around until they look right, and I suspect that’s as good of a definition of graphic design as I could come up with. MILTON GLASSER
- 23. NOT EXACTLY
- 24. Graphic/Visual Designer UI Designer UX Designer Motion/Animation Designer
- 25. Graphic/Visual Designer produce high quality, high resolution, pixel perfect graphics “"The kerning is off and the button should be 1 pixel to the left!”
- 27. UI Designer how the product interface is laid out “Those sign up links should be in the top right corner!”
- 29. UX Designer constructs how the product feels through wireframes, storyboards, sitemaps “After they sign up, a thank you message should show up in the middle!”
- 30. Planning
- 31. User Interface UI UX User Experience
- 33. Motion/Animation Designer create those fancy animations you interact with “That menu should ease in from the left corner!”
- 35. UX Researcher researches user behavior and attitudes through user personas, a/b testing “From our research, a typical user is more likely to ignore the hidden hamburger menu!”
- 36. A/B Testing
- 37. Front End Developer converts design to code through HTML/CSS/JS “I want to use a 12-column grid!”
- 39. Product Designer A good Product Designer knows a bit of animation, prototyping, coding, research, and visual/motion design.
- 40. “I am looking for a designer.”
- 41. 3 Key Principles
- 42. 3 Key Principles
- 44. Hello
- 48. Hello
- 52. 3 Key Principles
- 54. HTML STRUCTURE
- 55. CSS STYLE
- 56. Layers of Web Design JS BEHAVIOR
- 57. 3 Key Principles
- 58. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 67. Let the content breath.
- 68. Material design
- 74. Pinterest, Twitter, Facebook, and the Google. They all love their cards. Cards Pinterest, Twitter, Facebook and the Google. They all love their cards. Cards terest, Twitter, Facebook, d the Google. all love their cards. Cards terest, Twitter, Facebook, d the Google. all love their cards. Cards Cards Pinterest, Twitter, Facebook and the Google. They all love their cards. Cards
- 81. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 82. 3 Key Principles
- 86. GOOD UXGOOD UI
- 88. Design Standards & Style Guides
- 91. Repeat Uses Complex Interactions Task Completion Designing Software vs Designing Websites
- 93. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 101. Big Changes
- 102. BAD UXBAD UI
- 104. BAD UXGOOD UI
- 105. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
- 107. “The other overlooked aspect of winning a hackathon is design.” - M R . YA N G
- 108. “Most contestants don’t go past the default designs—how many times have we all seen that default black navbar from the Twitter’s Bootstrap CSS Framework in hackathon presentations?”M R . YA N G
- 109. If all else fails… Avoid Unnecessary Work
- 112. FORGE YOUR OWN PATH
- 113. Goodies
- 114. Design Resources
- 116. References
- 117. References
- 119. W8!!!1 32