Redesigning your website doesn't have to hurt

Is it even possible?

Yes it is. Now you may not start loving it but if you stop hating it that’s an upgrade right?

I wrote this article after I changed my approach to redesigning personal websites. I followed a logical process, trusted it and analysed my experience after the project launch.

With this I give you a step by step formula on how you can approach your next portfolio redesign. I can’t promise it will work for you but it certainly did work for me. I highly suggest to save this article and read it back before you need a website refresh next time. I will be re-reading it too.

<p>Now sit back, relax and <span class="text-style-strikethrough">enjoy your flight with Ryanair</span> make yourself a cup of coffee for it’s going to be a long read ☕️</p>

Step 1: Brace yourself

This is essentially a mindset step. Before pushing any pixels have a good think on how you want to approach the whole process. This will highly increase your effectiveness and you may avoid burning out in the middle of this all.

We often treat personal websites as a fun (or not) side project that we randomly do here and there. This is not helping us. To make this process efficient we need to treat this project seriously. Don’t try to cut corners and do it in between of client projects, cooking, cleaning and walking the dog. This is not the way to go.

Instead, treat this as a client project (but don’t send proposals to yourself, there are limits). Make sure you find as much time for this as you would need to complete such project for a client. It may be difficult but your personal website is an important investment. It’s not something you want to do on your knee over the weekend. Nor you want your clients to feel it’s been done this way.

Here are few other things to consider right at the start:

Define why you need a website

This may seem obvious but many people just jump into it and figure out as they go. If you have a clear vision of why you need a website and more or less what you need to put there → the work will be much easier.

Give yourself space to be creative and resist the urge to rush it

Now I’m not saying “make it perfect” here. I’m saying “go an extra mile because it’s the focal point of your business”. If you need a quick temporary portfolio do it in Notion. Leave the website to have the full experience you want other people to see and give it a proper time. If you feel stuck take a break until you’re unstuck and don’t feel bad about it. Good things take time.

Give yourself space to not be too creative

This is to balance out the point above. I know we all want our portfolios to be the shining stars showing our best abilities but there’s an important other side to that. If the site’s purpose is not just excitement it needs to be clear, readable, user-friendly and easy to navigate. It should also be easy to update so you can use it for next at least 1-2 years.

Also, as with client projects, have moments when you say “enough is enough, I’m moving on”. Remember how I said “good things take time”? Perfect things take forever and they’re never perfect anyway.

It’s not to win awards

Remember that you don’t have to win the website of the day/week/month/year/decade award to have a very good website. No matter what goals you will define for your website, I doubt that winning an award will be the highest priority. Award-winning websites are made for specific brands for specific business context they operate in. These awards don’t constitute the definition of a great website as such. They highlight the websites that are great in achieving certain effects.

Step 2: Start with why, what and for whom?

The most dangerous thing you can do is to not give yourself any constraints. While having full creative freedom can definitely be enjoyable, it can lead to chaos, frustration, 8725 art direction changes in between and random content if you’re not careful. If you’re a perfectionist this risk can be even higher 🤷‍♂️

Instead I suggest starting with all the things below:

Do the strategy session with yourself

Yes it sounds mad but hear me out. When you have a good think on your needs good things happen both in work life and in personal life. Open up whatever software you use for quick notes and start with questions like:

• what is the goal of my website?
• how do I want to position myself?
• who do I want to attract with my website?
• how do I want to speak to those people?
• what types of clients do I enjoy working with?
• what types of clients do I want do avoid?

Add many more to this and go for quantity over quality at this stage. Document everything that’s coming to your mind. It will be such a huge help.

Bonus alert!

To make it easier for you download the Figjam template which can serve as your strategy session guide.

{{cta-block}}

Go through the answers and narrow it down

Now that you’ve done a solid brainstorming it’s time to start connecting it together. Answering these questions should give you an idea of what your high-level priorities are. It’s a good practise to keep it close to you throughout the whole build so that you won’t lose track of your needs.

Use the answers to determine what type of content you need to have on your website. Think more in terms of “what should I say/show to which users” instead of putting it inside the pages. When you write these things down, most of them will naturally fall into pages.

Create the first sitemap

Now that you have narrowed down your answers it's a good starting point for the first sitemap. You may have the outline of pages you need based on the top-level content you identified earlier. Try to map all the pages you need to achieve the things from previous steps.

Please keep in mind that this is just the first version. This can change along the way as designs become more concrete.

Keep it all in one place

I used Figjam for that but you can use whatever note-taking software you like. Whatever that is, always keep an eye on them throughout the whole process. Your design should be in perfect harmony with the strategic goals you have just discovered.

Step 3: Gather inspirations

Ok now that you have all those strategic things kept in mind, it’s time to get inspired.

I saw a tweet from Adam Mura a while ago saying “If I had a week to design a one page website I’d spend 4 days looking at design inspiration and 1 day designing the page.”

Sorrounding yourself with great designs is a crucial part for growing as a designer and an equally important part of making sure your personal website will be up to modern standards.

Treat this phase seriously

There is hardly anything more detrimental to the quality of design than cutting corners on pre-design work. Many half-done quick designs happen because the important initial phases were skipped to start designing quicker. I know it is very tempting to just start designing but know that your research (including moodboarding and visual research) is already improving your design - you just don’t see it yet.

Consume great design

