Web Design | Tech Talk

We explore simplicity.

Tech Talk presented at Fullstack Academy on August 5th.

FVCproductions

Transcript

1. Web Design We explore simplicity. FVCproductions
2. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
3. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
4. GITHUB REPO WITH THE MOST ̣s???
8. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
9. Generally speaking…
10. User Interface UI UX User Experience
12. Repeat Uses Complex Interactions Task Completion Designing Software vs Designing Websites
13. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
14. 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. Cards terest, Twitter, Facebook, d the Google. all love their cards. Cards Pinterest, Twitter, Facebook and the Google. Cards
18. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
19. GOOD UX GOOD UI
20. Header 1 Header 2 Header 3 Body Quote Style Guide
21. Break It Down
23. Planning
24. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
25. consider yourself creative, but think of what you’re capable of producing: beautiful websites, complex gaming worlds, smartphone apps-- the list is seemingly endless. Here’s a good analogy: Think of code like music. Both require knowledge of a specific language: Java for coders and musical notes for musicians. Creativity comes into play when that knowledge is applied -- when you’re able to string together notes or pieces of code to create something complex, intriguing and beautiful, like Beethoven’s 5th Symphony… or Grand Theft Auto V. In that same vein, approaching creativity through coding may help you relate to the designers that you work with. • (3) Send hiring managers a message. Even if employers are not specifically seeking a coder who understands the design process, the fact that you can speak the language tells them that you’re versatile and willing to learn new things. • (4) Be an invaluable liaison. Knowing how to code and understanding the design process puts you in the unique position of translating between two languages – design-speak and code-talk. If you’ve ever worked with designers, sometimes the jargon they use makes absolutely no sense to you. Knowing a bit of their lingo can also help fill the gap. • (5) Contribute to the design process. When you understand a thing or two about design, you can provide valuable feedback to the designer, particularly from a coder’s perspective. • (6) Feel the designer’s pain. Despite your sincerest efforts, you’ve come to realize that design just isn’t your thing. But having gone
26. consider yourself creative, but think of what you’re capable of producing: beautiful websites, complex gaming worlds, smartphone apps-- the list is seemingly endless. Here’s a good analogy: Think of code like music. Both require knowledge of a specific language: Java for coders and musical notes for musicians. Creativity comes into play when that knowledge is applied -- when you’re able to string together notes or pieces of code to create something complex, intriguing and beautiful, like Beethoven’s 5th Symphony… or Grand Theft Auto V. In that same vein, approaching creativity through coding may help you relate to the designers that you work with. • (3) Send hiring managers a message. Even if employers are not specifically seeking a coder who understands the design process, the fact that you can speak the language tells them that you’re versatile and willing to learn new things. • (4) Be an invaluable liaison. Knowing how to code and understanding the design process puts you in the unique position of translating between two languages – design-speak and code-talk. If you’ve ever worked with designers, sometimes the jargon they use makes absolutely no sense to you. Knowing a bit of their lingo can also help fill the gap. • (5) Contribute to the design process. When you understand a thing or two about design, you can provide valuable feedback to the designer, particularly from a coder’s perspective. • (6) Feel the designer’s pain. Despite your sincerest efforts, you’ve come to realize that design just isn’t your thing. But having gone
28. Big Changes
29. Big Changes
30. BAD UX BAD UI
31. BAD UX GOOD UI
32. Overview Why should I care? What is it anyways? Up and Coming Good Practices Bad Practices No, seriously — why should you care?
33. “The other overlooked aspect of winning a hackathon is design.” - M R . YA N G
34. “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? If you do this, you’re leaving a huge amount of points on the table.” M R . YA N G
35. If all else fails… Avoid Unnecessary Work
36. Design Resources
38. References
39. Thanks. We just explored simplicity. FVCproductions