As I explained in my last post, I attended a design conference this week called An Event Apart in Alexandria, VA. An Event Apart is a 2 day conference with 6 speakers per day, otherwise known as “The design conference for people who make websites”.
I wanted to recap one specific presentation by Jen Simmons, Designer Advocate at Mozilla. Jen, for a living, advocates for web standards and researches the future of web (basically). She also does talks pretty frequently and hosts a podcast called The Web Ahead.
Here are my 2 major takeaways from her talk:
01. Our medium is not done.
The design of web pages have evolved drastically over the last couple of decades. We started at a place where no one really knew what websites were, what they could do, and what the point was. These websites were extremely basic HTML sites.
Then people started to figure out HTML and all of the cool stuff we could do with it (flashback to me in middle school with my super hip Myspace page). This was also the introduction of Flash, which gave people a new creative freedom. Think rainbow gradient text, table-based layouts, marquees and not-so-subtle drop shadows. It was ugly, but it was new and it was exciting.
In the early 2000s, people started using this newly supported shiny thing called CSS (ooooh) and this allowed for a separation of content and design. Eventually JavaScript and jQuery were introduced into the web world and – fast forward to now.
Design and the web are always evolving and websites today are a lot different then they were even just a couple of years ago. Oh, and mobile web is also a really big thing now so we have to build out our websites responsively. With websites today, there’s a whole lot more thinking and planning involved in order to organize content in the most efficient way possible for the end customer.
That being said, we don’t have to design websites the way that other people are designing them. We don’t have to line things up with grid if we don’t want to. We can be more creative than that. We don’t have all of the answers, so why not design a website that tells its story through a fun, asymmetrical format? Think magazine layouts. If you can mock it up, it can be built out on the web.
02. We should be designing exactly what we see on the screen.
On any given day, I’m looking at sites on an iPhone 7, iPad Pro, 13″ Macbook Air, and a 27″ iMac. When I’m designing website pages, I’m starting with a 1400pt x 1024pt artboard and stretching it vertically until I’m finished with my design.
“We need to design through a viewport. How do things look as they scroll into view?” – Jen Simmons
What we need to be doing is designing things through a viewport. This is what videographers and animators do on a regular basis – they storyboard. We, as designers should be storyboarding and designing exactly what’s on the screen at any given time and any given device.
Viewport responsibility is so important, and it shouldn’t only be applied to the homepage either. You want to make an impression no matter which page the customer stumbles upon. You are curating a conscious experience.
Anyway, Jen Simmons is really brilliant when it comes to CSS Grid and layout and public speaking. I really enjoyed her talk and I’d recommend following her on Twitter and keeping up with her experiments.
On Monday and Tuesday I attended An Event Apart DC for the first time (which was actually in Alexandria, VA) – a 2 day conference with 6 speakers per day, or as the branded dixie cups described, “The design conference for people who make websites”.
It was me, my iPad (and Apple Pencil, duh), the ACS Fairfax team, and a huge room full of designers and developers from all over the place with a variety of experience levels and punny t-shirts. I felt small, but excited.
Day 1 of the event featured Jeffrey Zeldman, co-founder of the event, Stephanie Hay, Daniel Burka, Dan Mall, Rachel Andrew, and Jen Simmons. Day 2 featured Val Head, Jason Grigsby, Una Kravets, Derek Featherstone, Eric Meyer, and Gerry McGovern. The speakers were super great and by the end of it, I no longer felt small. I had a lot to go home and think about.
Here are the 10 takeaways I wanted to share:
01. Research is super important.
Just because you like a website that matches the category of the site you’re creating doesn’t mean your site should look like that. You may be imitating an anti-user website. Research is the easiest path to creating the best website for the needs of the customer.
02. Content defines structure, not the other way around.
We should be storytelling before the design even starts – design is bringing the story to life. Designing for understanding boosts business AND emotion and that should be your #1 goal.
“Starting with the content, we understand the story before creating the experience that leads us there.” – Stephanie Hay
03. Yes, designers need to know how to code.
If you’re a designer that doesn’t know how to code, it’s not the end of the world (yet). At the very least, you should teach yourself CSS and JSON and you’ll make your developer’s life so much easier.
04. Asymmetry is cool.
When it comes to websites, you don’t HAVE to line things up with a grid. Design has the flexibility for our creative freedom and CSS Grid allows for this flexibility on the web. It is important, however, to be designing things through a device’s viewport rather than the full picture. Think storyboarding.
05. CSS is flexible too.
When it comes to flexibility, you don’t need to stick to % and px or ems as your units. Vmin, vh, vw, max-content, min-content, minmax, and fr take away most of the thinking and math involved with building the perfect grid. If you haven’t used these before, just start experimenting.
06. Animation really does make your website a lot cooler.
You can build an animation into your website with CSS, JS, SVG, or a combination of the three, and it’s not as difficult as it may seem. Keyframes are reusable, JS animation libraries already exist for you to use, and there are plenty of tools you can find online to help you.
07. Image optimization is a team problem.
If your site needs a page loader, your site is too slow and needs to be better optimized. It’s not up to the client to provide you with images that are optimized for web – that’s your job.
08. Eventually it’ll become second nature.
There are so many simple ways (and tools) to optimize your images for web. B&W images are smaller files, so use CSS Blend Modes to your advantage. If you subtly blur the unimportant parts of an image it’ll save a ton of image space (wow !!).
Access to information is a human right. By ignoring performance, our sites prevent many in the world from exercising that right. – Una Kravets
09. Compliance is not the goal.
Our goal is for people to be able to use the stuff we make (otherwise, what’s the point?). There are so many disabilities in the world and it’s important that no one is excluded. Keyboard issues, image/media issues, and form issues are the 3 most common.
10. It’s all about the customer.
With usability measurement sessions, measure from the point of view of the customer, not yourself and not the client. Testing with 3-8 people can identify the problem, testing with 13-18 can put a % number on the problem.
By the end of the 2nd speaker, my creative juices were flowing flooding and I just wanted to start making and tweaking. The whole time I just kept thinking, “good thing I didn’t bring my laptop”. Instead I took advantage of all of the free snacks and coffee, soaked up as much information as I possibly could in 2 days, and had an incredible experience at An Event Apart 2017.
About 3.5 weeks ago I decided it was time to be proactive about a tattoo I'd wanted for years now.
I've had anxiety for basically my entire life and for the last couple of years it's been affecting my physical health rather than my mental health. When I'm stressed, in my mind I'm like "everything is fine" but then my chest gets uncomfortably tight and my breathing gets more difficult and more recently I've gotten stress induced stomach ulcers (weird, right?) and other awful stomach issues. I wanted to have a permanent symbol of peace of mind and serenity on my spine to remind myself that even when my body goes whack, I'm in control and everything is going to work itself out.
I drew up a mandala based on two henna designs I fell in love with and snagged a spot with John F. Garancheski III a DAY after contacting him (which is literally a miracle because he's SO talented so he's always booked). God works his magic in crazy ways and I'm just so happy with how my mandala turned out and I'm so happy I went through with this. 🙌🏼
New #applepencil got me thinking I'm a painter again 😂🖌 But for real if you're thinking about getting the Apple Pencil or even if you haven't thought about it yet it's amazing and worth every penny
Leonardo Da Vinci said, “every painter should begin with a wash of black on their canvas, because everything in nature is dark except for where it’s exposed by light.”
tangentwithtanner
germansingergirl
janainaart
snowghoul
2087
