Crystal's Adventures in Webdev Land » design

Seelund Trading Co Guild Website

Crys — Sun, 18 Mar 2012 21:44:57 +0000

This is the website for my World of Warcraft and Star Wars: The Old Republic guild, Seelund Trading Co. The base site is built on phpbb3 with the index and information pages maintained in the cms MX-Publisher (whose website seems to have vanished as of this posting. Guess it’s a good thing I can update and change the programming as I need to myself). I have made substantial programming changes to my copy of MX, including changing the way news posts (posts in the forums that are designated as “Announcements”) are sorted so that the one that expires soonest rises to the top of the front page.

The biggest amount of work I’ve done on the site though is the custom theme. The current design is the second — the first included only World of Warcraft imagery back when we were a WoW-only guild. I used the default phpbb theme as a foundation and then rewrote the better part of it so that it would properly reflow on a smaller screen or with non-default font sizes. The images are all manipulated/cutout screenshots I took from the two games.

As part of both designs for the site, I created logos for the guild, which are used in promotional items such as videos and recruitment posts:

December 2011

February 2010

Future improvements planned for the theme include a mobile-specific version and having the characters at the top randomly chosen from a pool of images of the current members of the guild on load. Current programming projects in progress on the site include a section for user-controlled character profiles and an event calendar that users can post to as their characters (watch the blog for project updates).

Crew Skills Chart

Crys — Sun, 11 Dec 2011 23:42:38 +0000

I created this chart to show the relationships between the different crew skills in Star Wars: The Old Republic for my guildmates and for fellow players in other online communities.

The background is a screenshot from the game and the icons are game assets; I am responsible for the rest of the graphics and treatments in the chart. I chose to use colors to denote relationships for a quick visual cue, using a gradient for items that had more than one relationship. Headings are in Baumans to keep consistent with other TOR collateral I’ve produced for our guild. Created in InDesign. PDF Version Available.

Site Redesign Part 3

Crys — Sat, 26 Feb 2011 06:04:50 +0000

Site Redesign Part 3

I was really happy with the watercolor and the basic idea of the design I was working on but it really didn’t feel like _me_. So out comes the Wacom. I think I like this direction better. The watercolor with paper is the base, with some knotwork and hand-drawn accents to really make it MY site instead of “generic artist-style site number 392″. Now the trick will be adding enough drawing to be balanced and personalized without adding so much (or making it so heavy) that that it detracts from the content.

Web Design is a road…

Crys — Fri, 25 Feb 2011 22:33:05 +0000

Here I am again, stuck in IE7 hell. It struck me today, while I’m sitting here hacking up my layout’s css to accommodate the vagaries of IE7, that working on a layout is a lot like driving a car. There’s a lot of things you have to learn first to keep yourself from being a hazard to other drivers, but once you get the hang of it, those things all become second nature.

Designing for the better browsers, Firefox, Safari, etc., is like driving down a mostly deserted highway in Wyoming. Fast, smooth, straight-forward, easy to find yourself doing 100mph with the radio blasting while the scenery around you flies by (not that I’d know anything about doing that *shifty look*).

Most of the time, IE8 is the same. You may occasionally have to change lanes or slow down a little, but it’s easy to see those problems coming and just build in solutions from the start.

Now imagine you are asked to plot a route across the country that involves no highways, no stop lights and no stop signs. You have one hour to plot this route. Then you must drive it. From memory.

That’s what working with Internet Explorer 7 is like.

Site Redesign Part 1

Crys — Fri, 04 Feb 2011 05:46:00 +0000

Mockup 1, Crysodenkirk.com

Websites are hard. It’s about time to redesign my site again and this time clear out all the old code that’s hiding under the hood. Moving up to html5 and css3 but damn, the design’s the hard part. Here’s how far I’ve gotten this evening on a mockup. Long way to go before I can start putting it together in code. The background watercolor though is going to be a series of transparent layers aligned differently so each page has its own slightly different background based on how long the page is. I love the basic colors on my current site but I feel like I need something lighter and a hell of a lot more modern. The current color scheme pulls the focus away from the content because it’s so saturated, and the current layout is pretty dated too.

Aurhia Wallpaper

Crys — Sat, 11 Jul 2009 05:54:51 +0000

Concept to final product – system message icons

Crys — Fri, 19 Jun 2009 01:49:42 +0000

Two things that all transactional sites have: success messages and error messages. Ideally, these messages will be at the top of the page and be set off in some way through color or other visual cues. Using green and red respectively is the obvious choice, but this poses a problem: people who are color blind will not be able to tell the difference.

Icons are one solution to this problem. If you preface your system messages with distinctive icons, this can serve as a quick visual cue to experienced users as well as distinguishing between types of message for people who are color blind or who use screenreaders (the reader will read off the alt text of the icon, so you can use this to convey a message to screenreaders only).

Icons can be tricky. They have to be small enough not to get in the way but large enough to be recognizable. Making graphics at that size requires pixel perfection and any iconmaker’s path is littered with failed icons. My favorite, lost to the annals of server upgrades, was one particular trash can I was trying to make that when saved at the right side turned into… Cthulhu!

The demands of making your icons small but recognizable mean you have to go into them with a clear concept. I like to pull out my colored pens and brainstorm around the basic shapes that symbolize whatever you’re trying to make an icon for. Picking a symbol can be the most difficult part of the process. For an error, what do you use? The yellow “caution” triangle? An exclamation point? The red “prohibited” bar and circle?

For my current project, I chose a combination of the exclamation point and the caution triangle. A green checkmark was my immediate first choice for the success message. Out come the pens. It’s important not to censor what you’re drawing, just to let the shapes suggest themselves to you the way they want to be drawn. I usually have about five or six different iterations before I sit back and pick a style and form.

My final, chosen drawings ended up like this:

From here, I usually move into Photoshop. Some people use Illustrator, but I find Photoshop a lot more intuitive. The key to making your icon recognizable is starting big and going bold. Any line that you want to be visible in the smaller icon has to be several pixels thick in the large version, or it will scale to less than a pixel and disappear. You can get an immediate preview of your work by reducing the magnification until the icon is close to its final size. After a bit of consideration for how to get the borders on the triangle and circle, these were my “full size” icons:

Note the thicker border on the symbols themselves. This will help them stand out from the background, especially after they’ve been shrunk to:

Work in Progress

Crys — Fri, 29 May 2009 05:28:42 +0000

No related posts.

Early concept for this site

Crys — Sat, 16 May 2009 05:01:04 +0000

This was one of my initial brainstorming ideas for this site. Ultimately, I decided to go for a more streamlined design, but I liked this one and I’ll probably implement this as an alternate style sometime in the future. The logo, however, is the direct ancestor of the one I did end up going with.

Laughing Buddha Acupuncture

Crys — Fri, 15 May 2009 02:12:53 +0000

Visit Site: Laughing Buddha Acupuncture – Acupuncture and East Asian Medicine clinic in Oakland, California

This is a three page brochure site for Laughing Buddha. I based the design on the business cards and logo created by Jake Mix, which contained the laughing buddha illustration on a two-tone background split by a curve. I chose muted, earthy versions of primary colors to denote the elemental, grounded nature of the work they’re doing.