Introduction
Why I wanted to make a personal website:
A personal website is a valuable tool to market and brand yourself to potential opportunities. You also get the chance to advocate for yourself and your work.
Why I decided on Webflow:
First, the reason I chose to build my website using an online website building and hosting tool is because I wanted my website to exist on a platform where I can track many different SEO information.
I’ve previously tried WordPress, but I found it complex and difficult to style and make it do what I want. I also tried Wix, but Wix’s dashboard did not allow some of the functions that I wanted to control.
I've used Webflow for a previous internship that I did and I wanted to get more experience with it. Webflow’s dashboard offered many ways to style a website by scratch or editing a template. There were also many tutorials and documentation to learn how to apply several features. I picked up on it more easily than I did any other platform.
Design and Branding
I found a template that offered several features that I knew I wanted on my website, including a portfolio and blog.
Original template - https://tile-design-free-template.webflow.io/
Sketches
I analyzed the template to see what it had first, then I moved on to sketching what I would like the interface of the website to look like. I especially wanted modify the home page to have a contact form section, my most recent projects and blogs, and a preview of my bio.
Color Scheme
I used Coolors to generate a color scheme. I decided on a color scheme that had a variety of colors but nothing too intense. I didn’t want any neon colors. I wanted both light and dark colors so I can easily play around with the contrasting brightness.
Fonts
Next, I chose the fonts. The fonts that were on the template by default were Lato and Arial. I wanted to use Poppins for the font of the headings and Roboto for paragraph text. After changing the font to Poppins, I thought it looked too “childish”, so I decided to use Poppins for my name on the home page and for buttons. I started using Lato as my primary font.
Banner
I wanted to use the banner on the home page to my advantage by absorbing the viewer into my website upon their first glance. At first, I tried making a collage of some of the things that I concentrated on in my studies and career. However, there wasn’t a very good contrast between the image and the text on top of it, making the text hard to see.
So, I tried again with a more simple design. I used Canva to design it. I found many sample designs on Canva, drew some sketches, and came up with the final design that does not take away from the text or the content of the website.
Logo
My logo is something that I built several years ago using Wix Logo Maker.
Other Elements
I wanted the home page to have some animations as the user is scrolling down, specifically elements fading in. I had to look up how to work with animations and triggers in Webflow from the documentation.
I also added some background images as "decorations" throughout the pages. I had to carefully choose the colors and placement to ensure that they do not distract the viewer from the main content.
The top navigation bar has a "Contact" button which, in the original template, triggered a popup form. I changed this to a contact form that is already visible and when the button is clicked, the page scrolls down to it. I made this decision because I feel that the contact form is one of the most vital portions of this website, so the user should already be able to see it.
I also added a filter for the blogs and projects, where the user can see blogs and projects of a certain category using the drop-down menu. In the future, I would be interested in finding a filtering option that has individual buttons for the categories so that the user can select more than one at a time.
One of the biggest guideline that I wanted to follow was consistency of styling, including the following:
- Shadows
- Colors
- Fonts (type, bold, size)
- BG images
- Animations
- Different screen sizes
- Verbiage
- Images
- Classes
Adding Projects and Writing Blogs
I had several past projects that I wanted to display, so I had to figure out how I wanted to exhibit them. Every project is different, but I would have to describe the processes of all of them in the best way possible. When wriitng the blogs, I had to think about how to write to inform and get my point across. While working on the blogs, I switched the background color of the interface to an off-white because I had a lot of screenshots where the background was also white, so there was contrast.
I upgraded to a premium website so that I can have a custom domain and the ability to add custom code. I took time to explore Webflow's settings, options, and features to see what tools I have at my disposal for maintaining this website. I pasted the link to my personal website on my social media profiles and LinkedIn. I also posted links to blogs that I've written to direct as much traffic to my website as possible.
Conclusion
My experience figuring out how I wanted to brand myself required thinking about how to build a good website in general. Colors, layouts, fonts, accessible content, and writing style at play a part in how I present myself on digital platforms. This website will continue to be a work-in-progress, while keeping personal branding, marketing, and design in mind.