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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…