HTML and CSS

Exploring web design for the first time

Project Overview

In my interactive media class, we learned how to code using HTML and CSS. By the end of the course, I learned how to produce two sites, my blog and my portfolio, using simple HTML and CSS properties.

Year
Winter 2019 (10 weeks)
Platform
Atom
Role
Designer,
Developer
Deliverables
Portfolio and blog website

But first... Blog

Inspiration

When designing my blog, I knew that I wanted a layout that was simple and clean. I wanted the design to be minimal, only incorporating a few subtle colors into the color palette. A lot of the blogs that I like to follow are also minimalistic in its design, which therefore influenced the overall design of my blog. I took inspiration from theklog.co as well as an old Tumblr blog that I had from a few years ago. Although my Tumblr blog is a few years old now, it still embodied timeless elements of design that I still find very appealing, which is why I incorporated some of those elements into the design.

Wireframes V1

Originally, I wanted to do something similar to my Tumblr blog in terms of the navigation styling and header. I wanted to style things in columns and keep things simple, but focus the content in the middle of the page without any distraction elsewhere. I knew that I wanted to keep it simple with straight lines and clean fonts because I thought that they would look best within a minimalistic blog design.

After completing this version, I still felt as if there was something off about it -- as if there was something missing. I was thinking that it had to do with the navigation as I didn’t really like how it looked and felt that it would feel out of place in the design that I had in mind.

Wireframes V2

After receiving some feedback, I made a few changes to my blog design.  I think it made my design seem a little more simpler as header was not as big and distracting. I also changed the fonts that I used to be cohesive with the clean-cut look I was going for by opting for more basic fonts.

Originally, I had the text boxes for the different articles all be different sizes, but I opted to go for something simpler to make the coding process much easier. Instead, I had designed the two outer text boxes to be longer than the one in the middle, and then the next row would have the two outer boxes shorter than the one in the middle.

The larger boxes would have a brief text description and an image that relates to the content of the page. The small boxes would also have a text description, but will not have an image, but instead will have a black background to make it more salient.

Typography

In terms of fonts, I chose Raleway for titles and headings and Playfair Display for body copy/text. I knew I wanted a clean serif font for the titles, but then a sans-serif font for larger instances of text to make readability easier. I think the juxtaposition of the two fonts works really well together.

I think the changes that I made from my first draft of my blog design to the second really made the entire design more cohesive and appealing. By having the text boxes follow a certain template in terms of its size really pulled everything together so that everything isn’t all just a random size. In the beginning, I think I focused a little too much on the layout and having everything planned out without taking into consideration how everything would look like collectively as a whole.

The Finished Product

Hi there!

If you're here to connect with me, then you're in the right place! Feel free to reach out to me on my socials if you want to see what I've been up to.
Want to send me a message?