Website Design

Overall Site:

The navigation menu is positioned at the top of the page to make it easy to find. The header and footer remain the same for each page to promote continuity. Though there is no home link labeled in the navigation bar, both the header image and the centrally located company logo are links back to the home page. I utilized flex positioning to properly align the elements of the site. I also used a CSS reset to help ensure compatability across browsers. The color scheme was chosen to tie in with the colors in the header image and to bring to mind the baked goods offered by the bakery.

Home Page:

The home page of our website contains a welcome message and an aside with a preview of recent blog entries. A pink div outlines the main article that has a white background. Dark brown text was chosen to contrast with the light background and promote readability. I chose to use Georgia font throughout the site as it is a simple easy to read font and the use of the same font for all elements promotes continuity. The aside is outlined in a dark brown with preview images for each blog entry and a white background with dark brown text for each article.

About Page:

The about page outlines the purpose of our bakery and website and provides an overview of our design process. An image of baked goods being prepared sites to the right of the text to provide customers with a feel for our business.

Cakes:

The cakes page contains a table to detail the pricing of custom cakes. The table is outlined with a dark brown border to help each element stand out. There is a small amount of white spacing between each cell to promote visual separation. The images of custom and ready made cakes are arranged in evenly spaced articles in rows across the page.

Pies:

The pies page is set up in a similar fashion to the cakes page. A table at the top details pie pricing and the gallery of pie images below is set up in evenly spaced rows.

Baked Goods:

The baked goods page includes a main area to introduce our customers to the selection of goods that the bakery provides. To the right of this section there is an image of some of the bakery's products. Beneath both of these sections is a section containing three further images arranged in a row to showcase the bakery's goods.

Custom Order:

The custom order page uses a simple form with text fields and selection lists to allow customers to place order requests. The text is dark brown on a white background for contrast and the boxes have a light pink background that also provides a nice level of contrast. The date and time input fields display formatting prompts to help users with correct input and in most browsers the date box opens a calendar from which a pickup date can be selected. The only browsers that seems to not be compatible with this option is Safari. I am not able to overcome this issue with HTML and CSS but would like to use JavaScript in the future to make this consistent across browsers.

Blog:

The blog page includes a video that is outlined in a dark drown box. This promotes the visibility of the video. The video is set to autoplay and preload so that is starts when the user loads the page and plays on a silent loop. The video showcases the technique of cutting pastry dough which is in line with the blogs purpose of teaching baking techniques. Below the main article is a section containing images, text previews and links to the latest blog articles. This section has a dark brown background to promote contrast with the images and tie in with the formatting of the blog preview on the home page. At this time the blog article links do not lead to actual pages. If this site was going to be used in the future, then I would like to set up a content management system to make adding new blog articles easier.

Footer:

The footer is made up of three articles arranged in a row. On the left side is the company contact information and social media links. I originally had the company name at the top of this section, however, peer feedback related that there was too much information squeezed into this spot. I addressed this by removing the company name as it is displayed in other locations. In the middle of the footer is the designer name and copyright information. On the right hand side, is the company logo which also functions as a link back to the home page.