Designing my Website

The Challenge

Designing my first website from scratch

Designing my website from scratch with no constraints and team members or clients I would need to compromise with, was in fact a challenging experience. The conditions just described first might seem luxurious, but when you find yourself sitting in front of a blank screen not having designed a website before, this task can be pretty intimidating.

This project was therefore above all a learning process. But before we dive into the single steps, let’s take a step back and have a look at some strategy. What did I want to achieve with my website?

GOALS

Defining the 3 Ps: Purpose, People and Perception

The goals I defined for my website can be clustered into three groups:

  • PURPOSE: What is this website for?

    My website is a place where I can present myself as a designer – my digital business card.

  • PEOPLE: Who should see the content?

    My website is supposed to be the key to my first design job. Whether it’s recruiters, future employers and colleagues or someone I meet at a networking event. My website should introduce me to people who can push my career.

  • PERCEPTION: What do I want my audience to think and feel?
    My website is supposed to represent me as both a UX design professional and a human being with heart, a personality and own style. It shows my best side, but in an authentic and honest way.

I came up with the P logic by accident, so don’t I expect to find it in any strategy book (also please don’t mix it up with the four marketing Ps, product, price, place and promotion).

From goals to features

After defining why I am creating my website in the first place, the what and how came into play:

  • What information do I need to provide to present my design skills to recruiters and future employers?
  • How do I need to communicate my design skills to meet the website’s purpose and achieve the desired perception?

This is pretty easy. In order to present myself as a design professional to recruiters and future employers, I need to show the following:

  • my work – portfolio
  • my experience – CV
  • my ideas/thoughts – blog

Being clear about my goals and answering these questions helped me draw the website’s main information architecture at an early stage. My website now consists of the three key pages CV, portfolio and blog.

The Approach

RESEARCH

Inspiration is everywhere

How do other designers resolve the task of showing their skills? What are possible ways of conveying information?
Browsing different kinds of media helped me answer these questions. I gathered inspiration from different sources:

  • Websites of designers, bloggers and companies I regularly visit to get my daily news
  • dribbble (for digital CVs and smaller elements like icons and buttons)
  • Wordpress themes and other websites of similar providers (e.g. Squarespace, The Grid)
  • Print magazines

Using boards and Trello lists to collect and store inspiration

When I came across a design I like, the link got saved in my Trello board where I gathered all the other ideas for my website. From the visual perspective, putting everything into a board (or collage) helped me keep in mind which style I’m aiming for.

inspiration-board_compressed
Collecting screenshots of inspiring designs in one place made the inspiration phase more organized.

Typography matters

During my research, I soon realised that choosing an appropriate typeface is crucial as it influences the look of the site as nearly no other layout component. I spend a lot of time on Typewolf to figure out which font I want to use on my website – a truly hard decision, which hasn’t come to an end yet.

font-collage-grey
My favorite fonts

PROTOTYPING

The research phase left me behind immensely inspired, but I still had the same challenge to face: filling the screen with information I want to convey.

Starting with the most complex page

I first designed my CV because this was the page where the content was already defined. Having a relatively clear idea of the content, I also knew that the CV will become the most complex page on my website. However, the challenge to build a smart information design on a limited website format and having an even smaller mobile version in mind let me again stare on the blank screen without coming up with a viable solution. Furthermore I wanted to create something more interesting than a Linkedin profile.

Sketching the concept before getting stuck in details

So I turned to a good old sheet of paper and started sketching my ideas. This experience showed me once again, how valuable paper sketching is, as this sheet of paper resulted in the leading design concept for my digital CV.

cv-sketches_mask_compressed
Sketching helped me to capture my ideas and experiment with different concepts

Wireframing the information hierarchy

I first created my CV in grayscale before I used colour. This allowed me to concentrate completely on designing the information hierarchy and giving elements different emphasis by varying font weight and scale as well as using whitespace and grouping.

cv_grayscale
I focused on information design by designing my CV in grayscale first.

VISUAL DESIGN

Defining a colour scheme that meet the goals set

Once the information design was done, I needed to fill my grey CV with colour. I worked out a harmonious colour palette, which reflects the right balance between serious information (CV) and personal expression (my website).

blogpost-colours_compressed
Iterations on the first design resulted in using less colour and a cleaner and more professional look in the second design.

Colour is a detailed issue

When I was testing the chosen colours on the actual interface, I realised that the job isn’t done by just picking colours from a palette. Instead, colours need subtle adjustment to support the content provided, while still meeting accessibility guidelines like contrast.
I wrote a blog post that captures in more detail what I learned about designing colour.

IMPLEMENTATION

Talk to developers often to ensure an efficient design process

Getting an understanding of how a design will work in the browser requires talking to developers often and early, not only to become aware of technical constraints, but also to get a feeling of what is easy or difficult to implement.

It turned out that realizing my CV was quite challenging and that some components were even impossible to code. Knowing about these constraints early would have helped me to rethink design elements, before I applied them to other pages.

Working closely with engineers
 also gave me an understanding of how the content management will work and why consistency matters when the site gets expanded.

Let the website come to life early to detect things that don't work

