Website Design Blog

Despite my absence from blogging, I haven’t dropped off of the planet - I’ve actually been tremendously busy! So, I’d like to apologise for being so busy lately; theres been something of a client deluge as of late. Can’t really complain, especially with the money coming in, but it does detract from time available for personal projects.

What kinds of personal projects is the author currently getting on with, I hear you cry? Well, let me give you some sneak peek information.

Key To The Realm is a massively multiplayer online game based in a fantasy setting. I can’t really give away too much information about it at the moment, but rest assured, its pretty damn awesome

I’ve been working on t-shirt designs for my own potential label, which I dub Kings of London (and the name can be interpreted various ways too, which is always good). Above is a sample snippet of some designs that might eventually be released to the wild; feedback very welcome!

vAlerter (working name) is an SMS reminder service mainly targeted at busy professionals and executives. It sends text messages directly to selected mobile (cell) phones at set times; for example, to remind someone about an anniversary, or business appointment.

Cascading Stylesheets, or CSS, can be pretty awkward at times. It allows you total control over the presentation of a webpage within a browser; but having the resulting webpage look identical in each different browser (IE, FireFox, et al) can sometimes be difficult.

Here’s a selection of handy tips I’ve found - see if they help you too.

100.01% Font Size

CSS: Getting Into Good Coding Habits says:

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.

Link Styling: “LoVe/HAte”

Link Specifity says:

All of them can apply to a hyperlink, and in some cases, more than one will apply. For example, an unvisited link can be hovered and active at the same time as it’s an unvisited link. Since three of the above rules apply to the hyperlink, and the selectors all have the same specificity, then the last one listed wins. Therefore, the “active” style will never appear, because it will always be overridden by the “hover” style. Now consider a hyperlink which has been visited. It will always and forever be purple, because its “visited” style beats out any other state, including “active” and “hover.”

This is why the recommended order in CSS1 goes like this:
A:link
A:visited
A:hover
A:active

CSS Styling Your RSS Feed

Adding a CSS StyleSheet to your RSS Feed says:

You can do a lot more with an XSL stylesheet (turn links into clickable links, etc), but CSS can make your feed look much less scary for the non-technical crowd.

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>

Just thought I’d take some time out of my (massively) hectic schedule to wish you guys a great christmas… and a fab new year!

I want to say thanks to everyone who has supported me - friends, colleagues, and clients alike

I’ve got some great things to show you all in 2008, but for now you’ll have to wait. Go have a drink and enjoy the festive season… and I’ll see you all soon

Recently I’ve had the fortune of forming and now fundraising a games operator and publishing company, and one of the primary operations will be to license interesting Korean and Chinese computer games to the western English markets.

Checking into these things really opens your eyes to how different far eastern design is to the west.

Use of Colour

Chinese, Japanese and particularly Korean design is often very rich in colour, preferring pastel hues and light colours rather than the west’s more “realistic” or gritty approach to some situations. Pinks and yellows are very common.

Character Drawing Styles

While the various Asian countries differ on how they typically create illustrations and design characters, they all share a sense of fantasy, being superior to life. Japanese anime, Chinese perfect bodies or traditional drawing style, and Korea’s ultracute/super deformed characterisation, all vividly contrast with and influence western drawing techniques.

One of my current challenges as a graphic designer is to mimic Korean and Chinese style, and to integrate them into websites that combine their unique characteristics with a more accessible look for western markets.

Have you ever come across clients or projects that involve design techniques or influences from the far east?

So, I thought I’d put together a couple of high definition wallpapers to go onto my PlayStation 3, and after a quick bit of tinkering in Photoshop these are what I came up with. The first one is my current PS3 wallpaper, and looks fantastic!

Just click on a thumb to get to the full size image (1920×1080).

Machinaweb

Prismus

What do you think?

Well, I’m finally getting around to putting together a swanky portfolio site (well, its more of a page, admittedly) and I’m wondering which of the following you think would reflect better on me as a designer.

React (Gucci)

The key concept behind React is just as the name implies — Gucci turns heads and causes a reaction all around. The general market for high-end fashionwear is affluent decision makers who enjoy symbols of status, because of the reactions they create.

Start Living (Puma)

