I'm Morgan McGuire (@CasualEffects). I've been working on computer graphics and games for 20 years at great places including NVIDIA, University of Waterloo, Williams College, Brown University, Roblox, Unity, and Activision.

See my home page for a full index of my blog posts, books, research, and projects.

Saturday, January 7, 2012

New Website Design

It was time to replace my original placeholder design of the Casual Effects website, as the release of The Graphics Codex nears.  The original design is below on the left and the new look is on the right:



The original took 30 minutes when I needed something to reserve space on the newly registered domain. The redesign took me about three hours.  About one hour was figuring out what I wanted, another half an hour was implementing it, and the rest was largely using CSS to hack the style of the embedded Twitter and Blogger feeds, which are produced by third-party JavaScript and CGI scripts, and tune the whitespace and colors.

Tools
I'm trained and primarily skilled as a scientist, programmer, and engineer--not a graphic designer.  I know many principles of graphic design but don't have particular skill there and don't know how to use any web design software.  So I try to stick to simple designs and create my web pages by coding directly in Emacs using HTML5, CSS, JavaScript, and XSL.

To extract the feed from Twitter, I used their embedding widget.  To extract the feed from Blogger, I used code by FeedWind.  Each can be somewhat customized; I then used custom CSS to hack the rest.  The Chrome browser's "Inspect this element" command was essential for debugging during this step.

Layout
I wanted my website to list currently active projects and current twitter and blogger posts.  This site is for my independent ("hobby?") projects, so it should also accurately portray the one-man show and indie aspects.  So, to design the website, I looked at the sites from some (much bigger!) indie game teams that I admire, including:


All mostly follow the "WordPress" look of a fixed-width center column with a side-bar for a twitter feed.  I like the way that Unknown Worlds and Mark ten Bosch list their projects with a big image and short description, so I mimicked that.  Unlike most sites, I didn't want the blog front-and-center, so I pushed it down to the bottom and left it as headlines, not the actual blog (i.e., this page!)

Title
I didn't have any new ideas for the title, so I kept the original Casual Effects stylized text.  The carbon-fiber background was too busy to keep behind all of the new text, so I pushed that to the far background and used plain white.  The drop-shadow on the title was too extreme against white and other sites all have a clear separation of title area and body, so I put a solid gray banner behind the title.

Color
When you're not a master of color, I believe that it is best to limit your palette. In this case I chose to simply vary the value of the already primarily monochrome scheme and add a single accent color.

I kept the yellow/gold from the title as the accent color and used it for hyperlinks.  I then used the gray from the title for headers so that they wouldn't fight for emphasis with the body text.  I likewise made the headers all lower-case to echo the formatting of the title and again de-emphasize them.  I hope all of the lower-case comes off as embodying the "casual" from the title, without being over-stylized.

The gray in the headers is slightly darker than the title bar--the larger expanse makes the title bar seem darker, so I had to compensate.  The link gold is darker than the titlebar yellow to make it more readable.

Note that the Endlyss logo is intentionally gray and monochrome and the image for The Graphics Codex is primarily monochrome because it is just a picture of an iPad and iPhone.  I'd be happy to have more color here if future projects merit it, but it was convenient that these are neutral and will slide into any theme.

Fonts
I find sans-serif fonts hard to read.  They were originally designed for titles and for small text on low-resolution displays.  The latter made them associated with computers and "high-tech", so they are (over) used on the web.  I use serif fonts (preferably Georgia, to not look exactly like everyone else's Times New Roman) for body text and sans serif (the old Helvetica standby) for titles.  I usually justify text, but these paragraphs are short enough that they look better with a ragged right.

I added a lot of white space between elements to keep the design clean without borders and rounded the corners of the center box.  The round corners echo the lower-case titles and stand out a little from the default square that you see on most websites.

Shadows
The title and main box have ambient-occlusion style drop shadows.  They are primarily to separate the objects and create depth and contrast without appearing as a concrete visual element.  I modeled them on the default drop shadow parameters on OS X.




Posted by at