top of page
Veggie Burgers

RAY'S GREEN BURGERS

Restaurant web page composition and development

Background

In college, I gained hands‐on experience on design issues specific to web-based presentations, learned web page layout and effective navigation, and delved into the design process. Through my Intro to Web Design course, I was tasked with creating and planning content for a restaurant site, Ray's Green Burgers. In this project, I created an engaging web presence for the home and menu page, while learning the basics of HTML and CSS authoring, web navigation/SEO, and web page structure. In developing a brand and identity for my restaurant, I implemented knowledge of design principles into web design while maintaining a proper balance between strong visuals and written content.

The course provided the building blocks of user experience to understand today’s technical affordances and how we can best design with a user-first approach—leading to a successful product (the Web site) that users will love. 

Upon completing the course, I was able to meet the following objectives: 

  • Learned Web page structure through the use of grid and CSS techniques

  • Learned the basics of HTML & CSS authoring

  • Learn the basics of Web navigation, relative vs. absolute URLs and linking up vs. linking down on your site

  • Implemented knowledge of design principles into website design while practicing proper file compression, management and publishing

  • Understood proper HTML semantics to properly classify content (for scan ability and SEO) and verify said semantics have been adopted by browsers through sites like caniuse.com while also taking advantage of some of the latest HTML5 affordances like “tap to call” to enhance the user experience

Reflection

This was my first project designing a website by hand-coding all aspects of the website. Looking back, there were a few things I would change if I were to re-do this project:

  • Add illustrations to menu headings

  • Tighten the body copy 

  • Fix the icon positioning 

  • Make the images hover

bottom of page