Project Type
The final project for SI339: Web Design, Development, and Accessibility
​
Challenge
Develop a website from scratch that:
-
Is responsive
-
Is well-designed
-
Uses grid and flexbox
-
Is accessible
-
Has a functioning contact form
​
​
Timeframe
1 month​
​
​
Key Takeaways
When designing a fully accessible website, there are many challenges that might not seem important at first. Eventually, I learned about choosing proper colors to avoid contrast errors, adding tab-accessible elements, using alt text for images, using different headings to separate the importance of sections, and titling images or important elements.
Process
Jump to:
​
Drawing Designs
The first thing I did was hand draw some of the designs I was thinking of for my website. This helped narrow down my ideas and pick one I wanted to create.
​
​
Creating Wireframes
The second step was to create a wireframe. For each page, three views were created: phone, tablet, and desktop. These designs varied slightly from the original drawings to increase the quality of the design. An example of the three different views for one page of the website is shown below.
​
​
Creating a Mobile View
For this website, I created a mobile-first view. This view was made to be viewed on a small device and was designed in a way that made it easy for a user to navigate the site. Design features that made navigating easier on the phone were having fewer pictures displayed to minimize scrolling and designing the navigation menu in a way that did not crowd the screen. Below, are a few examples of pages in the mobile view.
​
​
Creating a Tablet View
To create the second view, media queries were used in the stylesheet. This view differed from the mobile view in that the navigation menu was changed and pictures were added. Additionally, to minimize scrolling, some elements were placed next to each other, as opposed to one on top of the other. Below are a few examples of the pages in the tablet view.
​
​
Creating a Desktop View
In this third view, media queries were used again. This view was the most spread out. The menu was changed again, and more elements were placed next to each other. Additionally, the font was made larger so it would be easier for users to read the information on the website. There is a mouseover feature that was added to the desktop view. For the cards, the name and pictures of a restaurant are shown and when moused over, as seen below, the description of the restaurant is displayed.
​
​
Road Blocks
Coding a website from scratch can be very tedious and time-consuming. I had to be very careful to keep track of my code with comments and documentation. In the beginning, I didn't comment a lot in the HTML, and because of this I lost track of what I was doing, and I wasn't organized. After making sure to have proper documentation and comments, the project went much smoother.
​
​