Archive for the ‘Website Design’ Category

Font Embedding & The Law

Thursday, October 7th, 2010

Choosing the right font is key to any piece of graphic design, whether it be for web or print. Unfortunately web designers have been stuck with the same old system fonts for years, unable to create intricate typographical layouts without the use of images. I think we’ve done a pretty good job to be honest because any old-school print designers would have a heart attack if they knew we’ve been working with a choice of about six fonts to fulfil the needs of every website that we create.

There have been a number of different processes and applications written to try and solve this problem by allowing custom fonts to be embedded into websites. In this post we will outline the latest and most popular techniques, and the legal issues that you may unknowingly face by using them.
(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: , , ,
Posted in Tips, Website Design, Website Development | 3 Comments »

Texture in Web Design Part 2: Pixel Patterns, Noise, and Grain

Wednesday, September 15th, 2010

We began this two part series on texture in web design by talking about text and button textures, and how they can be used to inset, or outset page elements. These help to add more depth and subtle aesthetics to your designs, making them look more professional and polished. This week, we’ll be showing you how to add texture to other page elements such as your backgrounds / content areas, as well as how to use pixel patterns to make your text and box-shadows more interesting.

Noise and Grain

Noise and grain is all over the web at the moment, with some big players in the design community using it very effectively in their designs. A good example of this is Dribbble. If anyone doesn’t know what Dribbble is then you can read about it in this post.
(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: , , ,
Posted in Tutorials, Website Design | 1 Comment »

Texture in Web Design Part 1: Inset / Outset Elements

Tuesday, August 24th, 2010

A growing trend amongst top web designers is to use an assortment of subtle textures in their work. This helps give depth and, even if you don’t notice them at first, add an extra degree of complexity and intrigue to a design. If used intelligently and effectively (and by that I mean tastefully!) textures can really lift a website to the next level.

Over the next two weeks I will walk you through a range of techniques that can be applied to many different elements of your designs to give them just that extra bit of style…

This week we’ll be mostly talking about insetting and outsetting page elements in Photoshop (and CSS3), as well as covering how add these effects to non-vector patterns without having to manually cut them out!

Inset / Outset Text & Objects

This is a pretty simple one really and it works on almost any style of font. For both effects you begin in the same way… First, type out your text and select your colours / background colour in Photoshop. Then, in your layers pallet double click the far right of the text layer that you want to apply the effect to. A Layer Styles box should open…

(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: , , , ,
Posted in Tutorials, Website Design | 1 Comment »

Designing for Touch Screen

Wednesday, June 30th, 2010

Now, this post was supposed to go out about two weeks ago, and since then it seems that every designer under the sun has written on the same subject - That’ll teach us for being lazy. Nonetheless, we decided to publish it anyway, just in case anyone missed any of the other great posts out there…

By now you should all have heard of the iPad, and if not then you must have been living under a rock for the last few months! Touch screen devices are here to stay and you need to start thinking about how to design and develop to get the most out of them. Apple would like you to believe that the iPad is the only touch screen device that anyone should own (and to be honest it probably is the best), but there are already some strong competitors, and many more coming to the market this year. So, you need to get your thinking caps on and start designing your websites to work with them, as well as updating your other sites, too. There are a lot of things to consider… here are just a few.


(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: , , , , ,
Posted in Tips, Website Design, Website Development | 1 Comment »

Web Design For The Browser, Not The Printer

Thursday, April 1st, 2010

One of my pet hates is when designers preview the websites they’re working on as an emailed .jpg, rather than as an HTML file within the browser (which usually results in it being printed by the client). A design looks completely different when it’s printed out to how it does on the screen - not only are you printing a 72dpi / RGB design, but a printer renders text and images completely differently to a monitor. A website is a piece of interactive digital artwork and so should be shown in this way, even in the first stages of it’s development. Seeing as though 1024 x 768 is still the most popular screen size, when presenting your designs you should obviously make sure they work at this resolution, but by putting your design in a HTML file you are able to present it in any number of resolutions - Go on, impress your client by going that little step further and help them see that their site will look different, but just as great, on their computer compared to your 27″ iMac! ;-)

(more…)

http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/digg_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/reddit_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/dzone_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/stumbleupon_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/delicious_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/facebook_24.png http://www.whatcreative.co.uk/blog/wp-content/plugins/sociofluid/images/twitter_24.png

Tags: , , , , , , , , ,
Posted in Tips, Website Design, Website Development | No Comments »

« Older Entries