Seeing and interacting with the design in the browser revealed issues I had simply missed or hadn't paid enough attention to while working only in Sketch. Here are a few things I fixed after I had seen my site online:

Making interactions more visible by using hover styles, cards and colour

I developed hover styles for clickable elements and normal links. As hover effects don’t exist on mobile, I ensured to make clear what is clickable and what is not by using buttons and chunking information into cards.
Links were given a blue colour instead of an underscore to separate them from the text they’re placed in so that they are more striking and easier to find.

blog-hover-gif-20
Simple animations make my design more interactive. Cards and prominent buttons ensure that the user knows what is clickable.

Creating responsive designs which look great on every screen

We don’t only live in a mobile age, we also live in an age of retina displays and devices which cannot longer be assigned either to mobile or desktop (key word: “phablet”). If there is one thing designers can’t rely on, it’s screen size.

Designing for different screen sizes limits the possibilities in web design. I found that the inspiration I got from static print magazines barely work for dynamic screens.
Therefore I removed static background shapes in favor of more white space and increasingly put content into scalable boxes and cards which can change their form flexibly when the screen size forces them to do so.

responsiveness-homepage-incl.mobile-compressed
Overlapping layers like in the first shot are difficult to handle as they move unpredictably when the screen size changes. An architecture of independent cards and containers like in the second image allows defining a clear concept for smaller screens.

Improving the information hierarchy
 based on goals and the user's perspective

Testing the website in real life also made clear which information stands out and which doesn’t. Coming back to my previous defined goals and target group, I had to review my information hierarchy by asking the following questions:

Effectiveness: Do I actually provide the information I want my audience to read?
Efficiency: How easy is it for my audience to find the most relevant information?

These questions helped me to improve parts of my website from a user-centered perspective. Here are two examples:

  • In my CV, I described greatest achievements and my approach in different jobs instead of listing single tasks without context. This doesn’t only show real success concisely, it also gives recruiters and employers cues about my problem solving capabilities.

  • On my homepage – undoubtedly the page with the most traffic – I made sure that recruiters and employers quickly find what they’re looking for by highlighting the links to my portfolio and CV and moving them further to the top.

Learning CSS to handle constant improvements

Having to rely on developers to make even small changes can extremely slow down the implementation process. Many of the changes described above couldn’t be managed in the CMS, so basic coding skills are inevitable to maintain a website. So I learned how to test changes directly in the browser and transferred them afterwards to CSS.

USER TESTING

Getting feedback from the target audience to measure the website’s true effects

Fixing obvious usability and content issues that you spot yourself is not enough. In the end, it doesn’t matter what the designer thinks needs to be solved because it’s what the intended audience thinks counts the most.

Therefore I sent my website to senior UX professionals with experience in reviewing portfolios and interviewing candidates and asked them for feedback. I also took my portfolio to recruiting events to test my website with recruiters specialised in the design field. Seeing them scrolling through my website enabled me to detect usability issues whereas listening to their thoughts and suggestions revealed which details about candidates are most important to them.

user-testing

Tailoring content to meet user needs

For example, I learned that case studies are a great format to convey detailed information about the problem and how it was solved, but recruiters barley have the time to read long copy text.
As a result, I made my case studies easy to skim-read by developing headlines that summarise the following paragraph.

The Solution

Designing via trial and error led to improved decision-making and craft

When I decided to design my own website, I also set myself the goal to be responsible for every single thing users can see on the screen, whether it's content, an icon or photos. Undoubtedly, my approach could have been more pragmatic and efficient, but I took this as an opportunity to improve my decision-making and craft by allowing me to try and fail.

solution-board_3_compressed
Designing a website with an even simple information architecture still means considering and designing lots of small components.

Work in progress

Finally, designing my own website remains a never ending process, driven by new inspiration on the one hand and arising UX issues on the other hand.
It remains above all a learning experience which makes me a better designer. And this in itself is an extremely rewarding outcome.

TOP LESSONS LEARNED

Don’t overcomplicate things

A website is not an artwork. People don’t come to a site to look at it, but because they have a job to do, whether it’s getting inspiration and knowledge (blog) or assessing a person’s skill set (cv, portfolio). Moving too far away from familiar patterns and approaches doesn’t help anyone: It makes a website unusable for the end-user, hard to implement for the developer and let the designer seem unprofessional. Neither the GUI nor the web are something new. Bright experienced minds have explored this terrain for years. What is the reason of messing everything up?

Keep it agile

Don’t design all pages following one design before going live. Instead, start with one page (e.g. a complex page like the CV in my case) and then see how it works in the browser and how it might affect the other pages. In case your initial design doesn’t work, this approach saved you tons of time creating other pages of the same design. By learning early what works and what doesn’t, you will achieve an optimal solution faster and gather important takeaways for future design decisions.

Design with your developer in mind

A website isn’t static, especially in ages of responsive design. That’s why developers always talk about containers and media queries. Make them happy, use a grid. By structuring your designs in containers and columns from the very beginning and having an idea for behaviours on different screen sizes, your collaboration will be smoother. A grid also makes the designer’s life easier: Without having to work out alignment and spacing again and again, the designer becomes faster and more focused on exploring new solutions.