A Blog for Web People » Web Design

Portfolio Site Redesign

Patrick Burt — Wed, 03 Nov 2010 20:13:25 +0000

My portfolio has recently undergone a slight redesign. It wasn’t all that complicated given that there were only 3 pages. What was important in the process of the redesign was to understand why I was doing it, and to establish what goals I had. Why was I was doing it? Like most redesigns, the design was getting stale, it had probably been over 4 years since my portfolio’s site has been visisted, and trends have changed since then. As for my goals, they were as follows:

Retain Domain Name and Page Equity

My portfolio site ranks very highly for keywords, specifically, Patrick Burt and Graphic Designer. This can all be thrown away if I decide to rewrite things or get rid of my already valuable links. Using the same, pre-redesign, URLs has allowed me to leverage pre-existing PageRank towards my new content. I also made sure to use similar content, titles and metadata that had gotten me high on Search Engine Result Pages (SERPs).

Dropping Flash and Using More Javascript

Adobe Flash does not degrade very well in the event that a user does not have Javascript or Flash. If I had to guess, I say that Flash’s inaccessibility is proportional to the surge in use of mobile devices as Web browsers.

Given the advances in the Javascript world with such libraries as jQuery and script.aculo.us and with HTML5 on the horizon, some might say Flash is falling behind. With Javascript, however, comes the responsibility to ensure that user or browsers without Javascript are still given a satisfying experience.

Social Media Presence

I don’t think anyone can disagree that Social Media is here to stay. I’d have to say it’s as transparent as listing your phone number on your Web site. You create a human connection. You are more than simply an anonymous user or company sitting behind a screen.

The Sarcastic Guide To Web Design and Development – Part 1

Patrick Burt — Wed, 04 Jun 2008 13:33:48 +0000

***This article is sarcastic***

There are a handful of rules that will automatically place in the rungs of “All-Star Web Designer and Developer”. It is my objective to share these with you.

1 – You Are Always Right
The client never knows what the client wants. It’s up to you to tell them. If they disagree with you, it’s because they just plain don’t know what they’re talking about. In the event that client may think that they’re right, it’s up to you to raise your voice and threaten to take them to court so that you can push your way of thinking. If at all possible, belittle any ideas the client puts forth.

2 – Design For Your Browser
There’s only so much time you can spend on developing a website. Develop your website so that it’s optimized only for the browser that you use. In the event that the client or their users use a different browser, it’s simply not your problem. Suggest that they use the same browser you do. Another suggestion would be to include a message such as “The site was optimized for Mozilla Firefox” in the footer of your website.

3 – When Someone Critiques Your Design, They Are Personally Attacking You
That’s right. If a client say that they have a problem with your design, that should be interpreted as them having a problem with you. The design was never an issue. To deal with such a situation, you should rebuff the client’s comments with “Nuh uh, you’re the one you isn’t reaching the target demographic“, or “Why don’t you move YOUR header graphic 10 pixels higher“. In the event that these comments draw blank stares, follow-up with calling the client a “doodie-head”.

4 – CSS Is Too Much Work
Why go through the trouble of coding CSS and typing out all sorts of complicated characters that require using the SHIFT button on your keyboard, such as { and } when you can splice up designs in tables? In Photoshop, lay out your guides, export as HTML, and you’re done. If additional tweaking needs to be done, use Font tags.

5 – Using Adobe Flash Frivolously Is a Must
No site is complete without something bouncing or moving everywhere on the user’s screen. This means that the client and company will be perceived as being hip and professional. Some uses include:

Splash Page animations. Tip: Don’t implement a Skip Intro button, we don’t want to ruin the immersion experience.
Logo animation. Consider rotating or fading the client’s logo in and out. If possible, incorporate movement.

Here are a few bonus tips to make your Flash piece everything your client has ever imagined:

Be sure not to ease animation. Animations should look inorganic. Besides, you’re not a movie editor or a producer, you’re a web person.
Keep the FPS low. You don’t want to overload the Windows 95 machines that are still around.
Keep things moving. If at any given time, something on the website isn’t moving, you’ve done something wrong.

That’s all for now. Hope that the article wasn’t too out of the ordinary.