For those of you not fluent in Russian, that says “Stop reading, start living”. This concept gently nibbles on some design trends that have come out of Russian design over the past few decades, and mixes in some of sportswear’s stylish sloganism.

So, which is your preferred image? I’d prefer to only put one in, as I don’t want a super bulky portfolio; unless you feel both deserve it? I’d like to hear your thoughts.

Well, I’m now the (very) proud owner of a PlayStation 3 and matching HD LCD TV on which I’ve been spending a little too much time. Its the first time I’ve really seen high definition as you don’t get an accurate idea in retailers whatsoever. Believe me, the picture quality my PS3 pumps out at 1080p is staggering.

The PS3 has a built-in web browser, which can handle all the mainstream technologies such as Flash and Java. At 1080p resolution though — which I believe is 1920×1080 — websites look pretty thin.

I wonder, will there end up being websites designed for high definition displays? The additional real estate available at such a high resolution would mean so much more could be fit into a web layout, with much larger and crisper images and video; but will there be enough demand?

Have you ever considered making a high definition website?

Its simple, and one of the ’staples’ of a typical Web 2.0 site — but I’ve been getting a few requests asking how to make a reflection, especially for logo text.

Here’s how to do it in Photoshop in a few simple steps.

First, create a new image and add some text as a sample logo:

Next, duplicate the text by pressing Ctrl-J on Windows, or Command-J on a Mac.

Rightclick the copy layer on the layers palette and rasterize it:

Go to Edit > Transform > Flip Vertical:

Move the layer beneath the original logo layer:

Lower the Opacity of this layer to around 60%:

Add a layer mask to this layer:

Add a white to black gradient that covers this layer within the mask. You may take a few tries (use Undo) to get the final look you want:

Sometimes, writing web applications in PHP can be a little awkward. You launch your webpage in a browser, only to see a blank page. No error, nothing. Usually this can be pretty frustrating to troubleshoot, especially if your code is thousands of lines long.

However, there is a quick and simple solution to help.

Add this to the start of the page you’re loading:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>

This will turn PHP’s error reporting function on and dump errors to the screen — by default, it usually either ignores errors or saves them to a logfile, and with most hosting companies you have no way of accessing any system logs.

Last night I was reading through a forum topic in which affiliates and network marketers posted up their best domain names that they used.

Many of them were staggeringly bad.

Make It Verbal

For example, one affiliate who was promoting VWD’s e-lotto program, chose the domain www.vwd-e-lotto.co.uk.

Can you imagine saying that over the phone?

“Thats WWW dot V W D dash E dash lotto dot co dot UK.”

Very friendly. Grab a friend or family member and say your potential domain name — if they can’t remember it five minutes later or need you to say it more than once, it’s worthless.

Make It Memorable

I don’t know if there’s any official rule about this, but I’ve always stuck to the custom that brand names should, 99% of the time, be two or three syllables long. Almost every brand you can immediately think of will follow this rule (the only rulebreaker I can think of straight away is Coca-Cola).

Try to make a domain name thats short and snappy. Splurge.com would be better than splurgeapparel.com. Keep the domain ONE word if possible.

Make It Unique

Forget using keywords in your domain name if you want a successful, sticky website. You simply don’t see official sites called mcdonaldshamburgers.com or something like starbucks-coffee-house.com, because all thats necessary is the brand name itself.

Would ebay be as memorable if it was called ebayauctions.com?

Another common mistake is picking a domain name based around another brand or domain you may be promoting. For example, an Amazon affiliate may think that buy-amazon-products.com would be a great investment.

Wrong. If I’m searching for Amazon, I’m looking for Amazon’s website; I’m not generally going to care about some obscure results.

Make It Lazy

People are, in general, very lazy — and this applies tenfold online.

Imagine you had something in mind that you wanted to purchase online, and there were two websites offering the product. One was called smexywidgetsonline.com, and the other was quib.com.

Which are you more likely to type in?

Make It Simple

Not only are people lazy, but they’re not always geniuses either. Your hot idea for calling your domain name kwibu.com might sound pretty nifty, but if you were discussing the domain with a friend or colleague, could they go off and type it in correctly first time?

Kweebu, kwiboo, qwebo… how was it spelt again?

The verbal rule comes into play again here — you need to have a domain name that you can confidently tell people, and know that not only will they easily remember it, but they’ll have no problem typing it in.