Styling on steroids
•
2 likes•507 views
Details some alternative approaches and tools to traditional design comps for designing quickly and flexibly in a mulit-layout / multi-platform world.
Report
Share
Styling on steroids
- 1. Styling on Steroids An issue of Scale
- 2. PROJECT DATE CLIENT 11-13-2014 EVERYONE I'M HERE TO PUMP YOU UP! OR AT LEAST GET YOU TO THE DESIGN GYM...
- 3. WHO THE HECK ARE YOU?
- 4. I’m Mario Noble Web Designer/Front End dev/Graphic Designer/UX/UI/ Southern California Cliche for 12 years and counting...
- 5. JESSE JAMES GARRETT’S ELEMENTS OF USER EXPERIENCE DIAGRAM
- 6. A Short History of Web Design Basic html text and links – Look. A Cat. Slice and Dice Hotspot comps images in tables – Just like a magazine! A Flash of Silverlight in the Pan The Rise of the Grid CSS - Separation of content, presentation and logic. More CSS3 and HTML5 – Look, rounded corners! Responsive Web Design – Phones, Tablets and HD TV's oh my! Crazy time...
- 7. Motives Changing landscape of structure and use
- 8. Fundamental Structural Changes Affects color, typography, space, flow, contrast, form and shape.
- 9. Many possible variations need to be shown Changing expectations – fast, agile iterations, Consistent handoffs to devs (a la past print shops) Fast, Cheap, Good! Or Bigger, Stronger, Faster!
- 10. Problem Framing:
- 11. In the past, Comps have served as...
- 15. They’d also: act as a method to collaboration with, discuss and get stakeholder buy in and build momentum for the final product.
- 16. It’s getting tough now. Many comps = lots of effort in little time
- 17. Problem.
- 18. How do you have something to show that is fast and flexible down the road while still communicating your vision in detail?
- 19. Solution
- 20. Use approaches that generate html/css or "componentize" into a flexible deliverable.
- 21. What are these?
- 22. Do I need to code? Not necessarily. In fact, you’ll want to do what you usually do at first.
- 23. There are lots and lots of tools out there.
- 24. They fall into various categories with some overlap. Their creators are always improving too. Usually.
- 25. Categories Ideation, Reference, Prefab, Custom Creation
- 26. Some examples
- 28. Pros and Cons Better design "flow" Bad or difficult to access html/css
- 29. REFERENCE STYLE TILES / COMPONENT COLLAGES, STYLE GUIDES, PATTERLAB.IO
- 30. Pros and Cons Provides easy to understand guidelines to follow Sometimes overly simplistic or overly complex
- 31. PREFAB BOOTSTRAP, FOUNDATION, XCODE INTERFACE BUILDER, ETC.
- 32. Pros and Cons Quick and well documented Can be very cookie cutter and generic
- 33. CUSTOM ONLINE EDITORS FROONT, WEBFLOW, DIVSHOT - COLLABORATIVE BUT SOMETIMES A “WALLED GARDEN”
- 34. DESKTOP EDITORS MACAW, PINEGROW - SINGLE USER ORIENTED BUT FLEXIBLE
- 35. Pros and Cons Lots of control over look and layout Requires a more intimate knowledge of html/css
- 36. One Tool to Rule them All is attractive ...but could also be limiting.
- 37. Inspiration Ideation Communication Reference Implementation Flexibility What’s the 10,000 foot purpose?
- 38. Each piece a small bit of beauty capable of lending itself to harmonize into a coherent whole.
- 39. It can be frustrating. Custom crafting versus mechanization.
- 40. Take away... Reduce your throwaways.
- 41. Create deliverables that serve as either:
- 43. Resources that can actually be used in production.
- 44. Stay as “close to the metal” as possible, while maintaining “subjectivity”.
- 46. How does one paint on a river?
- 47. By not trying to paint on a river.
- 49. We want to be creative...
- 50. ...but produce something that will be able to be easily produced, changed, used, referenced and maintained
- 51. All brands are their owners copyright Floating lanterns - https:// matsuetravelguide.files. wordpress.com 10,000 feet-http:// www.laurendrusso.com Copyrights and Credits
- 52. Q&A: talk, talk, talk...