designing for the unknown
DESCRIPTION
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.TRANSCRIPT
![Page 1: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/1.jpg)
DESIGNING
UNKNOWN
RICHARD HEALY, BASEKIT @RICHARDHEALY
for the
![Page 2: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/2.jpg)
BASEKITPART ONE
/01 /50
![Page 3: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/3.jpg)
/02
5 YEARS FOUNDED 2009
40,000 BK WEBSITES CREATED EVERY MONTH
1.5 MILLIONBASEKIT WEBSITES CREATED
OVER 100 PARTNERS IN OVER 40 COUNTRIES
/50
![Page 4: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/4.jpg)
/03
V6
FREEFORM DRAG & DROP
A VISUAL EDITOR
APP DRIVEN DESIGN
CONTENT, POSITIONING & STYLING
DATA DRIVEN
UNDERPINNING OF HTML / CSS
BUSINESS FOCUSED
INTRODUCED THE ZONE
V7
/50
![Page 5: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/5.jpg)
/04
THE V7 PRODUCT/50
![Page 6: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/6.jpg)
/05 /50
![Page 7: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/7.jpg)
/06
IMAGES UPLOADED WORLDWIDE
880 BILLION
571 WEBSITES CREATED EVERY MINUTE
4 MILLION IMAGES UPLOADED TO BASEKIT
AVERAGE 3 PAGES 74,000,000 PAGES OF CONTENT EVERY MONTH
/50
![Page 8: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/8.jpg)
HOW DOES THIS HELP?PART TWO
/07 /50
![Page 9: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/9.jpg)
DESIGNER
CLIENT
hey, send over that content and i’ll start the design!
hi! just start designing then i’ll add in the content
content first!design please!
/08 /50
![Page 10: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/10.jpg)
/09
YOU DON’T NEED THE CONTENT BEFORE
DESIGNING/50
![Page 11: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/11.jpg)
/10
EVERYONE IS HAPPY! DITCH THE STATIC DESIGN PATTERNS
EASY TO MAINTAIN CLIENTS CAN MANAGE THEIR CONTENT
BETTER CONNECTIVITY BETWEEN YOUR DESIGN AND THE CLIENT
AMAZING DESIGN SMALL AMOUNTS OF CONTENT THAT WILL GROW
/50
![Page 12: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/12.jpg)
/11
WHAT I’M ABOUT TO SHOW HEALY.ROCKS
/50
![Page 13: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/13.jpg)
/12
THE STARTING POINT
/50
![Page 14: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/14.jpg)
/13
MINIMAL CONTENT
/50
![Page 15: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/15.jpg)
/14
THE FLOATING FOOTER HEALY.ROCKS
healy.rocks/footer1/50
![Page 16: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/16.jpg)
/15
DESIGNER IDEALS vs REALITY HEALY.ROCKS
FLEXBOXdisplay: flex;
/50
![Page 17: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/17.jpg)
/16
.container { display: flex; }
/50
![Page 19: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/19.jpg)
/18
THE POWER OF FLEXBOX HEALY.ROCKS
home about us portfolio contacthome about us portfolio contacthome about us portfolio contact
/50
![Page 20: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/20.jpg)
/19
THE POWER OF FLEXBOX HEALY.ROCKS
display: flex; align-items: center ;
justify-content: center ;
/50
![Page 22: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/22.jpg)
/21
IMAGES 70%20%10%
/50
![Page 23: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/23.jpg)
/22
THE POWER OF FLEXBOX HEALY.ROCKS
/50
![Page 24: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/24.jpg)
/23
THE POWER OF FLEXBOX HEALY.ROCKS
/50
![Page 25: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/25.jpg)
/24
THE POWER OF FLEXBOX HEALY.ROCKS
/50
![Page 26: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/26.jpg)
/25
THE POWER OF FLEXBOX HEALY.ROCKS
/50
![Page 27: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/27.jpg)
/26
HEADERS
/50
![Page 28: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/28.jpg)
/27
ABOUT HEADERS HEALY.ROCKS
AWESOME COMPANY NAME
home about us portfolio contact
AWESOME COMPANY NAME
home
/51
![Page 29: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/29.jpg)
/28
ABOUT HEADERS HEALY.ROCKS
AWESOME COMPANY NAME homeAWESOME COMPANY NAMEabouthome contact
portfolioservices
/50
![Page 30: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/30.jpg)
/29
ABOUT HEADERS www.healy.rocks
AWESOME COMPANY NAME
home about us portfolio contact
/50
![Page 31: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/31.jpg)
/30
NAVIGATION HEALY.ROCKS
/50
![Page 32: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/32.jpg)
/31
LOGOS
/50
![Page 33: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/33.jpg)
/32
ABOUT LOGOS HEALY.ROCKS
616 X 324
/50
![Page 34: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/34.jpg)
/33
ABOUT LOGOS HEALY.ROCKS
AWESOME COMPANY NAME
616 X 324/50
![Page 35: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/35.jpg)
/34
ABOUT LOGOS HEALY.ROCKS
AWESOME COMPANY
616 X 324/50
![Page 36: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/36.jpg)
/35
BEST LAYOUT FOR UNKNOWN CONTENT HEALY.ROCKS
home about us portfolio more ▾
AWESOME COMPANY
/50
![Page 37: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/37.jpg)
/36
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
min-width:460px;
/50
![Page 38: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/38.jpg)
/37
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioSUPER AWESOME COMPANY
/50
![Page 39: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/39.jpg)
/38
NAVIGATION USING FLEX BOX HEALY.ROCKS
SUPER AWESOME COMPANYhome about us portfolio services contact
/50
![Page 40: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/40.jpg)
/39
NAVIGATION USING FLEX BOX HEALY.ROCKS
SUPER AWESOME COMPANYhome about us portfolio services contact
/50
![Page 41: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/41.jpg)
/40
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
/50
![Page 42: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/42.jpg)
/41
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
/50
![Page 43: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/43.jpg)
/42
ELEMENT QUERY
/50
![Page 44: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/44.jpg)
/43
TYSON MATANICH SMASHING MAGAZINE
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
/50
![Page 45: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/45.jpg)
/44
.companyname[min-width~="769px"][max-width~="960px"] { text-align:center; }
/50
![Page 46: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/46.jpg)
/45
DEMO
/50
![Page 47: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/47.jpg)
/46
CONCLUSION
/50
![Page 48: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/48.jpg)
/47
1. THINK MINIMAL
/50
![Page 49: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/49.jpg)
/48
2. THINK FORWARD
/50
![Page 50: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/50.jpg)
/49
3. THINKING BEYOND
/50
![Page 51: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/51.jpg)
THANKS!
RICHARD HEALY, BASEKIT @RICHARDHEALY @BASEKITDEVS
/FIN
![Page 52: Designing for the Unknown](https://reader033.vdocuments.mx/reader033/viewer/2022052906/558aa2f1d8b42a996a8b464c/html5/thumbnails/52.jpg)
/SOURCES
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!