Bradley and Wall
Bradley and Wall is one of my absolute favorite sandwich shops. It’s one of those places that I could just never get sick of.
So, when I had the opportunity to redesign their site and bring it forward to a modern, clean look, I had to throw my hat in.
Homepage
One of the first aspects I focused on right at the start was trying to implement my brand aspects into my template. Getting my fonts, logos, and colors in right at the start immediately helps make whatever I’m starting with feel a bit more unique.
With these down, I’m able to jump head-first into creating the homepage.
I knew that I wanted to have a punchy homepage, with a banner that could immediately grab your attention and lead you further down the page.
From there I continued working down the page, adding a “Daily Specials” section so that we could better promote the special items or sandwiches being run that day, and also so potential customers could get an immediate look at what’s on the menu.
One of the hardest things to get working in this 3-up was just getting my flag working correctly. I spent a lot of time just figuring out how to get the text to fit in the circle properly, and also having it hug the top right corner. Luckily I was able to piece a lot of it together and end up with a nice-looking carousel.
Next came a few more hero banners, which was easy at first since I could just copy straight from my first one right at the top.
However, when I went to try and shift the text over to be on the right side of the image, I immediately identified a problem.
The way that this original hero banner was set up was to essentially lay the text over top of the image and use the transform property to move it in place. However, when the default state is in the top left corner, and I want it in the middle right, the transform property starts breaking a bit, shoving the text immediately off the page when the page resized or just not showing the text at all.
In order to fix this, I ended up making a flex box on top of the image and then using rows to create a section which I could put my content into.
It was only after doing this that I realized I could’ve just done top: 0 and right: 0 to put it in the right corner and used the transform property from there.
Either way, It ended with a hero that was right-adjusted so that I could have banners that flow much better.
After that, the “See more” section and newsletter signup were simple, just adjusted some already existing components to get it to work how I wanted.
Lastly was just filling in my information for the footer, adding hours, a Google Maps link for directions, and links to Bradley and Wall’s social media accounts.
Subpages
Once I had my homepage created, the subpages became so much easier to work on.
The menu page consisted of almost entirely the 3-up created for the specials, with the only main difference being I let the image sizes be different as I thought that made for a more dynamic look.
The contact page was the same as well, being a fairly easy copy and paste of the information I already gathered for the footer.
I utilized the template I grabbed to create the “Leave a message” form, then just filled in my hours, phone number, and email for Bradley and Wall, as well as adding an embed for Google Maps so that it can sit under the address.
Though the previous two subpages weren’t too hard to make, when we got to the About page, I really needed to start thinking outside of the box.
In my original designs for the page, I wanted to do split banners through the whole page, one after another in order to tell the story of Joe Conigliaro, owner of Bradley and Wall.
However, just like the hero banner on the homepage, it is never as easy as it should be.
So I initially opted to try and use the preexisting banners from the homepage instead, though, I felt like it wasn’t really giving the same feeling that the split banners I planned had.
Thus began to mess around with flex boxes more, and eventually found an end result that I ended up really loving. It looks clean and modern, while also allowing for both the images and text to take focus.
Conclusion
Overall, I am super happy with how this site turned out, it really came out almost exactly how I had originally designed it, giving it both a clean look and some personality as well.
I know for certain that I will come back to this project and spruce it up over time, and also focus more on the smaller parts that go unnoticed when creating a rough site that is mostly meant to just work.
I look forward to taking this practice forward and utilizing it more as I continue to create sites in the future.