Talk Web Design 2016: Creativity, code and camaraderie
Another year, another excellent #TalkWebDesign. All photos by Prisca Schmarsow via Flickr.
Talk Web Design, for those hearing about it for the first time, is an annual one-day conference on all things web-related. Its goal is to give students a free opportunity to experience talks and demos by leading figures in the web industry (non-students are also welcome to attend of course). The event, now in its fifth year, is made possible with the backing of the Department of Creative Professions and Digital Arts at the University of Greenwich, and is organised by UoG senior lecturer David Watson. Thank you, David, for doing this for us!
This was my third year of attending the event, and the lineup was nothing short of excellent. In order of appearance, we had Kathleen Corr, Peter Gasston, Mike Brondbjerg, Rachel Andrew, Carolina Soto, Richard Rutter, Ben Foxall, Andrew Clarke and Brendan Dawes. I’d seen some of them speak before, others I was excited to hear for the first time.
Before I go into the highlights I noted down, let me say this. I had to pause for a moment to come up with what that third ‘c’ in the title should be (because I wanted a cool-sounding title). But as soon as I wrote it I realised that it’s actually the most important ‘c’ out of the three and deserves a special mention here. All these wonderful speakers gave their time and knowledge for free, to us in the audience, to help us achieve our goals as designers or developers, and that is a wonderful thing to have in the design/dev community. We can only stand to gain from this and I hope the community will keep going in this direction.
That said, on to the actual talks! These are short summaries of main points; I’ve included links to more information where possible for those interested in finding out more.
Kathleen gave us an insight into the life of a product manager at Kingdom, a digital agency, and the process of building an educational app from concept to completion. She mentioned common pitfalls, such as designing exactly what the client requested without examining what they were trying to achieve with that design first, and considering alternative approaches.
The importance of content-first design was a recurring emphasis in the presentation, as trying to retrofit real content into a design that had only been created based on assumptions, can be hugely problematic and can result in wasted time and delays to the project. As designers, of course we know this and hope for this, but it can be difficult to get real content from clients so far in advance, so standardising this approach is a slower process.
Peter’s talk discussed the ways the Web itself is in danger of being marginalised by the multitude of apps and in-app ‘instant browsing’ experiences used by services/platforms that keep the user within that platform instead of letting them exit into a web browser.
For example, Facebook has implemented a way to read articles within its app, with a design that basically makes the user go back to the Facebook app after they’ve read an article.
The thing is: monetisation is the most important to these services, which is based on user numbers, so the more users they can keep within their ecosystem the better it is for them. Some apps, like Instagram, don’t even highlight external URLs; the only easily clickable hyperlinks that exist inside the app lead to other places within that same app.
The reason many users appear to be moving away from browsers, and favour reading and browsing in apps is most likely the far snappier experience offered by apps. Performance of web pages is too often heavily impacted by third-party advertising, which is absent from apps.
The web, however, is the largest platform that’s not owned by anyone, and this is hugely important, if you think about the potential consequences of millions of people equating the web with Facebook, as it actually often happens in developing countries where data is expensive and Facebook is a.) fast, b.) comes pre-loaded on cheap phones!
At the end of his talk, Peter highlighted the Web as being the grout that connects all the shiny tiles (aka apps) together — its importance therefore will never diminish.
This talk was much more visual than verbal, but it was probably the most inspiring for me personally. Mike takes various types of data (which could be numbers, pictures, words, etc) and creates systems for drawing based on that data. It’s an extremely interesting combination of coding, problem solving and art/illustration.
Mike mentioned p5.js, Three.js and OpenCV as libraries he’s used for his various projects: Dead Presidents, Generative Still Life, and branding for Volanti Imaging which is animated based on live weather data. He recommended parameterising everything so you can try various tweaks, and to save happy accidents as you never know when they will be handy as inspiration at a later date. This is true for any experimental project really!
CSS Grids are still an experimental feature, but the spec has been in the works for years now, and is hopefully not too far away from being completed — I personally cannot wait! They will revolutionise the way we create layouts, and will do away with the need for complicated frameworks such as Bootstrap (because Bootstrap adds a lot of unnecessary bloat to your code). Rachel has been involved in this work for years, and gave us a detailed walkthrough of how the spec currently works with lots of live code examples.
A few cool highlights of the new features CSS grids will offer (if you’ve done front-end coding before, you will probably squeal!)
- you can name grid areas and refer to them when defining where content starts and ends
- you can mix up your row spans and column spans in any combination you like
- you can pull elements out of the order of the source code (which should still remain semantic and accessible, of course) and arrange them in any way you like on the page thanks to the parameters available
- grids can be set to backfill gaps in the grid when set to auto-flow, for example in an image gallery where you have mixed portrait and landscape images and want to ensure the full width of the window is used by the content
To use grids you’ll need to enable the experimental features in your browser, but if you do that you can actually use the code already to quickly build site prototypes and alternate layouts. I will be trying this for sure — a huge thank you to Rachel for her super informative and useful talk and accompanying slides and resources which are available on her website.
Carolina works as a contractor and she gave many excellent insights into life as a contractor, ways to make your job hunting more efficient, and examples of good and bad experiences she’s had with this process. This talk was more aimed at students than those of us who have already hunted for jobs many times, so I didn’t make detailed notes, but if you have any questions about this, I’m sure she will be happy to send you her presentation.
Richard’s talk was a case study of the redesign of the Royal Borough of Kensington and Chelsea’s website, done by the agency Clearleft in 2013. It was extremely useful to hear about how Clearleft approached the problem and I highly recommend reading the written case study available on their website — it does a far better job of explaining it than I could here in a few sentences!
In his third year as a speaker at TWD (and wearing the same T-shirt as he did on the previous two occasions), Ben gave a talk about how to extract and visualise data from a running app he’d worked on. Sadly, most of it was way over my head, but there was a message at the end that I thought was a very good point: having and visualising data is all well and good in itself, but in the end the best outcome is if we end up understanding more about the human element behind the data as a result. For example, Ben noted that by analysing his running patterns he could identify a period when he was going through a hard time, and the running helped him through that.
He then showed their work in progress redesign of the WWF website, using a grid designed not to have all its columns filled with content and instead use negative space to draw attention to certain areas in particular. They are using a different grid for advertising inside content areas too, to make the ads stand out much better from the content. He brought up comic books as a good example of using relatively predictable grid patterns for ‘normal’ content but then breaking out of the grid for key scenes/content for maximum impact.
He’s currently in the process of redesigning the Smashing Magazine website as well, and he’s very kindly shared a work in progress live prototype on his website — check it out! They named various grid layout combinations after famous photographers to give the teams that will be working with the code a common language to use when referring to certain layouts.
Brendan is good with computers. At least that’s what his mum says when asked about her son’s job. In reality he’s good not only with computers but 3D printers, wires, and a whole lot else. He likes to come up with random concepts that then can be picked up by clients and developed further. He presented a variety of his work, notably The Happiness Machine that prints out positive thoughts; uniquely generated characters based on your Twitter account usage and stats; and data viz of tweets in certain UK cities during a set period of time in order to create beautiful artwork for EE.
After all these talks I felt very inspired to go ahead and create more projects in an afternoon or so, to try new things and play around for the fun of it. This is why I think it’s important to go to conferences, even if you’re already confident and good at what you do; you never know what snippet of a talk will inspire you to be even better. I will be trying out some generative art and CSS grids as soon as I can find the time!