How I created a website for WK Legal using Webflow and Figma

WK Legal is a law firm that specializes in family law, criminal law, and civil litigation. They wanted a website that would showcase their expertise, professionalism, and values. They also wanted a website that would be easy to update, maintain, and scale.

I decided to use Webflow and Figma to create their website. Webflow is a no-code platform that allows you to design, build, and launch responsive websites visually. Figma is a collaborative design tool that lets you create and prototype user interfaces.

The design process

The first step was to understand the client’s needs and goals. I had a meeting with the WK Legal team to discuss their vision, brand identity, target audience, and content strategy. I also did some research on their competitors and best practices for law firm websites.

Based on the information I gathered, I created a sitemap and a wireframe for the website. A sitemap is a diagram that shows the structure and hierarchy of the website’s pages. A wireframe is a low-fidelity sketch that shows the layout and functionality of each page.

I used Figma to create the sitemap and wireframe. Figma has a lot of features that make it easy to create and share designs. For example, I used components to reuse common elements across pages, such as the header, footer, and navigation. I also used frames to organize the pages into different sections.

After creating the sitemap and wireframe, I shared them with the WK Legal team for feedback. They were happy with the overall structure and flow of the website, but they had some suggestions for improving the design and content.

The development process

The next step was to turn the wireframe into a fully functional website. I used Webflow to do this. Webflow has a powerful visual editor that lets you create websites without writing any code. You can drag and drop elements onto the canvas, style them with CSS properties, add interactions and animations, and connect them to dynamic data sources.

I started by creating a project in Webflow and importing the assets from Figma. Webflow has a feature that allows you to import SVG files from Figma directly into your project. This saved me a lot of time and ensured consistency between the design and development.

Then I created the pages for the website using the wireframe as a guide. I used Webflow’s layout tools to create responsive grids, flexbox containers, and columns. I also used Webflow’s typography tools to style the text elements with fonts, colors, sizes, and spacing.

I added some interactivity and animation to the website using Webflow’s interactions panel. For example, I added a hover effect to the buttons, a scroll effect to the hero section, and a slider to the testimonials section.

I also used Webflow’s CMS (content management system) to create dynamic collections for the blog posts, team members, services, and case studies. A collection is a group of items that share the same structure and fields. For example, each blog post has a title, image, author, date, summary, and content.

Using Webflow’s CMS allowed me to create templates for each collection item. A template is a page that displays the data from a specific item in a collection. For example, each blog post has its own template page that shows its title, image, author, date, summary, and content.

Using templates made it easy to update and maintain the website’s content. Whenever I added or edited an item in a collection, its template page would automatically update with the new data.

After creating all the pages and templates for the website, I tested them for functionality, responsiveness, accessibility, and performance. I used Webflow’s preview mode to check how the website looked and worked on different devices and browsers. I also used Webflow’s built-in tools to optimize the images, minify the code, and set up SEO (search engine optimization) settings.

Finally, I published the website using Webflow’s hosting service. Webflow provides fast and secure hosting for your websites with features such as SSL (secure sockets layer), CDN (content delivery network), backups, custom domains, and analytics.

The results

The WK Legal team was very impressed with the website I created for them using Webflow and Figma. They said it met all their expectations and requirements. They also said it was easy to use and manage.

The website also received positive feedback from their clients and prospects. They said it was professional, informative, and user-friendly. They also said it reflected the WK Legal’s expertise, professionalism, and values.

The website also helped WK Legal increase their online presence and visibility. They saw an increase in traffic, leads, and conversions. They also saw an improvement in their ranking on search engines.

‍