Avoid Imagery In Your Website’s Header

Patrick Burt — Mon, 03 Mar 2008 14:38:41 +0000

I believe (and I’m not alone in this Web 2.0 train of thought) that your website’s header should be void of the use of imagery. I’m having a hard time finding a well-known organization or companies website to use as an example because modern companies have realized their mistake. So I whipped one up as an example:

This is a Bad Header

Why It’s a Bad Header

Overlooked – In eye-tracking studies, headers were overlooked in favor of the site’s content. The general population is known to bee-line right for information and avoid images (even images supplementing the content).

Whitespace – Similar to print media, website’s need their share of whitespace. It allows the site to breathe and feel less heavy. Don’t be afraid of having a slight gradient as the only element supplementing your wordmark or logo and the top of your page.

Not Timeless – Whitespace doesn’t age, you don’t suddenly grow old of it. If your header contains very specific imagery, what happens if your company targets another niche? Of course, the header will need to be addressed.

Valuable Space Wasted – This above-the-fold space has been stuffed with imagery. If users will overlook your banner, use the space wisely for features or information important to the user.

What Can You Do?

Drop the imagery. Your wordmark should be prevalent and shouldn’t have to compete for attention with graphic. If you’re insistent on imagery, keep it below the wordmark. Like I mentioned in the example above, try including a site search, contact information, my account, login and/or register links in this premium location.

That’s all for now. Hope that helps.

Don’t Forget To Kern Your Headers and Logos

Patrick Burt — Thu, 21 Feb 2008 02:29:59 +0000

This is something you’re taught as a print designer. You’re taught to kern all large text. I’ve peaked around and I’ve come across pages produced by web designers and developers that overlook this very small detail. That being said, I think it’s important and does make you look professional.

What Exactly Is Kerning?

Simply put, Kerning is the distance between two specific characters. The ability to modify kerning on a per-character basis is done in a graphics or vector program such as Photoshop. Kerning options are not available in CSS. See below for a diagram.

What Exactly Is Tracking?

Tracking (also know as letter-spacing) is the overall distance between all letters. Since this isn’t as letter-specific as Kerning, CSS does have a supported attribute called letter-spacing that can be applied to CSS elements.

Here’s an example with a chunk of text that was kerned, and a chunk of text whose tracking was adjusted.

Why Kern/Track?

Kerning and tracking are simply more appealing to the eye. It’s one of those things that if you show a kerned and unkerned version of text to a non-designer, they would typically choose the kerned version. When asked why, they wouldn’t be able to put together a concrete reason. As I mentioned above, it appears more professional to art directors and clients alike.

Here’s an example. I currently adjust the tracking on the headers on my blog. Allow me to compare two headers, one uses my existing formatting, the other scraps any letter-spacing modifications I’ve made.

Nunc Congue Felis At Augue

How To Adjust Kerning

It’s easy! In Photoshop, simply click between the two letters you’d like to kern. Hold ALT and tap the right and left arrow keys. Adjust to your liking.

How To Adjust Tracking

CSS
All it takes is one attribute: letter-spacing. You’ll want to set this to a negative value as fonts will default to a letter-spacing of 0. -1px is a great value. Example:
letter-spacing:-1px;

Photoshop
Select your chunk of text, and in the Character window you can adjust the tracking value as seen in the highlighted location of the image:

Hope that helps, happy font adjusting.

Yet Another (Easy) Way To Make a Web 2.0 Button

Patrick Burt — Tue, 19 Feb 2008 02:56:22 +0000

Here’s yet another easy, detailed tutorial on making a web 2.0 styled button in Adobe Photoshop. Enjoy.

1 – In Photoshop, go to File -> New. In my example, I set my canvas to 150 pixels by 150 pixels. Replace the background color (if needed) with the desired color. In my case, it’s off white.

2 – Click and hold the Rectangle Tool button in the main toolbar. Select the Rounded Rectangle Tool. At the top of the Photoshop window, set the radius to 10 pixels, this sets the radius of the rounded corners. Create a new layer and name it appropriately.

3 – Draw a rectangle on your new layer. Make sure the rectangle is smaller then your canvas. Note: Don’t pick your background color as your rectangle’s color.

