Huzaar Website Project using Figma and Webflow

The logo was already designed, yet some fine-tuning was needed for the color scheme and how the logo and icon were applied across certain applications. It didn't quite meet my client's exact preferences. Following a brief discussion, we settled on this revised color palette:

Selecting colors is one thing, but achieving harmony in their application is something else. The true challenge arises when you begin the actual design process. In a subsequent stage of the process, I opted to incorporate two additional hues: a soft blue and a gentle green. The soft blue had already been introduced in a design for a giveaway box with postcard sent by my client to their top customers, as part of the announcement and celebration of the launch.

Apart from the color palette, New Hero was chosen as the main typeface, the same typeface used for the logo. Once these two factors were defined, it was up to me to create the site’s design based on a quick brief about the sections and the vibe of the site should convey.

Design in Figma

From Adobe XD to Figma

For me the choice was obvious to use Figma for the design of the site in combination with illustrator for certain graphical elements. Luckily I could easily copy and paste icons, or other graphical objects from Illustrator directly into Figma. This was really a big plus for me. I’ve quickly became accustomed to Figma after having used Adobe XD for such a long time. I preferred prototyping in XD way more though, but I can’t deny Figma's advantages. My first experience involved collaborating with a team located at the other side of the globe. I was amazed by the ability to track each other's cursor movements, which undoubtedly enhanced efficiency in working with developers and other team members.

What bothers me most  about Figma is the confusion surrounding how projects, pages, or documents function. Even with just a handful of projects in Figma, I often struggle to navigate smoothly in this application. That's why I've stuck to the free plan for now; however, I anticipate eventually upgrading to a paid plan. Yet, deciding which plan suits me best seems like a daunting task, as I've gathered from the experiences of other users.

Basic Set Up

For small projects like this website I don’t bother much in using Components and such, especially not during the initial phase when I'm sketching out the first draft of the homepage design. The only step I took was incorporating the brand colors into the Library for quick access and to ensure I was applying the correct color values. In a subsequent phase, I also introduced a few text styles and several components like the top bar, footer, a CTA button, and a quote—elements I anticipated reusing later on.

As for the topbar I incorporated hover effects for each menu button link. For my design, the only necessary change was the font color. Reflecting on it now, I realize I didn't set this up in the most efficient manner. I created a separate top bar state version for each link, where I manually adjusted the text color for each item. While this was easy to accomplish in Adobe XD, I struggled with it in Figma at the time. With a looming deadline, I didn't take any time for some research. If I were to tackle this again, I would have created a Component for a single link, utilizing the Auto-layout feature, and then generated a second instance for the hover state. This way, I could have reused the Component for the other navigation links.

For the mobile version I only created a quick prototype in Figma showing the interaction of the menu and that's it. The rest was completely created directly in Webflow.

Coding in Webflow

The above title is actually misleading. It’s exactly because the coding is been taking care of for you that I choose Webflow. However, don’t get me wrong, you're still in control of the code, and you need to know and fully understand the HTML & CSS markup language to create good and well structured webpages. It’s just that the heavy lifting is done for you. In Webflow you create your page visually, almost similar as creating a layout in InDesign. Webflow's GUI  is beautiful, really well-thought and very user-friendly. IMHO, if you know a bit of HTML & CSS, you can only love working with it.

I don't have to trouble myself anymore over the complexity of Flexbox and Grid.

Webflow has many great features. One feature I truly use a lot is the option to create 1 reusable Components. It is a very powerful feature and you can go really crazy with this. You can nest them, have dynamic parts in it... It is just one of these things that makes Webflow so efficient IMHO. Since it's been a bit of a while since I last coded a site, I was a bit behind with Webflow's new features and updates. For this project I've also used 2 Variables for the first time. I didn't exploit it to its very limits though, as you can do a lot more then just saving a bunch of colors. The cool thing I also discovered is, that when I opened an older project, I noticed that Webflow gathered already color variables automatically for me.

The nice thing about using Weblfow is also that you can download your complete project including all the HTML, CSS and Javascript files and go from there. That’s exactly what I did for this project. Although webflow offers the full package deal including hosting, CMS, e-commerce platform... in the end you decide. It is perfectly fine to use Webflow only for the front-end. For this project I also chose to temporarily publish my static template pages under a Webflow subdomain and with a password protection just to demo things to my client. Then once everything was approved, I just unpublished the site while keeping my project. My next step was moving everything into Nova and start preparing the templates for Craft CMS. Talking of which... I'm also in the middle of writing an article about this part as well. So stay tuned for the follow-up! 😉