Building My Brand: Website

Once I officially finalized my professional creative strategy, the next step for my brand was to build my website. With no knowledge of where to even begin, I started the Webflow 21-Day Design Portfolio Course.

As I watched through the video lessons, I replicated what was being done at the same time while watching, but integrating my elements and words instead. By doing this, I was able to learn about the structure and usage of Webflow, beginning to build my website at the same time.

The Webflow course began with building a hero section for the homepage. I followed along with the video but used my previously made wireframe from my creative strategy, shown below as a guide instead.

I created my hero section with an introduction, a picture, and my explainer video that I made in Canva. Once this section was done, I moved on to creating my navigation bar which I personalized with my logo, colors, and individual pages that I knew my website needed. Similarly to the navigation bar, I did the same thing in creating a footer with the same type of customization. After including all of the necessary buttons and icons to these elements, I linked them to where they were supposed to link users to go. The header and footer were integrated throughout the rest of the pages on my website. Once I was done with all of these parts, my home page was complete.

After the main page of my website was complete I was familiar with the structure of how Webflow worked, so I then continued to build on the rest of my pages. I started with my 'about' page where I wrote a longer introduction to myself than the one on my home page, once again including another picture of me. On this page, I also included my brand purpose and values which I previously wrote about in another article.

When it came to building my 'contact' page, I followed another Webflow video from the course of how to building a contact form. I also decided to include a button that leads to my Linkedin on this page as well.

Building my blog page, was one of the most time-consuming parts of building my website. I learned how to build this page following Webflow's video on creating project pages. I was able to quickly create a template using the content management system (CMS) feature where I included all of the required fields for my blog posts such as image, title, publishing date, summary, and link. I then created an Excel sheet with all of these parts for each of my previous articles, which took the longest.

After this was complete though, I was able to quickly import this sheet to Webflow to automatically have my blog posts put into a template following the fields. I then went on to use the collection list feature to create a link block that included all of the fields from my template which allowed for users to click on individual blogs to be redirected to the correct blogs on LinkedIn.

I followed similar steps in the creation of my portfolio as well where I used the same features to link my projects and work. By clicking on the images or headers below, users would again be directed to individual pages that further showcased my work.

An example of one of my project pages is down below, with a project summary, and links to my brand's work. With all of that work, I completed building my website. As you can see throughout all of the pages on my website, all of the visuals are consistent with the integration of my brand's fonts, colors, logos, and colors.