Toronto WordCamp 2018 site design
The 2018 Toronto WordCamp site was redesigned with some visual and esthetic touch-ups to facilitate the upcoming WordCamp on December 1st.
The redesign process included:
- Theme – we are using the WordCamp-Base theme
- Images – use of local urban images of Toronto from unsplash
- Colors: A 2 color Gradient color scheme from light blue to purple (#511c59 to #3fc7f2). These colors are also used throughout the site for highlights, hover effects, headings etc…
- Typography: use of google sans-serif fonts: Montserrat and Lato
- Layout: the homepage facilitates 4 cards for the main call to action. Today we are looking for sponsors, volunteers and completion of the planning survey, down the road these cards will be updated to Schedule, Venue, Speakers, After Party, etc..
- Icons: The icon set was taken and forked from the open source WordCamp design kit . This kit is an excellent set of resources for any WordCamp.
Also, signage was created that will be used at the venue to help people get around.
Home Page ‘Hero’ image with the Toronto skyline, overlayed with branded colors
Cards with urban images and icons promoting different areas of the site
Signage for the WP Toronto meetup which will be updated to the WordCamp
dan, 
Alex Sirota, and 
Andy McIlwain 3:45 pm on August 28, 2018 Permalink |
Super slick! This is great, Dan. QQ: On the site, are you using a gradient “filter” over top of the Toronto images? In other words, could we periodically replace the photos without fussing with the gradient?
dan 3:47 pm on August 28, 2018 Permalink |
Thanks Andy!
The footer is with a gradient CSS, the main image and the cards no. I guess for the cards I can do that, but the Hero image is Hard coded into the CSS so it would need updating the css.
But let me think about it and find a solution…
😉
Andy McIlwain 3:51 pm on August 28, 2018 Permalink |
FWIW I’m doing something similar on WPToronto (background image on parent container, then the rgb colour fill on the child container, then the logo asset). Makes it a bit easier to adjust on the fly.
For the cards: I noticed the text is embedded in the image instead of overlaying with HTML/CSS. Is there any way for us to do that, or nah? (I know the camp themes can be really finicky.)
dan 4:18 pm on August 28, 2018 Permalink |
Finicky in deed, with the limited tools we have (widgets) it probably can be done, but I will have to see if I have the resources. I will prepare a set of cards (based on the needs) which will be ready in the media library to use.
Alex Sirota 8:24 am on August 30, 2018 Permalink |
This is fantastic Dan. Great work.
You know I like the image too that was used back from 2015. It’s Gutenberg enough and works well.
Let’s keep working on this design aesthetic.
A note : in the mobile view do any of the cards render? I didn’t see them.
dan 9:31 am on August 30, 2018 Permalink |
Thanks Alex. Looking forward we can use this look and feel for other assets in WC and TO meetups.
I disabled the cards in mobile view as they were filling up lots of space and pushing down the content.Do you feel they are needed in mobile view too?