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
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
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…
By WDD Staff