4 – Bring up the Layer Style window and select Drop Shadow (located at the bottom of your layers palette. Set a light drop shadow. I used the values in the picture below.

5 – In that same Layer Style window, select Stroke, and add a white stroke using the settings pictured below. Note: If you choose to place your stroke on the outside of your button, you will need to apply a heavier drop shadow. In my example, I placed it on the inside.

6 – Again, in that same Layer Style window, select Gradient Overlay. Apply a gradient using the desired colors keeping in mind that we want to keep it subtle. Close the Layer Style window. Note: Using layer styles makes it easy for us to the change the color of our button later on. It’s a form of non-destructive editing.

You should have something that looks like this:

7 – Use the Type Tool to add white text to your button. Add a drop shadow (using the Layer Style window) with identical values used in step 4. I suggest using a bold sans-serif typeface. Arial works well here.

Et voilà!

If all worked well, you should have a button resembling the one I have below.

Good luck, and happy web 2.0′ing.

8 Examples of Logos Using Only CSS

Patrick Burt — Wed, 23 Jan 2008 17:56:11 +0000

In the event that you’re a developer, and not a designer, I’ve quickly thrown together eight examples of logos/headers that don’t require you to open a single image or vector editing program because they use uniquely CSS. I’ve provided examples and the inline CSS so that they can be inserted anywhere required.

If you’re someone that respects website validation, you’ll be pleased to hear that the CSS validates.

patrickburt

PATRICK
BURT

PATRICKburt

PATRICKBURT

patrickburt

PATRICK
BURT

patrickburt

PATRICK
BURT

That’s all for now, hope that helps.

How To Center Your Website in a Browser

Patrick Burt — Wed, 16 Jan 2008 17:34:02 +0000

If you’re like me and you’ve tackled micro-sites or webpages that you want to have centered horizontally and vertically in a browser, you might have noticed that it’s difficult to get it to work in all browsers. Typically, the solution I’ve seen is to have hard returns at the top of your site until it’s vertically centered. That doesn’t bode well with huge screen resolutions or small screen resolutions.

You can see the demo on this page. Feel free to resize and manipulate the browser, the content will always be centered.

I have a simple solution that I’ve used on my portfolio that uses valid CSS and valid XHTML (it validates according to w3c).

Stylesheet

In the demo, I didn’t bother making the CSS a different file, but here is the ultra simple code that you need:

Remember, if you’re sticking it in a stylesheet, be sure to remove the style tags.

HTML

The solution uses a simple table. I was unable to get a non-table solution to work.

I am centered.

Remember, you still need all the other html tags.

Final Product

Using those simple lines of code and the usual HTML markup, you see that the text is centered in the demo provided.

That’s all for now, hope I helped.

Making Your Site Look Credible for First Impressions

Patrick Burt — Fri, 23 Nov 2007 17:49:45 +0000

We all do it, we’ve all been trained to do it. We’ve come to acknowledge what a good, credible website should look like and what a bad, fake website should look like. Whether your site looks good or bad can mean the difference between a visitor that stays 5 seconds or 50 seconds or money for your business.

As an example, I was looking over the shoulder of a not-so-computer-literate associate who, upon visiting a domain name parking page, hit the Back button almost instantly. It was almost second nature for them. Although they wouldn’t be able to clearly tell me why they did it or the characteristics that made it seem fishy, there is something to learn here.

Take for example this domain name parking page that I stumbled upon when mistyping one of my regular websites: DiggMirror.com (the indended URL is DuggMirror.com) and analyze it. What can we learn from this page? When compared with websites we visit every day, what could boost this site’s credibility? The site design isn’t purely CSS and it does have a supporting image, but what are things the web designer can do to boost its credibility?

Boosting Your Site’s Credibility

Your Identity
Possibly the most important part of your website. If your identity is represented by a handful of letters typed in an

tag, it looks sloppy and poor. In the example, even though there was a little font manipulation done to the wordmark identity (bold, arial), it simply pales in comparison to a logo or a wordmark set in a not-so-common font that’s been anti-aliased.

Readable Content
Content is one thing you might not be able to identify. Typical link farm (and domain name parking) websites are often mass-produced and its creators simply don’t have time to create or find content to put on each and every one of them. Its content is typically dynamically generated and it shows. Take the time to draft content related to your topic. Even if it takes a substantial amount of time, it will be worth it.

Default Colors, Fonts, etc. are Bad
Even if the defaults mesh extremely well with your design or your color scheme, do your best to stay away from default colors, this includes:

Blue links, purple visited links

Sixteen point Times New Roman body text

Unstyled headers

Non-CSS borders on tables

Quality Design
This is also one of those things, the typical person won’t be able to iterate what good design looks like, but they’ll know it when they see it. If you’re a person who’s not particularly into design, visit sites whose design you enjoy and whose design you don’t. Note the differences or try your best.

It’s hard to explain, but I wrote articles with Web Design tips. Part 1 & Part 2.

That’s all for now. Hope that helps.

10 Web Design Tips – Part 2

Patrick Burt — Tue, 09 Oct 2007 13:20:24 +0000

This is Part 2 of the short series on Web Design Quick Tips. You can find Part 1 by clicking here. In Part 1, the 10th tip suggested following the basic principles of design to strengthen your work. I’ll go into each of those in-depth. Each of these features can unconsciously make a design good. We’ve all met people that know good design when they see it and can’t exactly pinpoint why. The basic principles of design pretty much take care of that.

1 – Contrast

If you observe any design principle and completely forget about the others, observe contrast. Contrast is, in my opinion, the most noticeable. Contrast is the difference between two elements; the more difference there is, the more contrast there is. Here are some elements you can use to boost contrast:

Big elements and small elements
Light colors and dark colors
Serif (Times New Roman, Georgia) and Sans-serif (Arial, Verdana) typefaces
Thick and thin (bold and normal, thick lines and thin lines)

2 – Negative Space
It’s not uncommon for amateurs or clients to want to fill up the space on a design. They often see negative (or white) space as unused potential. You need to explain to them that viewers need space to breathe to not feel over-burdened when looking at your website.

Good places to throw in negative space include thick margin, bigger spaces between headers, and space around your wordmark (logo) for it to breathe.

3 – Balance
Balance is how your website tends to feel when someone looks at it. That’s probably not the best explanation. How about looking at your design and thinking about whether it feels lop-sided? One thing to note is that you can have an asymmetrical design and still have balance, occasionally, it depends on your content or navigation on the right side to balance out heavy graphics on the left.

Some things you can do to help balance your website are to determine how you’ll be aligning images in your content section and to center your website horizontally on the page.

4 – Repetition
Repetition can be used to describe the repetition of design elements. This can be through the repetition of specific graphics, line widths, general shapes, etc. It’s also worth noting that Repetition and Contrast need to be balanced effectively to truly have a great design.

5 – Proximity
Proximity refers to the distance between design elements. One of my teachers said it best when she said: “If you’re going to move it there, either don’t do it at all, or go all the way”. If design elements (or anything for that matter) are too close together, it creates a “tension spot” that makes it unconsciously uncomfortable to look at. Allow me to illustrate my example. You have the following 3 images, each with 2 elements.

One of these is uncomfortable to look at. Can you guess which one? If you guessed the first one, you’re right. The tight spots between the objects and the border create tension for the viewer.

6 – Unity
Unity is how well your website appears as a single unit. With Content Management Systems (CMS) being the new hot web item, it’s not uncommon to exercise unity across your website or on a single page.

A good guideline to follow is that if you can slice through your website (anywhere) and both results look entirely different from each other, you might have a problem worth addressing.

7 – Focal Point
Your website needs a focal point just as much as a print ad needs one. When a newcomer looks at your website and has a feeling that he’s direction-less, chances are, he’ll be navigating to a different site where he’ll have visual direction.

Contrast plays a big role in creating a focal point through the use of big images and big headers. Also, this is harder to explain, but if your line flow generally points to the same element on your website, that helps in creating a focal point. Here are some visual examples that help illustrate what I mean:

That’s all for applying design principles to web design. But here are 3 additional tips.

8 – Originality
There’s something to be said about originality, you will get noticed. By no means do I mean you should blatantly avoid design principles because you want to be a pioneer, but try to design something new, something original. If that doesn’t work out, the most you’ll have lost is your time, but if it does work out, it can me a whole lot more website visitors or a whole lot more clients.

9 – Love what you do
Like any other job or hobby, you need to truly love what it is you do. If you don’t have a passion for web design, it’ll show in your work. If you simply don’t care what the client thinks or wants, it’ll show in your work.

10 – Never Stop Learning
Web Design, like many other types of design, has fads. You may be the type of person that wouldn’t touch a fad with a ten foot pole, but even if you won’t do that, you still need to understand why it’s a fad and why it’s working for a lot of people right now.

Why I Design on a PC Instead of a Mac

Patrick Burt — Fri, 05 Oct 2007 19:14:59 +0000

UPDATE: I play devil’s advocates and speak about the 5 reasons I should buy a Mac.

I figure it’s about that time where I write a controversial article about a hot topic. Recently, Macintoshes have been having increased sales, especially amongst students. Not too long ago (less then a year), I was a student in a Graphic Design program. In a program that was naturally flooded with Macintoshes, I used a PC. Don’t get me wrong, I used new purchased Macintoshes for most of the day and I evaluated them just as critically as PCs. Now I’m going to tell you, why I do all my work on a PC at work, at school and at home.

Cheaper

That’s right. It’s cheaper. If you compare similarly equipped computers, one a PC, the other a Mac, Macintoshes cost more. This shouldn’t be news to you. Whether they’re coming down in the price, or they’re getting better, that doesn’t matter. Now, they are more expensive.

The fact they offer student discounts is irrelevant because, contrary to popular belief, PCs can come with student discounts as well.

Hardware Customizability

The customization panel at Apple.com is nothing compared to other build-it-yourself companies. I’ll give them credit for having some options, but they are scarce. If I don’t need 320GB of storage on my computer, why should I pay for them? You can make the argument that if you need extra RAM, you can buy it and add it. To that I say, that’s nice, but what if I need less RAM? Did you want me to list a RAM stick on Craigslist?

File Format Advantage

Thankfully, as days go on, transferring file-formats across platforms is easier then ever. My Photoshop file is the same as your Mac’s photoshop file. The same with Illustrator and InDesign.

With that, a small percentage of the general population uses a Macintosh. That means if you do get a strange file format from a Client (Microsoft Works comes to mind), it is more likely that that file came from a PC. Because it came from a PC, it’s easier for another PC to scramble and find the right software to open it.

Software

Also due to the fact that a small percentage of the general population uses a Macintosh, that means less people develop programs for a Macintosh. I’ve had clients request strange file formats, some of which are very difficult (or impossible) to put together on a Macintosh.

With Open Source software being ever so popular, the advantage to being able to actually run that software is especially important. As an example, Cyberduck, one of the few open source FTP programs for Macintosh, constantly crashes and constantly asks for money. FTP Programs that don’t crash and don’t ask for money are a dime a dozen in the PC world.

ASP and ASP.NET

Clients are sometimes restricted to what resources they have at their disposal when dealing with their website. If those resources happen to be ASP and ASP.net, managing and developing without Microsoft’s help is… I don’t even want to imagine it.

I Don’t Crash Less

A well-maintained PC runs just as well as a well-maintained Macintosh. Macintoshes crash just as much as PCs if you continuously stockpile them with programs that eat your computer’s resources and you don’t clean it every now and then.

I Don’t Get More Viruses

Although there are exponentially more viruses for PCs then there are for Macintoshes, a diligent PC user will get just as many viruses as a diligent Mac user. If you open up every email in your inbox and instinctively click on any attachment, regardless of the extension, in that case, stick with your Macintosh.

Testing

Being in Web Design, this is a big issue for me. With a PC, and only one operating system, I can test a website on Firefox, Safari, Opera and all versions of Internet Explorer. That being said, I can easily turn anti-aliasing (ClearType) on and off to see if there might be layout differences. Testing on Internet Explorer and toggling anti-aliasing is painful on a Macintosh.

Conclusion

I think I’ll stick to my PC. As it stands, the only one reason for making a switch to Macintoshes is that iTunes runs like garbage on a PC.

UPDATE: I play devil’s advocates and speak about the 5 reasons I should buy a Mac.