A designer has been asked to mock up a student profile page in Photoshop. It’s beautiful. The student’s name fits perfectly under the profile image. Their bio is split into two columns that perfectly line up. Unfortunately, all of this perfectly laid-out content is an unrealistic best-case scenario. Our content never fits this perfectly. Names are longer than the eleven characters used in the mock-up. Bios naturally vary in length from person to person. The reality is that we will have large variation in our content.
Rather than addressing these variations after we’ve received approvals and started building a website, we should stress-test our designs with real content from the start of our process. To deliver the best possible product, we need to design for the best-case, worst-case, and every-case-in-between when it comes to possible content.
* Learn how systems and patterns can help us build reusable and shareable components for our websites
* Discover the benefits of taking the design process out of Photoshop and moving it to the browser.
* Learn how content specialists can engage with the design process from the beginning and be advocates for realistic content.
* Explore how real and varied content, not lorem ipsum, can be used to test a design and how it might work.
* Discover how developers can also be involved in this process to ease integration of a design with a CMS or a custom solution.
15. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
S e d u t e l i t m a t t i s ,
consectetur odio eu, volutpat
felis. Interdum et malesuada
fames ac ante ipsum primis
i n f a u c i b u s . P r a e s e n t
hendrerit dolor non cursus
sollicitudin.
Suspendisse ultricies urna
vel risus scelerisque, in
congue risus porttitor. Sed et
tortor a tortor placerat
ullamcorper. Mauris nec
egestas purus.
16. Content first.
Mobile first.
Performance first.
Whatever first.
Ultimately, we want our
skills to be valued.
17. Creation is a shared activity.
- Bermon Painter, @bermonpainter
https://flic.kr/p/oqSLxR
19. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
S e d u t e l i t m a t t i s ,
consectetur odio eu, volutpat
felis. Interdum et malesuada
fames ac ante ipsum primis
i n f a u c i b u s . P r a e s e n t
hendrerit dolor non cursus
sollicitudin.
Suspendisse ultricies urna
vel risus scelerisque, in
congue risus porttitor. Sed et
tortor a tortor placerat
ullamcorper. Mauris nec
egestas purus.
23. A pattern describes a problem that occurs
over and over again in our environment,
and then describes the core of the solution
to that problem, in such a way that you can
use this solution a million times over...
- Christopher Alexander
41. Patterns can help us find
the holes in our content.
patterns lead to realistic expectations. finding holes in
process and content
https://flic.kr/p/dsabfj
46. Design isn’t Photoshop. Design is the aggregate
of all these different things we can do to make
sure that our intentions are communicated...
- Chris Cashdollar, @ccashdollar
96. A big “Thank you!” to the
following folks for their insights:
Jason Grigsby
@grigs
Sara Wachter-Boettcher
@sara_ann_marie
Emily Gray
@emilykgray
Jeff Eaton
@eaton
Matt Lindsay
@lindsam8
Cyd Harrell
@cydharrell