ahmedyusufdesign.com

Why self-built?

I chose to build this site myself, using HTML and CSS rather than a template or website builder. I wanted to better understand the engineering underneath the tools I already use as a designer and to showcase some technical range beyond design tools. Learning to write code directly gave me front-end literacy, and more importantly, it improved how I think about design. I now design with an awareness of what's simple to implement and what creates extra work for an engineer when a file is handed off.

Building it myself was also a deliberate challenge: could I make a site that stands up visually to portfolios built on heavier frameworks, while running on far less underneath? A fast, lightweight site that still looks considered felt like an exercise that good design doesn't always require heavy tooling to back it up.

Constraints

No JavaScript, all interactions rely on native HTML and CSS
Minimal CSS, built using Atomic Design principles for reusable, composable styles
Fast load times
Mobile-friendly and responsive layout

Key decisions

A contact section reachable from every page

Contact information lives in the footer of every page. In general it's a nav item that stays in place but scrolls the user down to the footer. However, inside a project page this contact button sticks to the top and follows the reader as they scroll through the project.

The tradeoff is immersion. A sticky element competes for attention and reminds the reader they're on a website with other destinations. I decided that making sure a reader can act on interest the moment it happens mattered more than protecting an uninterrupted read all the way through.

Omitting the navigation bar inside a project page

I decided against having a navigation bar inside project pages, my reasoning was to let the content breathe and be immersive. On pages where a nav bar exists, it isn't sticky. Page length on those pages is kept short enough that a fixed nav isn't necessary to stay reachable.

Instead, there's a back button accompanying the contact button. Taking the reader back to the home page. This goes a bit deeper into my design philosophy, that while it's convenient for everything to be accessible from everywhere, it takes away from the user's mental model of the site architecture, which is important for the user to know what content they've already accessed through different means.

What I learned

I learned that small technical habits, like consistent file naming, matter more as a project grows, even if they don't show up as a problem right away.
I learned that constraints force clarity. Without JavaScript to fall back on, every interaction had to be solved with simpler, more deliberate HTML and CSS.
I learned that understanding the underlying code changed how I design, since I now think about implementation cost while I'm still designing.
I learned to think in reusable components rather than one-off's, which is a habit I didn't have as a purely visual designer before this.

Next steps

Next, I plan to keep refining this site as I learn more from future projects, aiming to improve the visual design while compressing the underlying code further. The goal is to improve my understanding that better design and less code aren't incompatible, and that engineering itself takes some creativity.