7 Design Challenges to Sharpen Your Skills

Default avatar.
November 02, 2017
7 Design Challenges to Sharpen Your Skills.
Once in a while, I just have to try something new. Maybe I feel my skills are slipping. Maybe I want to jumpstart the neurons responsible for my creativity. Maybe I’m bored. There are a lot of good reasons to take on a design challenge, really. Here are some more: You can add conceptual designs to your portfolio. You can blog about your experiences, and advertise your skills in doing so. You can take on a design challenge with other designer friends, and perhaps compete. You can gain a greater understanding of the technology you use. The point is to do something differently from the way you usually do things. Change for its own sake isn’t always advisable, but trying new things is how we grow as designers, and as people. Just maybe don’t do any of these challenges on a client’s site unless you’re absolutely sure they’ll like it.

1. Try to Build Something New

This is actually my personal go-to challenge. I try to build something—usually something to do with layout—that I haven’t built before. It could be an effective and accessible horizontally-scrolling interface, a three-column site I actually like, or a full-screen responsive background image with absolute positioning. [pullquote]you get to try out newer CSS modules…without worrying too much about cross-browser compatibility[/pullquote] This is a challenge where you get to try out newer CSS modules, or techniques you might not have thought of before, without worrying too much about cross-browser compatibility or other issues like that.

2. Change Your Colors

I know that I personally am always tempted to stick with what I know works, as far as colors go. I love my muted shades of colors, my grays, my de-saturated greens and blues, and so on. Unless you’re required to follow a specific style or branding guide, it can be easy to fall back on what you know works. Well, get right on out of your comfort zone! Build a site with a color scheme you wouldn’t normally go for. For me, that would be using more bright, and bold colors. I’d have to turn up the saturation in general. For you, you might consider a dark layout, if you usually do light ones. Use calmer colors, if you’re prone to going bright and bold. Many of us, myself included, aren’t using enough contrast in our designs. Try adding more. Heck, try a design that’s totally just black and white, and make it work.

3. Copy a Complicated Layout

Okay, don’t copy someone else’s site exactly. Just find a site with a nice, complex layout or design, and copy it without looking at the source. Build the thing up from scratch by examining the major layout elements, and figuring out how to do it yourself. Don’t use this for a live site, but as a simple HTML/CSS/JS exercise. [pullquote]the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions[/pullquote] You could choose to copy one of those fancy, experimental-looking sites to see if you can manage the same feat. Or you could copy the layout from a large retail site, to see figure out how you would manage that amount of HTML and CSS in a practical way. Copy a news site to see how they handle the scaling of large amounts of text and images in a responsive way. Remember, the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions.

4. Design and/or Code a Site Using New Tools

If you’re used to Foundation, try Bootstrap, or a lesser-known framework. Try a different pre-processor. Try a different CMS. Try a different file manager or text editor. If you’re a programmer and/or like pain, drop your favorite JS framework, and try another. Obviously, if you want to go in-depth this would be one of the longer challenges, but it doesn’t have to take too long to learn the operating principles of new tools. The key is not to necessarily change everything about your workflow, but to expose yourself to new and potentially better ideas.

5. Try Out a New Methodology

Similar to the last entry, you can spend an afternoon or two trying a totally different way of working. If you’re primarily a graphics specialist, try looking at how others start and fill out their mockups. Look at how others organize their layers. See if you can learn something from them. Or you might look into a full-fledged design methodology like Atomic Design. On the front-end development side, you might try out a new CSS methodology. Hongkiat has a good overview of a few of the more popular ways of organizing your CSS.

6. Refine an Old Design

When I look at my older design work, my most common emotions are frustration, and a small amount of disgust. In that state, I have often decided to go for a full redesign. If you’ve been doing this for some time, chances are that your old work is built on solid principles. It just needs to be updated and refined. [pullquote]apply new knowledge to old design instead of burning it all down and starting over[/pullquote] Take an old design, and update it without changing its core elements. Maybe keep the same layout, but update the spacing of elements. Keep the chosen typefaces, but update the text styles to better reflect your knowledge of typography. Keep the chosen colors, but make better use of them. Just see what happens when you apply new knowledge to old design, instead of burning it all down and starting over.

7. Follow a Tutorial (the Hard Way)

Tutorials are often a wealth of information, even if you’ve been at this for some time. Don’t copy and paste the code. Find a good, long tutorial, and type every line of example code out yourself. Follow every step in Photoshop carefully. Observe how everything changes as each piece of the puzzle is added in. If there’s a bit you don’t understand, Google it until you do. The challenge here is not one of creativity, but of understanding…and maybe endurance.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…