AJ's Steakhouse
Website Design, UI/UX, Typography, Branding, Layout
AJ’s steakhouse is a restaurant in Homer Alaska. The thing that sets them apart is they use very high quality cuts of beef. They really wanted to feature this. Other than their location being scenic, they wanted to stand out as a more sophisticated eating establishment.
Programs Used
Header & Hero Image
I wanted to use a header that wasn’t as large and imposing. I liked the transparency on this header because you could use strong imagery without taking up too much real estate on the page hero image. I liked how the transparency allowed the hero image to show through and be the focus of the site, especially when it's the first thing the user sees.
I felt that this image sets the tone for the color palette and branding of the rest of this site. It is imagery that uses darker tones and feels al little bit more sophisticated than your typical steakhouse. I also felt that the simple but modern logo helped tie the brand and image together. I toyed around with different variations of text over this hero image but I felt that it was important to let it stand on its own.
Transitional Component
As a transition component from the hero image, I used a style that I felt was balanced between the two columns of an image and copy. I wanted to use a lighter color to contrast the above image but I didn't want it to be a stark white. A cream or off white is being used in this section and throughout the website. I used typography that paired well together and felt modern. I liked the paring in having the script be simple and shorter adjectives.
I also made sure that I included a CTA on this section so the viewer could navigate the website more easily. Under the header text, I used an icon of three dots. This is used throughout the website as a divider. I felt like this was a minimalist transition that helps to break up my content without being imposing. I also made a lot of these very light in some places so they were almost somewhat transparent to the user.
Informational Transition
This next section is some information detailing the different cuts of meat. I used iconography that was simple and hand-drawn. Since this steakhouse is located in Alaska, it seemed appropriate to have hand-drawn icons to keep the rustic feel to it.
Flipcards
A big part of AJ’s brand is their cuts of meat. This was a great opportunity to showcase some of this information in a creative way that is also visually cohesive with the rest of the homepage. This also will help with SEO. I choose to use flipcards to show several different cuts of meat and with the correlating information on the other side of the flipcard. This way, I could show a large amount of information without this section feeling like a block of text. I also liked the flip card component because I could vary the typography on each side of the flipcard.
Seafood Transition
I needed a simple component that I could transition into the flipcards of the seafood section. I really liked how this iconography turned out. It was a simple but hand drawn icon. I felt like if fit the brand of a steakhouse in Alaska.
Seafood Flipcards
I used the same layout as the cuts of steak options. I was worried about having enough space for the information that the client was trying to convey. I felt like the flipcards were a great way to do this. If I were to go back and redesign this site. I think I would experiment with these sections of flipcards. I feel that we could do a lot more things to create other links and article pages that not only simplify the design but help the user experience and overall SEO.
Menu Prompt
After all the information on cuts of meat and seafood, I felt that it was the best to have a CTA about the Menu. I once again used the simple icon of three dots as a divider. I liked the style of the button that was used. The thin lines match some other elements that use the same weight of line.
Reviews
In adding in the reviews, I made sure that I had 3 simple reviews that had about the same amount of text. This made it much easier to format and it gave each review about the same visual hierarchy. I made sure to pull a review from different platforms and you can see that each one is from a different source.I liked this section a lot because I was able to use several design elements from other parts of the website. I am using the whole color palette, all of my typography and my minimalist dots and line elements.I think overall this section is my strongest as far as simplicity and consistency with AJ’s branding.
The one thing that I would change on this component is switching the name of the reviewer and the platform that this review was pulled from. Looking back at this section, it makes more sense to highlight where the review was from and not the person that left the review.
Catering Options
AJ’s offers catering but it wasn’t their main focus and that is why this element is toward the bottom of the page. The imagery used in this element was key to the formatting. The text on the right of the box doesn’t feel overbearing or out of place. I was really pleased to be able to use this photo as a background.
Explore the Area
This section was put in mainly for the SEO benifits. Each one of these components is a flipcard that links to a separate page with information for guests that might be tourists or new to the area. This section really lended itself to this restaurant because of the tourism that Alaska gets.
Map
I wanted to include a map that fit the color palette. I also thought that including this map was really valuable to show the location was right on the bay.
Footer
I wanted to use a footer that tied the whole homepage as a summary to my design. From using imagery that contained the same color palette as the header, to including a golden divider on the bottom. I made sure that I included a call to action on the footer, just the same as the header.
