Modern Web Concepts
0 likes699 views
The document discusses modern web concepts, emphasizing the importance of a user-centric design approach and efficient processes in development. It highlights the significance of consistency and cohesiveness in design, cautions against common design pitfalls, and advocates for responsive design. Additionally, it provides resources for further exploration of HTML5 and responsive web design principles.
Modern Web Concepts
- 1. Modern Web Concepts Ryan Parsley Linxter.com 2011.02.12
- 2. How Do You Work Now?
- 3. How Do You Work Now? • Designer works first • Developer works first • We don’t need no stinking designers
- 4. A Stitch In Time... • Less investment fosters more iterations • Process is not wasted time • Learn to let go • Reusability is overrated
- 5. Let Go, Let Cloud
- 7. Think About Why Before How “If you don’t know where you are going, any road will get you there.” —Lewis Carroll • Identify your target audience • Identify with your target audience
- 8. User Centric? • Good design is the baseline • Great design is a feature • Customer’s goals... not your goals • Users probably don’t work for your company
- 9. Usability?
- 10. What Does The User Expect? • Consistency is great! • Cohesiveness is what you really need. • If you don’t fancy yourself a design expert... there is no shame in striving for obvious. • You don’t have to be *that* clever
- 11. Design Patterns “The only ‘intuitive’ interface is the nipple. After that it’s all learned.” —Bruce Ediger
- 16. The Grid Is Your Friend • Logical solution for creating layouts • Consistency comes baked in • Great learning tool
- 19. Responsive Design • Augment grids • @media screen and (max-width:480px) • Every screen can have a custom feel
- 20. HTML5 Is Not A Myth • <!DOCTYPE html> • Focus on the structural bits first • Fill in the gaps with modernizer.js
- 21. Mind The Gap? • Progressive enhancement • Define “support” • There is no need to look the same in all browsers
- 22. Image Credits • http://www.flickr.com/photos/joeandy/147678902 • http://www.flickr.com/photos/eliotreeves/3865454969 • http://www.flickr.com/photos/24868561@ N07/3981525301 • http://www.flickr.com/photos/joshsimerman/3444223835 • http://www.flickr.com/photos/adactio/1799116343/
- 23. Resources • http://www.modernizr.com • http://adactio.com/articles • http://www.alistapart.com/articles/responsive-web-design • http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr • http://www.joelonsoftware.com/uibook/fog0000000249.html • http://gettingreal.37signals.com/ch09_Interface_First.php • http://thinkvitamin.com/business/how-to-increase-sign-ups-by-200-percent • http://www-01.ibm.com/software/ucd/ucd.html • http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for- visual-studio-2010