I was asked to create a website for a restaurant that portrayed their vision: farm fresh ingredients right from the field to the table. I needed to make the website responsive, meaning they requested sections to resize/reshape corresponding to the view window (mobile, desktop, tablet, etc). I was given a logo and color palette, and was left to bring their vision to life.
This work is similar to other restaurant website designs in that it displays the company mission statement, company provided images, and a contact form for customers who want to reach out. Some inspirations were farm fresh restaurants in my locale, such as Joe’s Farm and Grill.
I started out with a wire frame design for each window size, and played around with them on paper until I landed on layouts I felt flowed the best. Then I started coding the HTML alone to get the information on the page. Coding the HTML first is a necessity of mine; I need to have all of the content laid out on the page before I can visualize the best way to organize it all. Once that was done, up next was the bulk of the layout with the CSS. I organized each section into groups and identified each group to move based on the window size. I adjusted the size of the images as well as the resolution to change based on the device and network being used. This allows any device to have a clean display when viewing this restaurants page. Without this, some users will feel the website is clunky or unpolished, leading to an assumption that the company must be the same way. Lastly I tested and fixed any bugs during testing, as well as showed a few people the website to get an outsiders perspective.
The website was completed on time, and with time to spare to change a few little things that the client wanted to change. This completed work demonstrates the value I bring to any client wanting a responsive website. This webpage lets the customer see a window into this restaurant formatted for any device they choose to use. The work can be viewed at my GitHub pages link https://astroactual.github.io/fieldandfeast/. Feel free to play around with your window size!
