From concept to code: a scalable agency website template

This is a personal project of mine designed and developed throughout my web development course. During my time at Dewynters, I researched agency websites, identifying optimal methods to present information and showcase portfolios. This inspired me to create this hypothetical template for an agency design website.

STEP 1: DESIGNING IN FIGMA

I started with wireframes outlining each webpage. As content grew, I developed a UI kit and evolved into high-fidelity designs. Using Atomic Design principles, I created responsive components and mobile prototypes, resulting in full high-fidelity prototypes.

DESKTOP - HI-FI WIREFRAMES

Desktop wireframes

MOBILE - HI-FI WIREFRAMES

Mobile wireframes

STEP 2: WEBSITE LAYOUT IN HTML5

I translated the Figma design into code using Bootstrap 5. Without Javascript at the time, I adapted certain interactions for compatibility.

STEP 3: WEBSITE STYLING IN CSS3

I built a UI kit for text styles, streamlined the CSS with Sass, and optimized maintainability.

SAVING PROJECT VERSIONS ON GIT

I used Git branches for updates, merging them into the main branch after testing.

HOSTING IN VERCEL

After setting up the repository, I hosted the project on Vercel for free deployment.

LINK TO WEBSITE