Consuming great design does not equal consuming great visual design. Do not research only sites that are all about visuals. Get inspired by how other people speak to their target audience, structure the content and navigate users through pages.

This all should form one coherent picture. Visual content should be in tune with your message and positioning.

Create a moodboard

There are many ways to do this and I think everybody should find his/her own. Regardless of how you do it, make sure you have a diverse moodboard of various websites. Take notes of what you like from them and why (I used Figma comments for this so I can easily jump back to them).

Think about interactivity early

If you see the type of interaction that would make sense for your website write it down, comment it, record it etc. Whatever that is make sure you save it for later to become more intentional about interactions on your website.

This should not be something you figure out as you go during development. Before going for development know which interactions you want to have for which elements. Then just work on the durations and easings during development.

Steal like an artist

In any creative field creatives get inspired by other creatives to do their own thing. It’s absolutely ok to get inspired and apply general principles like look & feel, spacing, typography scale, interactivity etc. as long as you’re using those to create sth original and not just stealing somebody’s work.

If you still feel bad watch one of the many videos on how many popular songs share the same chords. This will help.

Step 4: Start designing

I will not be saying which tool you should use to design your website but please use Figma.

Designing for yourself is difficult. No deadlines, perfectionism, full creative freedom.. It can easily end up in a procrastination cycle and I feel like almost every designer has a story like that.

Here are few things that I found helpful to be satisfied with my design work while not procrastinating over every single detail:

Accept that it won’t be perfect

After previous portfolio redesigns I knew that it wouldn’t be 100% how I imagined and I’m ok with it. At the time of publishing this article my portfolio was cloned over 400 times and I still think it’s far from perfect. Worry about making it good and take perfection out of the equation.

Expect misalignment between your website and where you are

Shortly after the redesign your work may look worse than your actual portfolio website. A long while after the redesign your work may look better than your actual portfolio website. For a short while your work may match your portfolio website but this will not last long.

There will always be a friction between where you are with your skills right now and what your portfolio shows. If after 1-3 years you will look at your portfolio without feeling like your past projects feel outdated → this means something is wrong here.

Think about scalability

Remember that you will have to update this website and it better be easy because none of us have a lot of time for portfolio updates. So every time you like to go over the top with something ask yourself “does it mean that it will be a pain to update this later”? If yes, drop it.

Take breaks

This is something I’m consistently neglecting but I work to get better at it. When you feel stuck at any point during the design don’t fight it. Even a short walk or any other mental disconnection will probably be better for unstucking than forcing it no matter the cost.

In any creative work it is important to have an open, fairly relaxed mind. In short, you need to create the space for yourself to be creative. Try testing out various types of breaks and see which one clears your mind the most. Repeat what works. If after a while it stops working because it became too familiar → change it into another type of break.

Which brings me to the next point.

Change something

I was shocked how much more inspired I was by changing the country I was in. Moving from Poland to Ireland was a tremendous breath of fresh inspirations and it helped me to have more creative ideas.

Now I’m not telling you to go to a different country to work on your portfolio obviously. Think of anything you can change in your daily setup and you can be surprised how ideas can flow better after doing this.

Step 5: Start developing

While this is mainly focused on Webflow development I believe these points should be useful for any website development regardless of the tool.

Prepare the style guide

Developing your personal website should not mean that we skip doing the style guide. Define all the global styles you need in development and gather the assets - it will make the development much more enjoyable. Ideally the Figma style guide should be the same as your style guide page in Webflow so you have an easier transition.

Unless you’re doing a quick one-pager a style guide is your friend.

Create order, not chaos

If you’re a Webflow Developer your website should be well…well developed. Regardless of the system you’re using make sure your code is clean, semantic and scalable. Remember that every time a Webflow Developer sees Div Block 20 development there is less joy in the world.

Review and test

Test your website on different devices and browsers, clean unused styles, recheck the naming, clean & reorder interactions, do the technical SEO, compress images, connect your tools, get feedback from other people etc.

Going an extra mile here shows your ability to create clean, maintainable projects which is what pretty much every client needs. And it also shows you care about the last few steps of the project which often get neglected.

Step 6: Optimise other things

This can be done in between other steps but try to think of other areas of your business that you can optimise. You can think of a big picture and treat your new project as a rebrand of yourself as a professional. Instead of just changing one website to the other, this is a perfect opportunity to rethink these areas:

Project management

What changes would you like to apply to the way you work with clients from A to Z? You have a perfect chance to redo your processes if needed, especially if you think about targeting different set of clients than before

Marketing

How will you market yourself? What systems, templates or tools would help you with your marketing efforts? Is that aligned with how you want to position yourself and the clients you want to work with?

Deliverables

From social media, through legal agreements, proposals, to Figma & Webflow files - you can create so much of those to help you push through repeatable things you need to do in every project.

Think of any areas of your past work that were frustrating to you - maybe this is a perfect timing to take care of them.

Few other thoughts

I was going to make a step 7 called “update your website regularly” but I will take it easy if you end up that far in this article.

Hopefully this guide will help you when you need to redesign your website. My goal was to give you a clear to follow blueprint on the whole process. Following these steps removed so many frustrations I used to have whenever I needed to work on my own website.

If this is helpful for you don’t forget to DM me on Linkedin or Twitter 👋

Portfolio

is

never

finished

‍