Wait, I designed that?! #creativecringe
Looking back on past design projects, or any project for that matter, can sometimes seem like a nightmare… Decisions you thought were ideal at the moment now seem like terrible mistakes and really makes you wonder what you were thinking. Here I am, about to share a project that I designed almost a year ago.
At the time, I was so proud of what I had created and thought that it was the best project yet, but that’s probably also because it was my first time experimenting more with the Creative Cloud and InVision so I wasn’t fully aware of what was I was capable of… For this project, I redesigned a website interface for three displays: mobile, tablet, and desktop for a non-profit art organization called Bad Dog Arts, located in downtown Salt Lake City. Although I had learned a lot about design principles that I had no prior knowledge about in class, I wasn’t able to successfully implement what I had learned in the classroom to my work. Don’t worry, I know better now! Looking back now, even though I still have a lot to learn about design, there are things from this project that I would definitely change.
For some people who may be reading this, you may be thinking to yourself “Well, why would I be cringing at my past work when I already know that it’s pixel-perfect?” Honestly, it’s a good thing to be proud of your work but everyone has done a project in the past that they would do differently now. If you aren’t experiencing that creative cringe, there’s something wrong — you’re probably missing out on pushing yourself towards improving.
Make glorious mistakes
It’s okay to make mistakes, especially glorious mistakes that you can learn from. Sometimes when we’re working on a project, it’s hard to see that the design decisions that you make in the moment aren’t so great. After “completing” a project, often times you’ll find yourself six months or even sooner down the line, cringing because within that time, you’ve grown as a designer. You should always have the mindset to want to refine your work; you should constantly look for ways to improve and to keep an open mind that it’s okay to experience the creative cringe. Why? It’s a sign that you’ve improved.
If I would have known what I know now, I would have approached this project differently.
So, what would I change? The main problems that come to my mind include the following:
1. Text Alignment: The way the text is presented has a profound impact on the readability. I was stuck on the mindset that the best alignment for paragraphs is left aligned that I didn’t experiment with other options too much. One place in particular, that I would do differently is the landing page.
On the landing page, shown above (first one from the left), I probably should have centered the text “Unleash your Creativity”, under the heading like I did on the “Programs” page. Center alignment, however, should only be used sparingly (usually for less than two sentences of text.
2. Font Choice: Why did I choose a serif font? Well, because I thought it looked cool. At the time, I didn’t think too much about the user and didn’t realize that design was more than just form, it’s about the function too. More importantly, typography determines readability. Now that I know that serif fonts are considered to be harder to read than sans-serif, I would have chosen the latter. I also would have liked to have played around with the fonts more. Instead of combining a serif with a serif for pretty much my entire design (with the exceptions of buttons) and creating a dull experience, I would change it up a little by combining a sans-serif with a serif now. However, it’s also important to note that having a lot of typefaces within one project isn’t necessarily good. I learned that a good rule of thumb is to keep the font limit to two so that you can create typographic contrast and interest that isn’t too overwhelming.
3. Pictures: Since I was limited to assets, the pictures that I could find off of the original website weren’t oh-so-great… Although I was lucky and managed to find some pictures that were high quality, a majority of them were not and were pixelated. If I would have had better pictures provided by the organization, I would have definitely picked out higher quality images for this project.
4. Iconography: I hardly used any icons in this project. I think that it would have been effective to put social media icons at the bottom of the landing page so that people who were interested in the organization could easily access more information to see what Bad Dog Arts was up to.
5. Color Palette: I vividly remember my professor mentioning that the color palette of the website should coincide with the overall theme/logo of the non-profit organization. Since the logo was already really colorful, I didn’t want to use too many colors that would distract the viewers from the actual content so I chose to use more subtler colors — blue and orange. However, I probably should have used darker or more neutral looking colors to help offset the busy-ness of the logo. Shown below is the logo of the non-profit organization.
How did I benefit from all this?
Aside from the bad color choices, pixelated images, and other design decisions, I consider this a glorious mistake — I learned what not to do. I’ve been able to soak up a lot of information and apply it to my newer projects. Even though this project isn’t a great representation of my capabilities, I strongly benefitted from the design process that I went through to create this interface. I learned how to create an idea map, site map, wireframes, responsive designs, website color & style ideas, mood board, pattern library, content creation, surface comps, and a prototype. Check out the steps that I went through, below.
1. Idea Map: I sketch-noted to brainstorm my ideas for my project.
2. Site Map: Building off of the first step, I used my ideas from my mind map to create a diagram of what pages my project was going to consist of.
3. Wireframe Samples: I sketched out my first set of wireframes on paper.
4. Responsive Design Samples: This is my first draft of responsive wireframes for mobile, tablet, and desktop (left to right).
5. Website Color and Style Ideas: I explored color & style ideas for my final website redesign.
6. Mood Board: I included color samples, typefaces, sample images, and color combinations for the website brand in this mood board.
7. Pattern Library: I included sections on typography, colors, and identity for the website in this pattern library.
8. Content Creation: I created several examples of possible text over hero images, buttons, icons, and scrims that I could potentially use in my redesign.
9. Surface Comps: Using the content that I had created in the previous step, I then created surface comps with real content. Here’s what the landing pages ended up looking like on mobile, tablet, and desktop display.
10. Revision: After receiving feedback from people, I revised my work. After revising my design several times, my initial ideas changed a lot. The key point to note here during this stage is to not get married to your work.
11. Prototype: In order to create a click-through mobile prototype, I used the InVision application. Prototyping is critical in the design process as it helps you see how your design will be used; it helps give context.
- To view my mobile prototype, click the link below: https://projects.invisionapp.com/share/QND0GT06B#/screens/248369460
Conclusion
That feeling of cringe that you get when reviewing past work isn’t a bad thing after all. It’s good to feel like you could do better now because the old should always look worse than the new. You should routinely review your work to see how you’ve progressed and to also remind yourself of mistakes that you’ve made in the past so that you can avoid them at all costs in the future. This is all a part of the process of becoming a better UX designer. Make glorious mistakes and let your skills grow.
“Making mistakes is better than faking perfections.”
Ellie Hoyt is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design with an emphasis in Interaction & Design. This article related to the Creative Cringe that was later experienced from the DGM 270R Digital Composition II course.
