About this Site - Design

Getting Started

After get­ting an idea of what I wanted to ac­com­plish with the site (which I detailed in the pre­vi­ous post), I was ready to be­gin de­sign­ing.

Table of Contents

• Sketching
• Mockups
  • Home
  • About
  • Art
  • Blog
  • Projects
• Post Mortem

Sketching

I nor­mally start out with sketch­ing some ideas. Conveniently, I was go­ing to Seat­tle for win­ter break, so the hours on the flight sans in­ter­net was well-used.

I find sketch­ing to be use­ful for fig­ur­ing out lay­out and the flow of con­tent. I was now ready to start mak­ing some mock­ups.

Mockups

I use Affinity Designer for all of my com­puter graph­ics work. I used to use Adobe Illustrator be­fore I switched com­put­ers, and the over­all work­flow is very sim­i­lar, which meant a pretty low learn­ing curve for the tran­si­tion.

Home

I started with the home page. I tried to keep it sim­ple, and al­low it to act as a hub to all of the other pages.

I also wanted to keep the ter­mi­nal, and ul­ti­mately de­cided on adding a lit­tle flip tab to re­veal the “inside” of the site.

About

One of the first con­di­tions for the About page was that I had to in­clude a pic­ture of my­self. However, im­ages al­ways raise the risk of dis­rupt­ing the styl­is­tic con­sis­tency (especially when the photo is­n’t that good). I eventually de­cided to add an over­lay of the theme color.

Art

A huge rea­son for the re­design of the site was be­cause I wanted a place for me to show off the things that I draw and de­sign. This is where the de­sign things got in­ter­est­ing.

For the home page of the Art sec­tion, I wanted to keep it as a sim­ple mo­saic lay­out, with­out any text. In fact, in the orig­i­nal de­sign, I had en­vi­sioned tiled and in­ter­lock­ing blocks. The goal was to have a wall of art, and click­ing on one would lead you to a page ex­plain­ing the piece in greater de­tail.

This de­tail page was more in­ter­est­ing to work with. I wanted to cast at­ten­tion pri­mar­ily upon the work, so I chose a dark back­ground. The piece is dis­played promi­nently as the first item, but un­der­neath is the same lay­out as a blog post.

This is prob­a­bly the least pol­ished part of the site. Some con­cerns I have about the de­tails page is how the col­ors might clash. The cur­rent color is far from neu­tral.

Blog

I wanted to keep the blog as a sep­a­rate en­tity from the rest of the site. This informed some of my de­ci­sions, such as hav­ing the nav­i­ga­tion at the root of the blog be a “go to web­site” but­ton, in­stead of the nav bar as shown on the rest of the site.

The blog is mainly text-based, so I stuck to a black and white color scheme, like ink on pa­per. I’m sat­is­fied with the very min­i­mal­ist aes­thetic.

I strug­gled more with the page of an ar­ti­cle. I had a cou­ple of choices to make.

• Typeface:
  • I planned on ini­tially us­ing two type­faces: Open Sans for head­ers, and a serif type­face for body text. However, it looked kind of busy, so I ultimately de­cided against it. I may re­visit the idea in the fu­ture, though, be­cause I kind of like the look.
• Cover photo:
  • I was un­sure of how I would han­dle cover im­ages. Initially, I planned on mak­ing the cover im­ages fit into the width of the ar­ti­cle, but I ended up pre­fer­ring the ex­pan­sive feel­ing of hav­ing the im­age stretch across the en­tire width of the screen.

Projects

I prob­a­bly strug­gled with the Projects page the most. I tried 5 or 6 dif­fer­ent card de­signs be­fore set­tling on one that I liked. I played around with work­ing pro­ject-spe­cific col­ors into each card, but I fig­ured that would be too busy.

I added a sub­tle drop shadow just to keep things in­ter­est­ing.

Post Mortem

Overall, I’m very sat­is­fied with the de­sign of this site. Nonetheless, there are still a cou­ple of things that I may change in the fu­ture.

• Art Detail Page
  • As I pre­vi­ously al­luded to, I’m not en­tirely sat­is­fied with the de­sign of this page. I have two main con­cerns.
  • I’m not happy with the color choice. It looks kind of muddy, and does­n’t re­ally al­low the pieces to stand out that much.
  • The pre­sen­ta­tion of ad­di­tional im­ages is flawed, es­pe­cially since some im­ages don’t con­trast as well against the back­ground, and they’re cur­rently very small with­out a way to zoom in on them.
• Project Cards
  • I’m still not en­tirely sold on the de­sign of the pro­ject cards. I think the pre­sen­ta­tion is a bit too plain.
• Blog Post
  • Font color is some­thing I’m still work­ing on with the blog. The color of links is harsh, and stands out too much. The pure black text on a pure white back­ground also seems jar­ring. However, I like how sharp it feels with that much con­trast.
  • The Table of Contents needs to be dealt with to make it more in­ter­est­ing, or at least more vi­su­ally ap­peal­ing.