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
DESIGNING
UNKNOWN
RICHARD HEALY, BASEKIT @RICHARDHEALY
for the
BASEKITPART ONE
/01 /50
/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
/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
/04
THE V7 PRODUCT/50
/05 /50
/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
HOW DOES THIS HELP?PART TWO
/07 /50
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
/09
YOU DON’T NEED THE CONTENT BEFORE
DESIGNING/50
/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
/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
FLEXBOXdisplay: flex;
/50
/16
.container { display: flex; }
/50
/18
THE POWER OF FLEXBOX HEALY.ROCKS
home about us portfolio contacthome about us portfolio contacthome about us portfolio contact
/50
/19
THE POWER OF FLEXBOX HEALY.ROCKS
display: flex; align-items: center ;
justify-content: center ;
/50
/21
IMAGES 70%20%10%
/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
AWESOME COMPANY NAME
home
/51
/28
ABOUT HEADERS HEALY.ROCKS
AWESOME COMPANY NAME homeAWESOME COMPANY NAMEabouthome contact
portfolioservices
/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
home about us portfolio more ▾
AWESOME COMPANY
/50
/36
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
min-width:460px;
/50
/37
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioSUPER AWESOME COMPANY
/50
/38
NAVIGATION USING FLEX BOX HEALY.ROCKS
SUPER AWESOME COMPANYhome about us portfolio services contact
/50
/39
NAVIGATION USING FLEX BOX HEALY.ROCKS
SUPER AWESOME COMPANYhome about us portfolio services contact
/50
/40
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
/50
/41
NAVIGATION USING FLEX BOX HEALY.ROCKS
home about us portfolioAWESOME COMPANY
/50
/42
ELEMENT QUERY
/50
/43
TYSON MATANICH SMASHING MAGAZINE
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
/50
/44
.companyname[min-width~="769px"][max-width~="960px"] { text-align:center; }
/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
/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!