Tools & Software:
HTM5/CSS3
Photoshop
Adobe XD
aXe
Wave
W3C Validation
My website is based upon my Dad’s instagram page, where he uploads pictures and videos of barbeque food that he cooks. The site is fully responsive on mobile, tablet, and desktop views, and has passed all accessibility standards through three different validators. Through this project, I learned a lot about proper web design techniques, implementing and adapting mockups, and the importance of accessibility and information hierarchy.
To accommodate responsive designs, the first thing I did was build was the navigation bar. This was done using flex so on desktop, it is displayed in a row but collapses to a column on mobile. I found that this was useful to establish the overall page size and content for each page. By doing this, I had a better understanding of the user journey and how the site would be navigated. Since the page is focused around images, I made sure to keep it very visual. This is why I chose to include parallax images as headers, flashing buttons to attract the users attention, and a balanced color scheme to highlight certain elements.
I first built the photo gallery using flex to maintain image size and quality across devices. I found that four columns were sufficient on desktop, but the pictures needed to be stacked on mobile view to properly represent each image. I then created the homepage, striving to keep it simple yet effective. I knew I wanted to use a button to create a clear CTA, and chose a flashing CSS animation to do that. By clicking on the button, it takes you further down the page to reveal the entire cooking process of one meal with pictures and a video to develop interest and understanding from users. From there, there is another button that redirects to the photo gallery to view more content.
I then built the equipment page and included a keyboard accessible slideshow at the top. This was one of the more challenging parts to implement, but gave me an introduction to Bootstrap and why it is so popular. I then formatted the following text boxes and images using grid, so I could achieve an alternating pattern and hide unnecessary content on smaller screens. Finally, with the experience I learned from building the earlier pages, I created the about and contact page. These pages were less visual than the photo gallery and equipment page, so I kept them much more simple and shorter.
