Web Page Assignment

The assignment was to create an web page using html/css and an image to show our logo and talk about the design process.

responsive-screenshot

Process

I used Adobe Illustrator to export a png graphic for my logo, and marked up my blog post into semantic HTML using SublimeText3 (my Emmet plugin saves me a lot of time on this step). Once the content was marked up, I had to make some design decisions regarding my message/audience and implement those decisions using CSS.

Message/Audience

The message is simple, focusing in on the design process of my logo – the decisions I made, why I made them, and the tools used throughout the process. I decided that any audience interested in this information would most likely be quite tech-savvy, which increases the chance that they could be reading from a mobile device. For this reason, I decided to focus most on readability – after all, it is an article to be read – there is no other interaction necessary.

Top Thing Learned

There is no need to over-design – the purpose of this web page is the written content itself, so all design decisions focused around that purpose.

Color Scheme

I stuck with the simple black on white for maximum readability, and threw in a dark brick color for the heading. I arrived at its hex (#D29D30) by using a brighter and more saturated version of the logo color (Monochromatic Color Scheme).

Type Decisions

I used a font family found on Google Fonts called Alegreya. This family includes both a serif and sans-serif version in a variety of weights and styles. They are designed to be used together and many glyphs use the same spine. I used a relatively thin weight because this was easier to read.

  • Body Copy in Alegreya Sans, 300 weight.
  • Headers in Alegreya, 300 weight.

CSS

Because the purpose of the article was the written content itself, I wanted to maximize readability and accessibility on any kind of device. Because of this, I used media queries to alter styles as the screen got wider.

All of the typography was sized in ’em’s, which are based on the pixel-height of the body. Because of this, I could write media queries that simply altered the font size of the body itself, and the changes would cascade proportionally to the other elements.

I made design decisions that left a lot of room to breathe, with wide margins and good spacing between lines and paragraphs.

Leave a Reply