Wednesday is here, and so too is our weekly roundup. Links are below, as you might expect, and our tour takes us from color tools, to an image reveal example and beyond. We’ve included a couple articles this week on Design Thinking, which is a design methodology that’s been around since the 60’s, and on the folks who have helped shape our industry. Both should be a nice history lesson that bear nice fruit that’s still useful today.
There’s also a script to help you generate bulk SEO meta descriptions to speed up content work, and a guide to UI and UX work.
If you’ll be at An Event Apart in Boston next week, let us know! Michael will be running around there, and he’d love to say hi and chat for a bit. We’ll be looking to do some rapid fire Q&A stuff with a few people while we’re there as well.
- 3 Super Useful Color Tools for UI Design outlines a few cool resources to help color selection
- Full Image Reveal Effect is a demo showing an interesting CSS+JS technique for showcasing images
- 5 Stages in the Design Thinking Process reviews the tried and true design methodology for human-focused, iterative design
- Reducing the time it takes to write meta descriptions for large websites offers a suggestion for a script to help expedite creating meta descriptions in bulk
- 10 People Who Have Shaped the Web Design Industry looks at the movers and shakers in our industry
- The ‘UI and UX Design’ Pocket Guide (Volume One) breaks down suggestions for folks working in design to help them navigate their career growth
Thanks for joining us on Real Time Overview for Wednesday, June 20th. I’m your host, Michael Fienen on this fantastic Wednesday morning, and I want each and every one of you to go out today and learn about a CSS property you don’t use regularly. That’s your homework, and I’ll be grading you next week.
Did you hear the big news from Drunken UX this week? We just launched a brand new, third part of our series called Build Process. Episode 1 aired on Monday, so if you haven’t heard it already, just let your player keep going on our feed, it should be the next one behind this episode. Build Process is going to focus on interviews with other web professionals, looking at their background, what challenges them, and what advice they have for others. Paul Gilzow was our first guest, and we’ll be bringing you a new one every month.
We talked about color a while back on Real-Time Overview and I want to go back to that topic and specifically to an article by Tom Osborne over at Viget.com. He talks about some color tools that he is using to assist in developing user interfaces.
If you’re anything like me then you’re kind of an idiot when it comes to putting together color palettes, so these tools are designed to help you with putting together schemes to compliment your design. The first one Tom recommends, for instance, is one called Palx. It’s something that helps generate a spectrum of colors based on a starter color that you input.
He also includes a couple other tools that are extremely useful like, ones that helps you with accessible colors and help with detecting things like color contrast when you’re trying to put together a pallet so that you can make sure that users with visual acuity problems can see things as well.
A final tool is designed to help you name your colors so that if you’re working in CSS you can give colors meaningful names instead of grey, and light grey, and medium grey, and then realizing that you need to have another medium grey that’s kind of lighter than light grey but not quite as dark as medium grey.
Go check out his recommendations along with their links at the Viget blog.
Head over to Codrops at Tympanus.net and you can check out a full image reveal effect shared by Mary Lou.
If you’re looking for a creative way to do a full screen reveal of an image, they’ve put together in their tutorial a great place to start for a creative way of showcasing imagery – whether it’s your photography, or designs that you’ve done, or anything that you are trying to include in something like a portfolio.
You can check out their example at Codrops, along with downloading the example files for how to reproduce the effect.
If you’re looking to expand the processes that you use when you’re doing design, head over to the Interaction Design Foundation and check out the article Five Stages in the Design Thinking Process by Rikke Dam and Teo Siang.
Design Thinking is a methodology that designers can use when looking at solving problems in their projects. The methodology itself predates web development by quite some time, finding its roots as far back as the 1960s. This article takes a look at the five steps that are outlined in Design Thinking and breaks them down into chunks to help you understand how to make a human-centered, iterative approach work for your design process.
By its nature, Design Thinking is designed to be a flexible approach that helps a designer figure out what users think about what it is that they’re using. This goes through several processes such as empathizing, defining, ideating, prototyping, and testing – and this process is something that you can repeat over and over to continuously improve the product that you are building.
Their article looks at each one of these steps in short detail to help outline what they mean and what you do during each phase, with the goal of helping you understand how to build a process that provides structure to the work that you’re doing.
Design thinking is just one methodology among many that you can use to apply to the workflow that you use when you’re creating a product. Once you’ve checked out this article, go look into Agile or LEAN and see how those methodologies might mesh with the current workflow that you have. there’s no right or wrong answer in this process but it is important to understand how a methodology can help you work both smarter and faster and produce a better result at the end.
Perhaps more importantly, showing that you understand processes like this can be extremely valuable when it comes time to apply for a job and they ask you questions about how you approach decision making. Whether or not you use Design Thinking is not necessarily the important part – it’s if you can show that you understand how these methodologies can improve that process.
Dam and Siang’s article is available at the Interaction Design Foundation website and provides a great quick look into this extremely important design methodology.
If search engine optimization is more in your wheelhouse, then you might go check out Paul Shapiro’s article at Search Engine Land where he’s posted the article Reducing the Time it Takes to Write Meta Descriptions for Large Websites.
Dealing with large-scale website changes can be extremely labor-intensive, especially if it involves a lot of content. Frequently, we run into pages that have bad or no metadata associated with them at all. In many of these cases the only solution is to manually write out meta descriptions for search engines to pull in.
The problem with this is that the manual labor involved in the writing doesn’t scale well. One of the most common Solutions is to Simply take an excerpt of the first 150 to 300 characters. While this is a solution, it can prove highly ineffective at conveying meaningful information to search engine results.
Paul’s article shares a Python script that you can use that’s designed to help automate some of the process of writing descriptions so that you have something that might not be perfect, but it is something that you could scan and edit much more quickly than trying to write entirely by hand.
It’s not a perfect solution, and it’s certainly not the only solution out there to try and write lots of descriptions all at once in a way that avoids a lot of the manual labor. But it is one approach that you can take a look at it and see if it would fit with a process that you’re using. If nothing else maybe it might inform a process that you’re already trying to build or might have to do in the future.
You can read his explanation and download the script at searchengineland.com
One article that I absolutely couldn’t pass up this week comes from Thomas Laurinavicius via Envato called 10 People Who Have Shaped the Web Design Industry. I’ll admit it, I’m a sucker for a good history lesson. And many of these people still have a lot to teach us about where our industry is going, not just where it came from.
His list includes many names that you are more than certain to be familiar with such as Tim Berners-Lee, Ethan Marcotte, and John Resig. But he also includes names that you may not be as familiar with like Cyan Ta’eed who is one of the co-founders of Envato, and Rachel Andrew, the editor-in-chief at Smashing Magazine.
It’s great to look at the history of some of these folks not just to understand where we’ve come from, but to help build new tools that will take us forward. His list also goes on to include a number of honorable mentions of folks that maybe don’t make his top 10, but are still incredibly important to the work that we do.
Particularly if you’re just getting started, these individuals can provide a great resource for a place to start with who you want to follow, and listen to, and read. Whether you’re looking at their articles or books, their conference presentations or their podcasts, these are all people that anybody doing web work can learn something from.
Do you disagree with his list? Who do you think are the top influencers in the web design industry? We’d love to hear who you find most influential and important to our field. Let us know by shooting us a comment at our show notes, or hit us up on Twitter or Facebook.
Our final piece of the day is also our longest, but you’re not going to want to miss what it has to offer. Marc Andrew has put together the UI and UX Design Pocket Guide (Volume 1) at Design + Sketch.
Marc’s guide is a list of 11 tips and tricks to help people starting out in the design field to make it a little bit more accessible as they’re starting out. He includes valuable little nuggets like emphasizing that your creativity is more important than the tools that you choose and that you can make yourself better by not constantly trying to compare yourself to others.
The piece tries to focus very much on how you work and how you value yourself, rather than looking at the specifics of how you get a design done.
Thanks for listening to Real Time Overview, I’m Michael Fienen. If you want links to any of the stories in today’s episode, be sure to swing by our website at drunkenux.com, they’ll all be linked in the shownotes there. Stay tuned for a new episode of the Drunken UX Podcast next week where we’ll be doing an introduction to functional CSS.
And before I forget, I’ll be at An Event Apart in Boston next week. If you’ll be there, give us yell on Facebook or Twitter at /drunkenux and let us know. I’d love to meet any listeners and we’ll be looking for some folks to do a little rapid-fire Q&A with while we’re there.
Until next time, keep your personas close, and your users closer.