SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
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 PARTNERS 
IN OVER 40 COUNTRIES 
/50
/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
/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 
UPLOADED TO BASEKIT 
IMAGES UPLOADED WORLDWIDE 880 BILLION 
/50
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 
CLIENT 
content first! 
design please! 
/08 /50
/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 
EASY TO MAINTAIN 
CLIENTS CAN MANAGE THEIR CONTENT 
EVERYONE IS HAPPY! 
DITCH THE STATIC DESIGN PATTERNS 
/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 
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-element-query-polyfill/ 
/50
.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.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

Contenu connexe

Dernier

原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
ydyuyu
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
ayvbos
 
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi EscortsIndian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Monica Sydney
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
F
 
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi EscortsRussian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Monica Sydney
 
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
ydyuyu
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
ayvbos
 
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu DhabiAbu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Monica Sydney
 
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Dernier (20)

原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
 
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime BalliaBallia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
Ballia Escorts Service Girl ^ 9332606886, WhatsApp Anytime Ballia
 
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
 
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi EscortsIndian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
Indian Escort in Abu DHabi 0508644382 Abu Dhabi Escorts
 
一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理一比一原版田纳西大学毕业证如何办理
一比一原版田纳西大学毕业证如何办理
 
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi EscortsRussian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
Russian Escort Abu Dhabi 0503464457 Abu DHabi Escorts
 
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
 
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
哪里办理美国迈阿密大学毕业证(本硕)umiami在读证明存档可查
 
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
Tadepalligudem Escorts Service Girl ^ 9332606886, WhatsApp Anytime Tadepallig...
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
 
Call girls Service in Ajman 0505086370 Ajman call girls
Call girls Service in Ajman 0505086370 Ajman call girlsCall girls Service in Ajman 0505086370 Ajman call girls
Call girls Service in Ajman 0505086370 Ajman call girls
 
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
APNIC Policy Roundup, presented by Sunny Chendi at the 5th ICANN APAC-TWNIC E...
 
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrStory Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
 
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu DhabiAbu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
Abu Dhabi Escorts Service 0508644382 Escorts in Abu Dhabi
 
Best SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency DallasBest SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency Dallas
 
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
20240507 QFM013 Machine Intelligence Reading List April 2024.pdf
 
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
call girls in Anand Vihar (delhi) call me [🔝9953056974🔝] escort service 24X7
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac RoomVip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
 

En vedette

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

En vedette (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Designing for the Unknown

Notes de l'éditeur

  1. Good morning! Founder, oversee technology and design Talking about designing for the unknown
  2. Question! Touched upon designing for the Unknown BaseKit is a online do-it-yourself website builder
  3. 100 partners worldwide 40 countries We’ve been live for 5 years. Network we’ve got 1.5 million websites Trends on how users interact with websites and content
  4. We have a unique problem to solve. Every month 1000s people build their site on CMS’s Many business, cultures, content We are essentially designing for the unknown
  5. Visualise the problem. Imagine the last design you had. How would your design stand up? Across the network we have had templates repurposed 10’000s of times.
  6. How much content ends up online? In July 2013, estimated 571 websites. 267 people born every minute across the global. On average we have 3 pages per website. From 571 websites 74 MILLION pages 4 millions images uploaded. 880 billion taking 2014. 1.8 billion photos shared via social / day
  7. You don’t have 1 theme being repurposed 1000s times Designers of websites are slightly obsessed with content Trend of Content First. Not the real world
  8. You don’t need to know the CONTENT, before you start DESIGNING the site Detach from content. Confidence any content will look good.
  9. In Theme design, we are mainly interested in client content not breaking overall site design Better connectivity between site and content 4th dimensionally, more robust design
  10. So top tips for a Basic Layout Take standard front page design Take about the header and problem not knowing what content goes in there How to solve it healy.rocks
  11. They always bring something - They have a website - They have a FB page But it will be minimal - Text is very hard
  12. You need to design your sites with minimum content in mind. The internal pages of a site are usually the place that suffers from no thought to minimum content.
  13. Browser Support
  14. 616 x 324