Why yet another redesign?
Its all about continuous improvement.
Over the last 10 years I've re-created my own site many times (unfortunately I haven't kept my first site), but you can check out my other sites. You would wonder why I need another site yet again? Well, I'm currently looking for new opportunities either in the form of freelancing gigs or a part-time/full-time remote position at an innovative tech company. And what better way is there to showcase my skills and what I can offer than having a nicely upgraded website?
There is more to it though. First, I'm not really happy with my last experimental re-design (see more), which I did a bit in a hurry and while having too many work projects on that demanded my time and focus. The second reason is, other than having time & energy available, is that I deeply enjoy learning new technologies, best practices, and patterns. Is there any better way to learn new things than by practicing it? Lastly, my aim is to make this site upgrade a much larger one, with all the things I always wanted to include (but somehow skipped on) and to seriously take stock of where I am, what I can and want to do, and how to go from here 🥳.
Whats my goal?
Having covered why I want to redesign & restructure my site, lets dive into what I plan to achieve. I like to start off by setting clear SMART Goals (Specific, Measurable, Achievable, Relevant, and Time-bound). This helps my a lot to stay on track and reconnect with a starting point if I go off track (knowing myself, this can happen a few times a day, damn you internet 🌐).
So without further ado, here is what I plan on building:
A beautifully designed, high performant, next gen tech, clean coded, user interactive, Portfolio website with lots of features and a great dev experience.
Yea, if your goal looks anything like that, you'll probably never start (I certainly wouldn't), there is absolutely nothing SMART about that. Let's break it down into its parts and make it useful.
Here are the individual parts for the website:
- Beautifully designed
- High performant
- Next gen tech
- Clean coded
- user interactive
- Lots of features
- Great dev experience
And its also possible to group them a bit into common themes:
There is a user-experience (UX) side, which includes the design, interactivity, and variety of features.On the other side is the developer-experience (DX), which covers the tech stack, coding practices, and anything else internally related. The performance is a bit of an inbetweener 🥪 as its super important for a good UX as well as the DX.
User Experience
Lets digest whats part of the user-experience for my new site. We have design, features, interactivity and some aspects about performance. I believe that a site is generally made up in the following format:
A Website is a composition of features & content, which are design for an intuitive experience and a low learning curve, yet have a rich interactivity making the user feel part of the site, all while being as fast as possible.
Features
This statement highlights a bit that its individual features & content blocks can be designed, made interactive, and be performant in its own being. Yes, fitting all components together at the end is also important, but it's much easier to plan each feature at a time, applying design & interactivity in a one feature at a time approach. What is important though, is to list the desired features from the start and then ranking them in order of importance. Its always possible to keep on adding features later, but its important to start off with a small and achievable list.
Heres whats needed:
- List all features in any order, include all ideas (divergent thinking)
- Rank each feature in order of importance, creating a must have, should have, and could have list.
- Elaborate & break down content requirements from the top down, covering all must have, and the top should have items, while ignoring all could have features for now.
Design
As mentioned above, I want to create a beautifully designed website. But what do I mean with beautifully design? Well I'm not really a designer, yet I had my fair share of design experience and I've definitely looked at many pretty and many not so pretty sites, so I'm at least well opinionated on the topic 🧐. First and foremost, my aim is create a site that has a clean and intuitive user experience. I don't care much about fancy animations and anything that could look laggy (like those unique cursor effects). The design should be clean & simple with a touch of visual hierarchy & depth to bring the right content into focus. It's also important to me that the design process is not locked in to Figma or Illustrator, but rather focuses on sketching wireframes, creating inspiration art-boards from my list favorite sites that form the foundation for development.
Over the last 5 years or so, I've built quite a few Shopify sites, which all embrace a common design pattern: Pages have sections, which can have blocks. This design pattern has been revamped recently with Shopify's 2.0 Themes and I've built my own dev tool getting the best out of it for headless based sites. Embracing this flow of structuring design and content has worked really well for me and I'll make it a requirement in the design process.
Here are my requirements for the design process:
- Each Page needs a list of sections that kinda act as an outline
- Each section needs an inspiration art-board (Illustrator file) with design examples
- Additionally to the feature content list, each section should have a content structure brief.It should be detailed to the point that for design to work a paragraph should be around 25 words, images of a specific aspect ratio & quality.
- To make widely different design inspirations work together, its important to use an iterative process, focusing on 1-2 Sections at most at a time with development of a Section before taking on another area of the site.