There is a term in the online business worlds called “website shame”. Many of us are very familiar with it. Perhaps you too have felt ashamed over how woefully inadequate your website was. Perhaps you cringed every time you gave the link to a potential client, because you were afraid it will ruin the great first impression they just had with you.

You wouldn’t believe it, but designers can feel the same way. I certainly felt like my website was not doing a good enough job of presenting my work for a loooong time. It wasn’t just that I was bored with my design (although having a fresh, new look sure boosts my enthusiasm for blogging). I found new faults in it every day, and I knew if I wanted to feel fully confident in front of my growing audience and expand my reach, this was the first stumbling block I needed to get out of the way.

This website design has since been replaced with a new one. Check out my 2023 brand refresh case study.

The old design

I’d like to take a minute to celebrate the old design that went into the archives, since I did a lot of things well. Even though it was a bit outdated, it was coherent, because I was consistent with applying the same design elements to every medium.

My old business cards, newsletter template and social media graphics were all a part of the same brand story. Not only were the people delighted with the look of those graphics, they were also primed to feel familiarity when they came to my website that shared the same color scheme, fonts and patterns.

In case you haven’t been around before, or need a little reminder, here’s a screenshot of my homepage before the redesign:

Click to open larger image

This has been the third variation of the homepage since the original design, and you can see the first two here.

Plenty of things worked, but some didn’t, and here’s a brief overview of my redesign process and the reasoning behind it.

Why I decided to redesign NelaDunato.com

As I published my website in November 2012, the “flat design” trend was already getting big, but I was always the one to rebel against trends, so my design was very “old school”.

As the time went by and screen-wide graphics on the web became the norm, my website with modest sized photos looked a bit underwhelming in comparison. I finally had a bigger canvas to play with – the one I’ve been waiting for for over 15 years! – but I wasn’t using it.

There are a number of problems I wanted to solve at the moment when I finally realized I needed a redesign:

• The entire design was a bit stuffy and constricting, and I felt my brand needed to be more expansive and lighter, to align with the changes I was going through (personally and in my business).
• The burgundy background was interfering with my art and designs
• The red buttons weren’t standing out on the burgundy background, which is a conversion nightmare.
• Too much space was wasted on things that didn’t matter (like category links in portfolio), and I wanted to use this space for bigger thumbnails instead.
• I was getting increasingly annoyed with the beige blog background, and having to match my blog graphic colors to it.
• Last but not least, I felt ready to raise my prices, and I wanted a brand that communicates the value I provide that’s more aligned with these prices.

After I clarified all the things that were bugging me, I got to imagining my new design.

The story behind the new design

What I see as my “special sauce” as a design professional is that I’m also an artist that can actually draw. Many designers can’t draw, so they rely on stock graphics to give more appeal to their work, and I’m all for custom and unique. (This used to drive my ex boss mad, because I’d spend the entire day drawing original icons for a project, when we could have saved time and money if we just bought them.)

What was once perceived by my employers as a weakness, I wanted to highlight as my strength. Yes, I draw things by hand. Yes, it takes more time and costs more, but the results are beyond the ready-made generic stuff – completely unique designs. That’s how I roll.

The only logical thing was to highlight this artistic and hand-crafted approach in my own website design and make it feel more organic. The previous version felt “too digital”, even though there were icons and details I drew by hand.

I was a bit reluctant to use watercolor textures, since that also seems to be the trend now… But I can’t help it – I always had a thing for organic textures (even in my very early inObscuro days), and in the recent years my art has evolved to include more and more of it.

Watercolor washes and ink strokes are what I live and breathe. If that’s what a lot of people use (and some of them way more famous than me), so be it. I knew I could pull it off in my unique style.

Starting the design on paper

I already wrote why I start all my designs on paper, and it’s especially important if I’m going for a traditional, organic look. So I took out my sketchbook, watercolor palette and pens, and got to sketching some ideas and graphics that I would later use in my design.

I used my favorite drawing tools, the Pentel Kanji Fude brush pen and Sakura watercolor field sketch set (refferal links) to paint the textures, icons and other elements. (You can read more details about my sketching kit in this post.)

I then combined these elements in Photoshop to create the graphics you can now see on this website.

Before and after

In general, I added more light surfaces to the design, and used black and burgundy to make certain areas pop out. I kept some of the burgundy and beige colors from the previous design, ditched others, and expanded the palette with a range of violets.

In addition to the serif Alegreya font which I’ve been using since the beginning, I introduced the sans-serif Lato as a secondary font. I’m more pleased with the typography now, as it adds more contrast between paragraphs and headings.

I allowed the layout to widen for up to 1200px for higher resolutions, so this gave me the chance the space the elements wider (that’s something I’ve been meaning to on the old design too, I just never made the time to do it).

Logo design

I realized halfway through my website design process that something is off, but it was hard for me to say what it was. I had so much resistance about changing my logo, that I didn’t want to see all the signs that kept pointing at it.

Redesigning the logo meant I had to put my website redesign on hold, and as difficult as that was, I knew it was the right decision. Following through with the website design just to have to change the logo later wouldn’t be as good. In the end, I came up with a logo that I’m so pleased with, I can’t imagine I ever wanted to stick with the old one.

Here are the old and new logo next to each other:

If you want to read about my logo design process in more detail, I wrote about the whole logo redesign journey in a separate post.

Home page

The home page endured the most layout changes in this entire process, and it was what was driving my design decisions.

