What does Gutenberg mean for design?
Gutenberg has been creeping up for a long time and now it’s coming for us all.
Most of the initial discussion in the community has revolved around development and usability issues. As it gets ready to launch we’re going to have to establish how we design for it, both in terms of the practical solutions we need immediately, and what it could mean for how we view our work in the long term.
* What are the features our new designs are going to have to accommodate, and for that matter what about our old ones?
* Is there such a thing as too much flexibility? How can Gutenberg help us and our clients to create better designs together?
* What does the introduction of Gutenberg suggest to us about how we should approach design in the future?
Hero CSS blends, custom backgrounds and responsive typography in WordPress with Advanced Custom Fields
I’ve been using Advanced Custom Fields to bring a little bit of Photoshop-esque control to images in WordPress, creating layered background images that incorporate user-switchable blend modes, background colours and opacity (amongst other things) and would love to share this all in a lightning talk.
A little more depth…
Over the last year or so I’ve been experimenting with Responsive Typography (CSS Locks and Viewport width), Flexbox and CSS3 properties such as blend modes, clipping paths, multiple background images and rgb(a) to create images that are more akin to album artwork, magazine and flyer layouts but in the browser. I’ve been using Advanced Custom Fields to output and control all of this and I’d love to able to share these techniques and some of the artwork I’ve been able to create and re-create recently.
I thought demonstrating how to incorporate all of these into a hero image would be quite cool (hence the slightly rubbish title – can I change this?!) The PHP required to use ACF to control these elements is really straightforward, the CSS relatively straightforward and well supported too. Essentially I’d go through how to set everything up (custom fields, PHP snippets etc), how to blend images over patterns (using Photoshop stalwarts such as multiply, color-dodge, luminosity and the like), then how to add textural elements and incorporate responsive typography into a custom header controlled using Advanced Custom Fields. It sounds a lot but isn’t, hopefully it would just be really inspiring! I’ll put a GitHub repo together to support this and will also be publishing blog posts to walk people through all this after the talk. I’d be more than happy to do a workshop of sorts on this too.
I’ve attached a link to a GitHub repo which contains my boilerplate theme that incorporates some of these ideas into it (header.php features the PHP that controls the ACF / CSS blend mode functions) and I’ve also attached a link to a page (and site) that is still very much in beta that features screenshots of artwork I recreated recently using many of the techniques above. I’m sorry I can’t share a demo of talk as such right now – I only had my arm twisted by someone at WordUp Brighton last week to apply to WordCamp London having shown them some of the work I’d done on this. I plan to do this as a talk at WordUp Brighton next month and will be blogging about the creation of the Blue Note replica sleeves soon so should have plenty of content for you to see if you’d require (or like) this soon.
Repo with ACF / PHP demo code in:
https://github.com/stevehoneyman/Boilerplate/blob/master/header.php
Layouts:
http://stevehoneyman.co.uk/project/
Empathy for Introverts
If you want to build websites that people love, you need to understand those people. But what happens if you’re just not a people person?
Don’t worry: empathy is a skill that anyone can learn. It just takes a little practise. Approaching design from an inclusive perspective has lead to some of the most innovative designs we use every day, while a lack of empathy can lead to catastrophic failures. Let’s learn how to see diversity and disability as opportunities—not obstacles.
By putting ourselves in our users’ shoes, we can make the web a better place for everyone.