Posts Tagged ‘Design’

Designing Body Type

Thursday, July 15th, 2010

Header text gets all the love, doesn’t it? From Photoshop to the browser window, the focus seems to be on design elements like logos, navigation, and of course, header type. It’s great fun to use tools like Typekit to make your header text something a little less than ordinary. It defines your site, gives you a unique look and feel, and gives readers that oh-so-scannable sensation they know and love. When you really think about it, however, readers aren’t there for the header text. The headers serve as an essential tool to quickly find what you’re looking for, but the real prize here is the body text, isn’t it? This is where your information is, this is where you write and communicate to readers, and this is an area of design that cannot be neglected. Sadly, it often is. (more…)

Announcing ThePeev.com

Thursday, March 11th, 2010

I am pleased to announce the launch of my latest project, ThePeev.com. The Peev is a quick and dirty WordPress site designed for the sole purpose of serving as my personal artistic outlet. I’m posting doodles and sketches regarding all the things in life that may or may not bother you. I had a lot of fun creating the site, which came together nicely from concept to complete in less than eight hours of work. What’s your pet peeve? Visit ThePeev.com and let me know.

Image Buttons and Accessibility

Thursday, November 19th, 2009

Image buttons are a fairly common occurrence in web media. As with everything else in web design, you have a dizzying arsenal of methods from which you can choose to create this type of design element, and choosing the right method can greatly aid in your design’s accessibility, performance, and SEO-friendliness. (more…)

Reusable Transparent CSS Rounded Corners

Thursday, September 24th, 2009

In retrospective, there are definitely some areas where I could have improved on my Karate Corners design. I decided to take a second look and write a quick post that details how I create corners today, after almost a year of evolution in the ever-changing world of web design. This is absolutely the most simple and efficient way to create rounded corners using strictly CSS and HTML. (more…)

A Very Simple CSS Chat Bubble

Monday, September 14th, 2009

Each time you implement a new design element into your site, there are a vast array of approaches you can take to achieve the same outcome. Often times, I feel that the most simple of solutions is the best one. When implementing the “user comments” feature into ThumbSticks.com, I decided to wrap each user comment in a sort of “chat bubble box,” much like you would see in a comic book story. I experimented with various solutions that gave me different amounts of flexibility and performance, but I eventually settled on a very simple solution that resulted in what I think is an elegant CSS chat bubble. (more…)

The Wisdom of Simplicity

Friday, July 24th, 2009

Web designers would be wise to approach every situation with one thing in mind: simplicity. Simplicity is the cornerstone of designing a well-structured and highly flexible HTML/CSS design. I’ve found that all too often, many designers approach a website with one thing in mind: the “look” of the fully rendered site. They approach each page or screen with a definitive pixel-perfect image in their heads, and they execute the design process to produce each pixel as it was originally intended. (more…)

New Server, New Theme

Monday, February 2nd, 2009

In the process of moving my blog to a new web server, I decided to take this opportunity to create a new theme for the site. The theme changes depending on what time of day or time of the year that you visit, so check back often! I’ll continue to add little customizations for holidays, special occasions, etc. (what a wonderful use of my time it is to create little meaningless PNG images). Let me know what you think.

Five Elegant Rounded Corner Boxes

Thursday, October 30th, 2008

I wanted to really take the concept of my “Karate Corners” design to new levels, so I created this simple demo to show you how visual elegance can work in tandem with technical simplicity. (more…)

All About Table-less Column Design

Monday, October 13th, 2008

There are a number of ways to create vertical columns in your XHTML design without using the <table/> tag and the horrendous amount of HTML that always seems to accompany it. Each method listed here is superior in various situations, so choose a good fit for your particular design. (more…)

Karate Corners: XHTML/CSS Rounded Corners

Monday, October 6th, 2008

I’ve seen a lot of different ways to create round corners and boxes in web sites, and quite frankly I haven’t exactly fallen in love with any of them. A lot of the methods that I’ve seen use either (1) a table structure which I try to avoid at all costs, (2) too many nested <div> tags, (3) complex CSS, or (4) too many different images that have to be loaded all at once. (more…)