Week One:
After attending Web Design II during the first week of courses for 2021, my class has reviewed the basic principles of website design that I was taught in Web Design I. Although the lessons were simple, I found reviewing to be very helpful in that I was able to once again understand how professional web site designers craft the sites that are used by people every day. Having reviewed the lessons from last year, I feel that I can progress and move on to more complicated and sophisticated ways of building websites that I could not even imagine before.
Below is a screenshot of the original page, which I did my best to copy using the various techniques I’ve learned using only HTML.
The image below showcases some of what I have learned about HTML, and is a section of the code that I wrote for the week 1 assignment.
Finally, below is the finished product that shows what the code above turned out to be. It shows all that I’ve learned in class so far.
Week 2:
This week, the class began a 3-week project to create an email blast. Several steps have been incorporated into the creation of the final project, including, personas, wire frame, and a final mock-up. The screenshots of each step of the project can be seen below:
Week 3:
This week I began with the creation of the final version of the email blast assignment. I modified the still version of my email blast that can be seen above by making the earth in the center an animated GIF. I also altered the text by removing the image and replacing it with the paragraph tag, fitting it to the size of the spot, changing the background color, adjusting the alignment, and changing the font family. Lastly, the image of the button at the bottom of the design now works as a clickable button that takes viewers to another website.
Week 4: The Use of Chunking in Websites
Part of this weeks assignment was to go to https://alistapart.com/ and scroll to the articles to find one that interested me. When I found one that I thought was interesting, I would analyze how fonts and chunking make the article more readable. The article I chose was Figure It Out which described color and the way it is used in design. The article started by saying “Color is, without a doubt, the visual element most often misunderstood and misused.” After reading about chunking, it was clear that this process was used extensively in this article. Thoughts were divided into small paragraphs that were often started with a colorful heading. Additionally, ideas were summarized using bullets to make the concepts more rememberable. The article also used a good amount of white space as well as other illustrations to get the meaning across without the page becoming too busy. At no point in the reading did I feel overwhelmed by the amount of information which, at times, could be a lot to comprehend. After finishing the article, I went back to review and noticed that it was actually much longer than I thought it was. The chucking up of information helped to make it much more readible.
Week 5: Landing Page
This week for my Web Design II class I was required to complete two wireframe designs and two mock-up designs for my landing page site. One design will be for a mobile device and the other will be for larger screens like a computer monitor. The wire frames for each are shown below:
The mock – ups for each are shown below:
Responsive Web Design
This week for my web design II class, my peers and I explored the way in which some websites scale and others do not. Those that scale are called responsive web sites and it was interesting to review an actual site after learning about the design techniques. The site that I though of immediately was Rush.com (https://www.rush.com/). The site functioned well on both my laptop computer and my iPhone. I had never considered before that no matter which type of device you are using, the site has to function just as well. The next quality that I paid attention to was how the site reacted when I expanded it or minimized it. In each case, the site still had god readability and the images kept the same quality. I also examined the navigation bar atop the site to see how it would react for viewers. Despite the fact that the website is available on multiple platforms, the navigation menu still functioned well. It was interesting to see how the text and images maintained the same ratio from a users perspective no mater the device. The last section of the site that I found interesting was the shop area. The checkout experience was the same no matter which device I used. Although I had been using the internet for as long as I can remember, I had never taken into account the fact that responsive designs areas important for all users and sites.
Final Landing Page
This image shows my idea for a webpage which attempts to sell face masks for the COVID – 19 pandemic. As the sickness is unfortunately a global disaster, a web page like this is one that everyone can relate to. Moreover, it displays all that I’ve learned in terms of web design and style. All – in – all? I’m impressed with myself!
The four wireframes above are each different layouts for webpages. While they are all similar in that they feature header and footer elements, as every existing webpage does, the layout of images and text clearly differs from one design to the next. From completing this assignment, I was able to gain an even better sense of just how existing websites are constructed, and was able to see that there are a great many ways in which to layout designs. Although this project was, undoubtedly, completely different than the last, it definitely helped greatly in. showing me another side of web design. Additionally, this assignment showed me that there is no true “correct” way to lay out webpages.
Matt's Graphic Design Blog 