5 min read
No-Code Responsive Website
•
After creating my first portfolio on SquareSpace and learning about it's inherent design constraints, a mentor suggested to try rebuilding my site on Webflow. Through designing in Webflow, I learned the fundamental building blocks of a website and how these create an organized and structured interface.
With a new understanding of web elements and my knowledge of UX/UI design, I started a side gig of creating websites for small businesses.
Over the past decade, my brother-in-law has been successfully running his construction company, DMC, which specializes in demolition, utility installation, and excavation. As he continues to expand DMC, he reached out to me for a website that would help drive his business' growth.
Before starting the project, I met with my brother-in-law/owner to align on business objectives, project timeline, and expectations. During this discovery process, we outlined the project scope, his goals and the assets required to design his new site.
The primary objective was to grow his business by acquiring new customers and adding members to his team. I translated this to being able to show their trust and authority in construction through their website. The owner noted competitor websites that he liked and wanted me to pull inspiration from. The other goal was to get something simple up ASAP.
In a previous project with a residential general contractor, I encountered a similar objective of acquiring new customers. Given DMC's primarily residential clientele, I was able to use relevant research from that experience. This included information architecture and user interviews that touched on preferences of potential clients when browsing through service pages.
I focused on this problem to guide the design-build process:
How do I show DMC to be a trustworthy construction partner to their potential clients and a reputable employer to potential employees?
Through Webflow University, I gained a good foundation in HTML and CSS, understanding the box model and how elements are structured and styled. While Webflow simplifies the coding process with its drag-and-drop tools, my knowledge of HTML and CSS was essential in understanding the structure and limitations of web design.
I've learned to use Webflow features like flexbox and classes/combo classes to efficiently create responsive and consistent designs across different breakpoints. Creating a mobile-friendly website was particularly important for DMC, as user feedback indicated high mobile usage.
The website features several pages highlighting services and job opportunities, all designed with efficiency using classes and combo classes. The services page is a vital part of the user experience to show potential clients that DMC does business with quality and expertise, ultimately positioning themselves as a contractor that people can trust. The page layouts I previously designed for a general contractor, shown below, are examples of how I want to showcase DMC’s services and projects.
Since DMC did not have any job openings at the time of building the website, we opted to give interested users a way to send their resumes directly to DMC. These pages will continuously be developed with more pictures, project information and job openings when received from DMC.
With the limited time I had for research, I’m glad I had some relevant research that I pulled from to make informed design decisions. However, if I had more time or time in the future, I'd aim for more targeted research for this specific business. Designing in Webflow has been an enjoyable experience but I've only scratched the surface. I'm continuously learning it’s advanced styling capabilities like states and effects, and interactions.
This project has a lot of room for updates. So far, it has taught me to effectively collaborate with the client and deliver a simple, yet high-quality website that can position them as a experts in their industry and a reliable employer.
Also, if you have feedback on the DMC website feel free to email me your comments and suggestions!