Black Crag is an outdoor shop that sells gear for hiking and camping—boots, bags, tents, clothing, and more. My task for this project was to build a website with one clear goal: drive people to visit the physical store. This is not an e-commerce site. That singular focus shaped every design decision I made.
Planning the Content
Pages
I went for a straightforward, easy-to-navigate layout with content divided into four pages: Home, Gear, About, and Services. All of this was designed with the priority of bringing users to the physical store.
For the home page, I wanted to include all the essential details a user might need, even if they didn’t visit any other page. This included a call-to-action to visit us, our address with a map, a preview of our products, and upcoming events viewers might want to join.
The gear page was where I had to think most strategically. Initially, I planned to display individual items say different types of boots, different types of tents etc.
Then I realized this approach felt too much like an e-commerce site. Instead, I categorized products and provided detailed information users would want before visiting, like what brands we stock, price ranges, available sizes, and whether items are in store. This reinforced the message that they needed to visit in person to see the full selection.
The About Page was dedicated to the brand, telling the story from the beggining till present day, showing the brand stats over the years and the team of experts that run the shop. This helps users know they are in safe hands with us.
Services pages showcase what we offer beyond selling products like our repair services, boot fitting expertise, rentals etc.
Typography
After testing several font pairings, I decided to use Roboto Condensed for headings and Source Sans for body text. Source Sans felt the most readable, especially at smaller sizes, while Roboto Condensed added contrast and structure to headings.
Brand Colors
I chose Brown as the main brand colour because it feels connected to the outdoors. It helps give the brand a sense of reliability and durability. I used Orange as an accent colour for buttons and links to add warmth and energy. Together, these colours reflect both the rugged nature of the brand and the sense of adventure it encourages.
Logo
For the logo, I explored a badge-style design using a mountain symbol and the brand name to represent the outdoor focus of Black Crag. I chose this approach because the symbol is easily recognisable on its own and can work across different contexts, such as embroidered on gear or printed on merchandise.
Development
HTML
One of my priorities for this project was making sure my HTML was as semantic as possible. Using elements like <section>, <article>, <time>, and <address> instead of relying on generic <div> elements everywhere. This project made me appreciate the <article> element. It replaced so many divs in my markup. When I wasn’t sure whether to use a div or article, I asked myself: “Could this group of contents stand alone? If yes, it should be an article.
Another priority was avoiding classes everywhere. Instead, I used IDs for sections and relied on element selectors in my CSS. This forced me to think more carefully about my HTML structure as it made my HTML cleaner and more meaningful for accessibilty purposes.
CSS
In my CSS, I prioritised the DRY (Don’t Repeat Yourself) principle by defining shared styles once and reusing them across the site. For example, all <h2> headings use the same colour, font-weight, and font-family, so I declared these properties globally rather than repeating them in each section. I also used CSS custom properties in the :root selector to define my brand colours. This made it easier to keep the design consistent and allowed me to update colours across the entire site from a single place.
For responsiveness, I’ll admit I got carried away and designed for larger screens first. When it came time to adapt for mobile, I realized how crucial mobile-first design is. I had to rewrite significant portions of my CSS, starting with single-column layouts and progressively enhancing for larger screens. If I were doing this project again, i would definitely remember to start mobile first. It would have saved hours of refactoring my code.
Leave a Reply