Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESIGNING 
for the 
UNKNOWN 
RICHARD HEALY, BASEKIT 
@RICHARDHEALY
PART ONE 
BASEKIT 
/01 /50
/02 
1.5 MILLION BASEKIT WEBSITES CREATED 
5 YEARS 
FOUNDED 2009 
40,000 BK WEBSITES 
CREATED EVERY MONTH 
OVER 100 PARTNE...
/03 
V6 
FREEFORM DRAG & DROP 
A VISUAL EDITOR 
APP DRIVEN DESIGN 
CONTENT, POSITIONING & STYLING 
DATA DRIVEN 
V7 
UNDERP...
/04 
THE V7 PRODUCT 
/50
/05 /50
/06 
571 WEBSITES 
CREATED EVERY MINUTE 
AVERAGE 3 PAGES 
74,000,000 PAGES OF CONTENT EVERY MONTH 
4 MILLION IMAGES 
UPLOA...
PART TWO 
HOW DOES THIS HELP? 
/07 /50
DESIGNER 
hey, send over that content and i’ll start the design! 
hi! just start designing then i’ll add in the content 
C...
/09 
YOU DON’T NEED THE 
CONTENT BEFORE 
DESIGNING 
/50
/10 
AMAZING DESIGN 
SMALL AMOUNTS OF CONTENT THAT WILL GROW 
BETTER CONNECTIVITY 
BETWEEN YOUR DESIGN AND THE CLIENT 
EAS...
/11 
WHAT I’M ABOUT TO SHOW 
HEALY.ROCKS 
/50
/12 
THE STARTING POINT 
/50
/13 
MINIMAL CONTENT 
/50
/14 
THE FLOATING FOOTER 
HEALY.ROCKS 
healy.rocks/footer1 
/50
/15 
DESIGNER IDEALS vs REALITY 
HEALY.ROCKS 
FLEXBOX display: flex; 
/50
/16 
.container { 
display: flex; 
} 
/50
http://caniuse.com/#feat=flexbox 
/17 /50
/18 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
hohmoeme about aubsout upsortfolioportfcoolinotact contact 
/50
/19 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
display: flex; 
align-items: center; 
justify-content: center; 
/50
/20 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
http://healy.rocks/columns5 
/50
/21 
10% IMA20G% ES 70% 
/50
/22 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
/50
/23 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
/50
/24 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
/50
/25 
THE POWER OF FLEXBOX 
HEALY.ROCKS 
/50
/26 
HEADERS 
/50
/27 
ABOUT HEADERS 
HEALY.ROCKS 
AWESOME COMPANY NAME 
home about us portfolio contact 
home 
/51
/28 
ABOUT HEADERS 
HEALY.ROCKS 
home about contact 
AWESOME COMPANY NAME home 
services portfolio 
/50
/29 
ABOUT HEADERS 
www.healy.rocks 
AWESOME COMPANY NAME 
home about us portfolio contact 
/50
/30 
NAVIGATION 
HEALY.ROCKS 
/50
/31 
LOGOS 
/50
/32 
ABOUT LOGOS 
HEALY.ROCKS 
616 X 324 
/50
/33 
ABOUT LOGOS 
HEALY.ROCKS 
AWESOME 
COMPANY 
NAME 
616 X 324 
/50
/34 
ABOUT LOGOS 
HEALY.ROCKS 
AWESOME COMPANY 
616 X 324 
/50
/35 
BEST LAYOUT FOR UNKNOWN CONTENT 
HEALY.ROCKS 
AWESOME COMPANY 
home about us portfolio more ▾ 
/50
/36 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
AWESOME COMPANY home about us portfolio 
min-width:460px; 
/50
/37 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
SUPER AWESOME COMPANY home about us portfolio 
/50
/38 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
SUPER AWESOME COMPANY 
home about us portfolio services contact 
/50
/39 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
SUPER AWESOME COMPANY 
home about us portfolio services contact 
/50
/40 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
AWESOME COMPANY home about us portfolio 
/50
/41 
NAVIGATION USING FLEX BOX 
HEALY.ROCKS 
AWESOME COMPANY home about us portfolio 
/50
/42 
ELEMENT QUERY 
/50
/43 
TYSON MATANICH 
SMASHING MAGAZINE 
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-elemen...
.companyname[min-width~="769px"][max-width~="960px"] { 
text-align:center; 
} 
/44 
/50
/45 
DEMO 
/50
/46 
CONCLUSION 
/50
/47 
1. THINK MINIMAL 
/50
/48 
2. THINK FORWARD 
/50
/49 
3. THINKING BEYOND 
/50
THANKS! 
RICHARD HEALY, BASEKIT 
@RICHARDHEALY 
@BASEKITDEVS 
/FIN
ACCREDITATION 
SOURCES 
In July 2013, it was estimated that 571 new websites are created every minute. (source: http://goo...
Upcoming SlideShare
Loading in …5
×

Designing for the Unknown

693 views

Published on

Content is king! But the breadth of content is unknown at the beginning of a design phase. Getting this wrong will serious affect project length and effectiveness of the end result. The design a BaseKit team build templates that need to work with various amounts of content and have discovered many techniques to deal with the unknown.

The talk will discuss techniques on
- Shining light on the darkness. Revealing the unknown and turning them into content.
- The design process how we go from an idea to HTML to user consumption.
- How to build scalable websites / apps for unknown amounts and types of content.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Designing for the Unknown

  1. 1. DESIGNING for the UNKNOWN RICHARD HEALY, BASEKIT @RICHARDHEALY
  2. 2. PART ONE BASEKIT /01 /50
  3. 3. /02 1.5 MILLION BASEKIT WEBSITES CREATED 5 YEARS FOUNDED 2009 40,000 BK WEBSITES CREATED EVERY MONTH OVER 100 PARTNERS IN OVER 40 COUNTRIES /50
  4. 4. /03 V6 FREEFORM DRAG & DROP A VISUAL EDITOR APP DRIVEN DESIGN CONTENT, POSITIONING & STYLING DATA DRIVEN V7 UNDERPINNING OF HTML / CSS BUSINESS FOCUSED INTRODUCED THE ZONE /50
  5. 5. /04 THE V7 PRODUCT /50
  6. 6. /05 /50
  7. 7. /06 571 WEBSITES CREATED EVERY MINUTE AVERAGE 3 PAGES 74,000,000 PAGES OF CONTENT EVERY MONTH 4 MILLION IMAGES UPLOADED TO BASEKIT IMAGES UPLOADED WORLDWIDE 880 BILLION /50
  8. 8. PART TWO HOW DOES THIS HELP? /07 /50
  9. 9. DESIGNER hey, send over that content and i’ll start the design! hi! just start designing then i’ll add in the content CLIENT content first! design please! /08 /50
  10. 10. /09 YOU DON’T NEED THE CONTENT BEFORE DESIGNING /50
  11. 11. /10 AMAZING DESIGN SMALL AMOUNTS OF CONTENT THAT WILL GROW BETTER CONNECTIVITY BETWEEN YOUR DESIGN AND THE CLIENT EASY TO MAINTAIN CLIENTS CAN MANAGE THEIR CONTENT EVERYONE IS HAPPY! DITCH THE STATIC DESIGN PATTERNS /50
  12. 12. /11 WHAT I’M ABOUT TO SHOW HEALY.ROCKS /50
  13. 13. /12 THE STARTING POINT /50
  14. 14. /13 MINIMAL CONTENT /50
  15. 15. /14 THE FLOATING FOOTER HEALY.ROCKS healy.rocks/footer1 /50
  16. 16. /15 DESIGNER IDEALS vs REALITY HEALY.ROCKS FLEXBOX display: flex; /50
  17. 17. /16 .container { display: flex; } /50
  18. 18. http://caniuse.com/#feat=flexbox /17 /50
  19. 19. /18 THE POWER OF FLEXBOX HEALY.ROCKS hohmoeme about aubsout upsortfolioportfcoolinotact contact /50
  20. 20. /19 THE POWER OF FLEXBOX HEALY.ROCKS display: flex; align-items: center; justify-content: center; /50
  21. 21. /20 THE POWER OF FLEXBOX HEALY.ROCKS http://healy.rocks/columns5 /50
  22. 22. /21 10% IMA20G% ES 70% /50
  23. 23. /22 THE POWER OF FLEXBOX HEALY.ROCKS /50
  24. 24. /23 THE POWER OF FLEXBOX HEALY.ROCKS /50
  25. 25. /24 THE POWER OF FLEXBOX HEALY.ROCKS /50
  26. 26. /25 THE POWER OF FLEXBOX HEALY.ROCKS /50
  27. 27. /26 HEADERS /50
  28. 28. /27 ABOUT HEADERS HEALY.ROCKS AWESOME COMPANY NAME home about us portfolio contact home /51
  29. 29. /28 ABOUT HEADERS HEALY.ROCKS home about contact AWESOME COMPANY NAME home services portfolio /50
  30. 30. /29 ABOUT HEADERS www.healy.rocks AWESOME COMPANY NAME home about us portfolio contact /50
  31. 31. /30 NAVIGATION HEALY.ROCKS /50
  32. 32. /31 LOGOS /50
  33. 33. /32 ABOUT LOGOS HEALY.ROCKS 616 X 324 /50
  34. 34. /33 ABOUT LOGOS HEALY.ROCKS AWESOME COMPANY NAME 616 X 324 /50
  35. 35. /34 ABOUT LOGOS HEALY.ROCKS AWESOME COMPANY 616 X 324 /50
  36. 36. /35 BEST LAYOUT FOR UNKNOWN CONTENT HEALY.ROCKS AWESOME COMPANY home about us portfolio more ▾ /50
  37. 37. /36 NAVIGATION USING FLEX BOX HEALY.ROCKS AWESOME COMPANY home about us portfolio min-width:460px; /50
  38. 38. /37 NAVIGATION USING FLEX BOX HEALY.ROCKS SUPER AWESOME COMPANY home about us portfolio /50
  39. 39. /38 NAVIGATION USING FLEX BOX HEALY.ROCKS SUPER AWESOME COMPANY home about us portfolio services contact /50
  40. 40. /39 NAVIGATION USING FLEX BOX HEALY.ROCKS SUPER AWESOME COMPANY home about us portfolio services contact /50
  41. 41. /40 NAVIGATION USING FLEX BOX HEALY.ROCKS AWESOME COMPANY home about us portfolio /50
  42. 42. /41 NAVIGATION USING FLEX BOX HEALY.ROCKS AWESOME COMPANY home about us portfolio /50
  43. 43. /42 ELEMENT QUERY /50
  44. 44. /43 TYSON MATANICH SMASHING MAGAZINE http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/ /50
  45. 45. .companyname[min-width~="769px"][max-width~="960px"] { text-align:center; } /44 /50
  46. 46. /45 DEMO /50
  47. 47. /46 CONCLUSION /50
  48. 48. /47 1. THINK MINIMAL /50
  49. 49. /48 2. THINK FORWARD /50
  50. 50. /49 3. THINKING BEYOND /50
  51. 51. THANKS! RICHARD HEALY, BASEKIT @RICHARDHEALY @BASEKITDEVS /FIN
  52. 52. ACCREDITATION SOURCES In July 2013, it was estimated that 571 new websites are created every minute. (source: http://goo.gl/7AWpDd) ! 267 babies born a minute (http://goo.gl/qJPfDB) ! 880 Billion photos taken in 2014 (source: http://goo.gl/Be94LV) ! Roughly, 1.8 billion are uploaded and shared via social media every day (source: http://goo.gl/LMg0u5) ! Flexbox usage as of Oct, 2014 (source: http://caniuse.com/#feat=flexbox) ! Images from thinkstock.co.uk ! Special thanks to http://twitter.com/roryvaux for amazing slide design! /SOURCES

×