Here are side-by-side before and after screenshots (click to open a larger image in a new window).

The biggest difference is that the old homepage had no mention of my services. Don’t ask me why I ever thought it would be a good idea to remove them completely (I had them at the very beginning, and then they got lost in the shuffle). So I added a big, prominent services section right under the header.

The old homepage didn’t have a proper header image for the last year, because I replaced it with portfolio thumbnails. In the new design, portfolio samples are toward the bottom.

I was agonizing the most about the header photo. Should I paint something specific for this page? Should I use a slider of my projects? One featured project? There were so many different options. In the end I settled for a photo of my sketchbook spread, and I’m open to switching this image in the future if I create something I like even better.

The old website has a prominent opt-in box and it was doing just fine, but since I wanted the services to be front and center, I didn’t want to do the same thing here and push services below.

As I was pretty happy with my Authentic Promotion Guidebook landing page and how it was converting, I decided to drive more people to it through the smaller call to action element. We’ll see how this goes and if it turns out it’s not working as well as I hoped, I’ll try out something different.

I wanted to break apart the services and blog entries with something decorative, and it occurred to me this would be a good place for a featured testimonial. (I also had testimonials removed from the homepage right when I removed the services too).

With all these priorities, the blog entries ended up just above the footer. We’ll see if this was a brilliant or a terrible decision.

And then, the footer. This mammoth is over 750 pixels high. I went all in with the opt-in box since, surprisingly, even the old small footer opt-in box performed decently. People were signing up through it on the pages that didn’t have a box toward the top (gallery pages, for example) so I wanted to make it extra compelling.

I brought back the social media buttons now that I had enough space to put them, and I just made the bottom strip a bit fancier with a proper footer menu.

Services pages

The main services page didn’t change a lot, except that I used new graphics (from the homepage).

I made several main changes to each of the individual services pages, and I’ll show them on the example of the Branding & Logo Design page, because the others are very similar.

One thing I did on all the landing pages was narrowing the layout for more comfortable reading. If I happen to add more graphics to them later, I might bring back the wide layout, but right now this is what it is.

I already had two service packages on the old page, but I made them more prominent by adding graphics.

I replaced the portfolio thumbnails that take the visitor away from this page with an image slider so that people can check out examples without leaving the page.

I rewrote and redesigned the boring, uninspiring process explanation into an illustrated process.

Even though this part of page is now several times longer than before, I expect more people to actually go through it because it’s easier to scan, and you can get the gist of it just by looking at the pictures.

Blog post and blog archive pages

The biggest difference about the blog posts and archive is that as I allowed the layout to widen for up to 1200px for higher resolutions, the columns became wider. Now the blog content area is up to 750px wide, the sidebar widens up to 263px, and I also get a nice 97px gap between the columns so your eyes don’t slide off left to right uncontrollably.

I made the opt-in box at the bottom of the post blend in with the background, because I’ve heard from another blog that they saw an increase in conversions when they made their opt-ins look like a part of the post. It was a counter-intuitive yet an interesting idea, so I’m trying it out.

I rearranged bits around the sidebar a bit more. I replaced the long list of featured posts with a huge banner that points you to my new “best of” page sorted by categories.

Gallery and artwork view pages

I wanted to remove the sidebar from the gallery page so I could expand the thumbnails and make them larger. I moved medium and category filters to the top. Here’s the example of the illustration gallery.

The artwork page hasn’t changed that much.

Other pages remained more or less the same so I’m not featuring them here, but feel free to browse around!

The tech geeky bits

I decided to use Bootstrap for responsive layout, instead of my custom code that I had before.

While my former responsive design was fully functional, the code wasn’t very elegant, so my stylesheet was bloated. Now I rely on the default Bootstrap grid most of the time, and created only a few exceptions where I felt they weren’t precise enough.

I also used a mobile-first approach for more richly designed elements, so that people on data networks wouldn’t have to load heavy images.

(This had the unfortunate consequence of people on Internet Explorer 8 and lower seeing the mobile version, since they don’t support screen size @media queries – however, that’s less than 1% of my visitors and they get served a nice polite message to update their browser already.)

I’m still not happy with retina support, because I have a very large number of images on the website, and just didn’t want to bother creating the double-sized versions for all of them. I did address it where I was able to do it with minimal effort. Since I have nowhere to test retina screens at the moment, it’s probably going to remain buggy for a while. (If you’re viewing this site on a retina screen and notice a very glaring error, and you know how to easily fix it, please write in the comments or drop me an email.)

Another difference between this design process and my former ones was that I went from designing the website style guide and the homepage directly to coding the HTML/CSS template, which saved a lot of development time. I’d love to use this approach with my clients as well.

The story continues…

I see websites as ever evolving, so I’ll be tweaking things along the way, just as I did with the old design. I already have a few ideas I’d like to implement, but I didn’t want to postpone the launch because of that. I still expect that the overall design will serve me for a long time, because I made it so open and flexible.

Now my next step is to create a fully functional Croatian version of my website for local clients. My client base is split about evenly between local and international clients, and I’d love to see this change in favor of international even more. However, I get a lot of inquiries through referrals, so I want to make a site that will help inform them and qualify them for working with me.

I hope you enjoyed this case study and that it helped spark some ideas on what you can improve on your own websites!

If you’d like me to evaluate your current branding and website and create a new brand identity that will impress your ideal clients, check out my brand identity design services, and contact me to arrange an introductory chat!