Tag Archives: redesign

redesigning my about page

Repurposed

The About page is where people go to gain a better understanding of a website or blog. Basically, my about page is the first impression newcomers will get of my blog and me. Keeping this in mind, it’s important for this page to be captivating, professional, and beautiful. Looking at my current About page, I knew I wanted to make some changes – not only in the style, but also content. My current bio explained the basics, but was too short in length and was unengaging for my likes.

I tried editing my About page through Elementor, as it offered a whole lot more versatility and customization to the elements, especially in comparison to the blocks theme that I’ve been using. Because I didn’t have an exact idea of what I wanted the layout of my About page to look like, it took a lot of time and trial and error.

What I liked about my previous page was the definition of “klick”. I wanted to keep this, but redesign it to make it more appealing and cohesive with the style of the logo that I had created weeks prior.

Original design of the definition on my first About page:
First updated draft:
Changing examples:

I wanted this definition to be the first graphic on the page, as it would set the tone for the rest of the blog. Yes, I do know that click is typically spelled with a “C”, and yes, the “K” was on purpose. In one image, I hoped to capture the explanation and theme. Just like in dictionary definitions, I wanted to use “klick” in a sentence, so I used this first sentence – which was originally used in Joffre Lakes; however, I ended up changing it to something much more relevant to my blog:

I had the plan of creating three distinct clickable categories in columns below with brief descriptions of these different categories. I wanted this graphic to blend seamlessly with the categories below. Originally, I wanted to extend the grey a little further down, and add a white mountain in the middle to blend the grey from this graphic and the white from the following section. While I was doing this, I realized I was creating an arrow in the wrong direction. Instead of having a white arrow pointing up, which would have been the case had I kept the white mountain on the grey backdrop – I created a negative valley (as in lack of colour, not unhappy) to draw attention to the following section.

Third and final draft:
Finally, with the added category columns, this is what the top part of my About page looked like:

Each of these columns are responsive, meaning that it react to your curser. When the mouse hovers over the column, it becomes a darker shade, inciting you to click on it. These columns, images, and titles are linked to their respectful pages. For example, if I were to click the “local” column, it would send me to the landing page for the local category.

Already, this so much better than my previous About page, which is below for reference:

Editing my bio:

Next up was rewriting and redesigning my bio section. I chose colours that would match the image, along with a readable and professional font. My original About page lacked warmth and friendliness, so I tried to keep this in mind when redesigning and rewriting this next section:

Staying Connected:

All that was missing was connecting my social media account and contact information. I opted for simple responsive icons. The icon would increase slightly in size when hovering over it with your mouse, and for consistency, I chose to have the colours change to the blue and yellow of my logo:

Mouse over the Mail icon
Mouse over the Facebook icon

When clicking the facebook icon, it would open my facebook page in a new tab with to make sure I’m not kicking them off my blog. Similarly, when clicking the mail icon, the user’s email would open up in a new tab, ready to send me an email.

The trouble in troubleshooting

So while I’m really happy with the design and content of my new About page, you might be left wondering why you still see my old About page, as opposed to this new and improved one. To my big disappointment, when I was troubleshooting this page for different screen sizes, I realized how illegible it is for mobile devices. Somehow, the graphics, icons, columns and images didn’t transfer well onto a smaller screen: not only was the layout lost, but some images disappeared and the content was just not easily readable.

Final note:

This was especially frustrating, as I had spend days working on it this. While the layout did still work on tablets and desktop computers, over half of my audience accesses my blog on their mobile device, so keeping this up was out of the question. I rather have an elementary version of my about page rather than make this illegible gibberish live on my website. Unfortunately I don’t have the time to try and fix this before the end of the semester, but I plan to sort this out as soon as possible. If nothing else, I learned the importance of troubleshooting regularly throughout my progress to make sure its compatible with all devices.