Designing adaptable pages is designing accessible pages. And perhaps the great promise of the web is accessibility, regardless of difficulties, to information.” “ alistapart.com/article/dao April 7, 2000
We should embrace the fact that the web doesn’t have the same constraints [as the printed page] and design for this flexibility. But first, we must ‘accept the ebb and flow of things’.” “ alistapart.com/article/dao April 7, 2000
Arguing about 640, 800 or 1024 pixels is like arguing about whether Pepsi tastes better than Coke when really, a nice glass of water would be much more refreshing.” “ http://stuffandnonsense.co.uk/blog/about/a_list_taken_apart Jeremy Keith
Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things’.” “ alistapart.com/article/responsive-web-design May 25, 2010
Worse still are the expectations that static visuals set in the minds of clients, particularly when designers use them as a method to get sign-off for a design.” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
I often wonder, ‘is the fact that so many web pages are fixed- width and centered, a direct result of clients signing off fixed-width design visuals?’” “ stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/ June 28, 2009
User experience design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
User experience design Site audit (existing assets) Flows and navigation maps User stories or scenarios Personas Site maps and content inventory Wireframes (screen blueprints or storyboards) Prototypes Written specifications (describing behavior or design) Graphic mockups (Precise visual of expected end result) http://en.wikipedia.org/wiki/User_experience_design
Stephen Hay’s workflow Content inventory Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow
Content inventory Design in text (structured content) Linear design Breakpoint graph Design for various breakpoints HTML design prototype Present prototype screenshots Present prototype after revision Document for production http://slideshare.net/stephenhay/responsive-design-workflow Stephen Hay’s workflow
Elements Captions Headings Labels Legends Lists Paragraphs Quotations Small Tables Classifications Alerts Comments Copyright information Dates and times Form text (error, help) Pull quotes (marks) Intro paragraphs Related article summaries Related article titles
Web designers will have to look beyond the layout to envision how elements will reflow & lockup at various widths while maintaining form & hierarchy.” “ http://trentwalton.com/2011/07/14/content-choreography Trent Walton
25 MASS: TYPOGRAPHY ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz The Product Name should appear in Futura Std Bold Uppercase. This sans serif font has been chosen for its clarity, legibility and classic appeal. The Front Product Descriptor copy should appear in ITC Century Std Lowercase. This serif font has been chosen for its simple style and clarity even in smaller point sizes. The back of pack copy should appear in Futura Std. This sans serif font has been chosen for its simple style and clarity even in smaller point sizes. All fonts are OpenType from the Adobe Font Folio 11. (www.adobe.com/uk/products/fontfolio)
17 MASS PANTONE 7489 C PANTONE 7495 C PANTONE 366 C PANTONE 383 C PANTONE 7406 C PANTONE 121 C PANTONE 1235 C PANTONE 7502 C PANTONE 157 C PANTONE 138 C PANTONE 166 C PANTONE Warm Red C PANTONE 485 C PANTONE 184 C PANTONE 5005 C PANTONE 7431 C PANTONE 673 C PANTONE 701 C PANTONE 529 C PANTONE 7446 C PANTONE 659 C PANTONE 7459 C PANTONE 278 C PANTONE 551 C PANTONE 629 C PANTONE 3105 C PANTONE 3248 C PANTONE 7466 C PANTONE 7536 C PANTONE 7530 C OUTDOOR PANTONE 583 C PANTONE 291 C MASS: COLOUR PALETTE Mass products are made up of a warm colourful palette that is both complementary and contrasting. Colour is a key element of this design, therefore it is important that Pantone colours are used to print the designs rather than CMYK. Pantone colours will provide the maximum amount of consistency across the Product Range. In instances where this is not possible we have created optimised CMYK values that are shown on page 18. In the instance that a suitable colour does not exist for a Mass Food product, please contact your Licensing Manager.
22 MASS: PHOTOGRAPHY Always use image in monochrome with a background colour wash Never use in colour Never use simply as black and white image Never position anywhere other than bottom right Never cover with copy ITALIAN FUSILLI enjoy traditional texture with Durum Wheat Semolina Never force the image into the given space – leave an area of blank space round the image Never position the image around a corner do’s and dont’s
$ULDO5HJXODU $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] # A
B $ULDO%ROG $%&'()*+,-./0123456789:;<= DEFGHIJKLMNOPQRSTUVWXYZ[\] # A
B +MPP7ERW6IKYPEV %&'()*+,-./0123456789:;<=> EFGHIJKLMNOPQRSTUVWXYZ[\]^ $ B
C .,3\ZLZIVSK[`WVNYHWO`[VJYLH[LZ[YVUNLY OPLYHYJOPLZHUKKYHTHHJYVZZ[OLZP[L>L»YLTV]PUN MYVT=LYKHUH[V(YPHSHZ[OL))*»ZKLMH\S[^LIMVU[MVY IV[OOLHKLYZHUKIVK`JVW` )\PSKPUN)SVJRZ;`WVNYHWO`
malarkey
sugiyama_sukedachi
machida
ykkntn
uxevents
norinity1103
shoty_k2
koel
transit_kix
hjmkth
shunmacher
brianwarren
colly
holman
danielanewman
marcduiker
aki_iinuma
phodgson
iamctodd
ammeep
jennybc
mraible
keathley