Over the years I’ve come to realise designing for the web can mean going against one’s natural instinct as a designer to have total control over the font choice, colour rendition and pixel perfect positioning. Those losses come with a huge gain though, interactivity.

Steve Jobs once said:
“Design is not just what it looks like and feels like. Design is how it works.”

One of the major reasons I like to work in digital media is that you get to design interactive experiences and not just aesthetics. Take for example “We feel fine“…

We Feel Fine is an exploration of human emotion on a global scale. Since August 2005, We Feel Fine has been harvesting human feelings from a large number of weblogs. Every few minutes, the system searches the world’s newly posted blog entries for occurrences of the phrases “I feel” and “I am feeling”. When it finds such a phrase, it records the full sentence, up to the period, and identifies the “feeling” expressed in that sentence (e.g. sad, happy, depressed, etc.). Because blogs are structured in largely standard ways, the age, gender, and geographical location of the author can often be extracted and saved along with the sentence, as can the local weather conditions at the time the sentence was written.

There’s no medium apart from the web that would give the designer the chance to play with information design, typography, colour, form, motion graphics and create such a dynamic and engaging experience.

The web compared with all other mediums in which Graphic designers work in is in it’s infancy, with the rules on digital design being written and rewritten on a daily basis. That’s what makes it just a vibrant area of design to work in.

A personal website has become at least as important as a CV for promoting yourself as a designer and gaining employment. It’s your only opportunity of showing your skills and personal style to an employer before meeting them. Invariably the first thing an employer looks at on a CV is the student’s website, if they like what they see they’ll read on, if not it’s heading for the bin.

I recently attended a talk by Tom Lane from Ginger Monkey and he mentioned all his commissions from the last few months have come directly from his website. Personal sites make it much more likely that an employer could come across your work without you having contact them. That’s vital as a lot of young designers are graduating in a harsh economic environment.

The web is driven by content and highly interconnected so if you can provide your design imagery/video in a easily portable way then you never quite know who will end up consuming it. Often I see recent graduates work appear on site like ffffound.com.

It’s also an opportunity to show you’re an active member of the design community and not a passive consumer of it.

Your website should be one implementation of your own brand strategy. I’d suggest designing your brand before you get started on your site, even if that’s as simply as a colour palette and font. Do bear in mind that some colours transfer more smoothly to and from print than others. Your brand then can be carried across your business card, website and folio. A lot of the companies you’ll be contacting in the future will be accustom to taking a single brand across all available media so they’ll quickly pick up on any inconsistencies in your brand if your attention to detail is not spot on.

The saying “your brand is not your logo” applies even more strongly online, the way your intended target audience perceives your brand will have as much to do with the way in which your site works as it does the colour and forms on the page.

As with all design briefs your work should start with research. Look into current online design trends, here’s a few starting points websitedesignawards.com, designmeltdown.com,  portfolios that accomplish goals, patterntap.com and 50-beautiful-and-creative-portfolio-designs.

The idea of going to a site to check regularly updated content is quickly becoming antiquated. Most content driven sites provide a RSS feed so the content comes to you.  These feed are worth checking over a cup of coffee in the morning:
smashingmagazine.com
ffffound.com
swissmiss.typepad.com
creativereview.co.uk/crblog
bristolmedia.co.uk

When looking at sites consider more than simply whether you like the aesthetic, ask yourself if it’s appropriate to what you’re trying to achieve. The most useful source of inspiration will be other designers personal sites.

As you’ll need to reference the sites you find inspiring from home and university I’d recommend that you use online bookmarking tool like delicious.com so your bookmarks are portable. Google Docs and Adobe Buzzwords are also very handy online word processing tools which mean you’re not tied to one computer, handy as a freelance designer.

It’s important you don’t start the process of designing your website in Photoshop or Illustrator. Firstly decide who your audience is, what information you want on the site and how you’ll structure it.

Two tools web designers use for this are site maps and wireframes.

Site maps are a list of pages you want on your site and how they interlink, here’s a simple sitemap:

Wireframe’s are a rough sketch of how you want the layout of the page to look. They’re intentionally devoid of visual treatment. This way you can design the how you want your audience to consume your information before starting on the visuals.

Once you’re happy with the information you’ll include and how it’s structured then start designing how it’ll appear on screen. It’s very tempting to try and fit the information to the layout rather than the other way around but form should always follow function. This is the number one mistake young designer make when tackling their first website.

Think about your URL (www.yoursite.co.uk) as you might stick with it for a while. Do you want to go with simply your name or brand yourself more strongly. Most important thing is for it to be memorable and as short as possible.

There’s an interesting growing trend in advertising not to list the URL but instead some keywords to Google. This highlights the importance to making your site easy to find which we’ll come on to later.

An average website would be static and difficult to update, with the flow of information very much being a one way process, from website to reader.
Websites were glorified brochures. When new mediums emerge they often ape their forebears, for example early television was simply radio with pictures.

The next evolution came when sites became more dynamic, both in terms of motion and how easy they were to update.
How regularly a site is updated is deceptively important, it’s one of the key differences between print and screen. For example a few years ago if you wanted to sell your car privately you’d typically place an advert in Auto Trader magazine and a few weeks later with any luck your motor would be off to a new home, now it’s far more common use eBay where the whole process can be completed in a matter of hours.

The most recent stage of the web’s evolution came with the emergence of web 2.0.
This a bit of a wide ranging term but can be summarised by the flow of information being a two way process, with the user becoming a contributor. This is typified by the emergence of the Blogosphere, YouTube, Flickr, Delicious and the like.

The design agency Modernista have taken the philosophy of web 2.0 to an extreme by not having their own site but instead using user generated sites to host their content.
http://www.modernista.com

You might think what has this got to do with my personal site, well a great deal. You need to demonstrate you’re an active member of the design community and the easiest way to do this is to utilize the web 2.0.

Blogs demonstrate to employers and clients; who you are, your design style, how you communicate and your area of interest within graphic design. It’s a good idea to get into the habit of posting to your blog several times a month. Start to use it like a sketch book, recording exhibitions, fliers from gigs, your thoughts the rebranding of Pizza Hut, your personal projects, university work etc. Blogs can be what differentiate you from the other tens of the thousands of graduating graphic design students. If you feel the need to blog about your personal life create a separate blog so you maintain a professional appearance to potential clients/employers .

Simply creating a website or blog and hoping it’ll get significant traffic is like having a CV and not sending it out to employers. So you have to market your website by actively participating in the online design community.

Bath based Carsonified came up with a clever way of using the Blogosphere to market themselves. carsonified.com/events/carsonified-golden-ticket

My own online presence has followed the evolution of the web in philosophy and technology.

When I left Complete Control several years ago I created a web portfolio.

davidgillett.co.uk
It’s built in Flash as this was my strongest skill at the time. It’s has a number of disadvantages, the images can’t be used by blogs, it’s a pain to update so I haven’t really touched it since it was built, the images are quite small, there’s no way of flagging my latest work. If I were to do it again I’d do it very differently. It fails as a self promotional website because I didn’t clearly identify what it’s key aims were before designing and built it.

My second self promotional site is for my personal photography.

gillettphotos.co.uk
It too is built in Flash but this time all the content is dynamically drawn in so it’s far easier to update. It’s still brochureware though.

The third self promotional site I built was my Blog.

davidgilletthasablog.com
My blog acts as an online module file, it’s not meant primarily as self promotion. It helps me to organise and record my thoughts. I’ve simply used a template from a blogging site as it’s focus is it’s content and it’s not primarily a sales tool. It takes a matter of minutes to upload new content, as I’m generally incredibly busy that’s a big plus.

My most recent self promotional website documents a personal design project.

Graphic Teasign
This site was built so I could learn how to adapt blogging templates to my own needs using wordpress.org. This is now an extremely common way for non technical designers to build small to medium websites as the learning curve’s not very steep.

Home : About me : My Work : Blog

Work sections often are broken down by media, client or the period in which the work was produced.

Homepage’s quite often end up being vacuous on portfolio sites so they’re often substituted by About me, Work or your Blog sections.

As a graduate you must include your CV as a download, preferably as a PDF, somewhere on the site.

Once you’ve started producing commercial work include testimonials from your clients on the site where you can.

Also consider reciprocal links to fellow designers as these will improve your Google rating.

You need to consider the copy you’ll write for your website as Google uses this to search for your website. Also think about the tone of the copy on your site, it’s easy to forget that it’s a client facing piece of branding when it’s your own website. Writing styles to avoid are, over confidence, too much humility, excessive profanity, placeholder text and typos.

I would recommend maintaining a good balance between creating your own content on your blog and pointing to other peoples work. If you are solely giving a brief opinion and linking to other sites then not only does it look as though you’re not a practising designer but the industry as a whole ends up consuming itself and not going forward.

You can take inspiration for the type of content you can include from these site made by UWE students from my tutorial group last semester…

rebekahgarrood.com (built using WordPress.com)
paznow.com (built using wordpress.org)
taliotisdesigns.com (built using Flash)
myleslucas.co.uk (built using Dreamweaver)

One of the first decisions you’ll make whilst designing your site is where you place the relative graphical weight. Do you want your personal design style to come across in the site’s shell or it’s content?
A lot of practising designers prefer to keep the their sites very simple and let their work do the talking.
Daniel Eatock is one such designer. He and a some web developers have created Indexhibit which is a simple way to build ‘invisible’ websites.

‘Something out of the box’

These are very simple tools created for non-designers and so are very easy to use, but by the same token very limited in what you can do with them. Your site will look ok but fairly generic and unprofessional. They tend to be hard to update and technically quite poorly constructed. They include iWeb and mrsite.

Dreamweaver

You can build your site from scratch using Dreamweaver. This means you have total control over the design and build of your site. Most modern sites are built using Style Sheets, this takes a little time to learn properly but is well worth the effort. If you create your site in Dreamweaver keep the design as simple as possible to minimise the risk of it looking drastically different in different browsers. Consider adding Google analytics to your site to track how many and what type of visitors you’re receiving.

Flash

You can use Flash to build your site from scratch. This has the advantage that the site will look identical in different browsers and you have very fine control over the layout and font selection. It also gives you the option to make the site media rich. Simple Flash sites are harder to update than their HTML equivalents, it’s difficult link to particular pages/articles and they’re far less Blogosphere friendly.

Blog

You could adapt a blog and host it on your own URL. You can choose from a number of templates and adapt them to a limited degree. This type of site is very easy to update. There’s a wide selection of blog sites to chose from including Squarespace, WordPress, Blogger and TypePad. To make your blog based site look more professional you should register it on it’s own domain,  it’s a fairly straight forward process with wordpress.com, find out more here.

Use WordPress.org

This is also uses templates as it’s starting point but gives you a lot more control of the elements displayed on the page. WordPress.org sites are quite fiddlely to set up initially but you don’t need to be that technically minded and there’s no coding to get up and running. Once set up it’s as easy to use as any blogging site but you can edit the look as much or as little as you like. WordPress.com largely controls how the page looks, WordPress.org lets you edit it to a larger extent.

If you’d like to start changing the site much beyond the standard templates you’ll need a little CSS knowledge. CSS is a set of rules for styling a web page. It’s also a good way to try and learn these rules as you can see how things are constructed already and tweak them rather than starting with an intimidating blank canvas. If you want to change how the site works significantly then a little knowledge of PHP is handy.

One of the potential disadvantages of using wordpress.org is that it requires your website host to have more technologies installed than most have on their standard packages. That can mean it’ll cost more per year to host it, perhaps £20 more. A good way round this is to use a ‘only pay for you use’ host like nearlyfreespeech.net, if your site’s only going to get a small to medium amount of people visiting it, it can cost less than £10 per year to host.

To learn more about any of these technologies head over to Lynda.com. For roughly £20 for a month you can access hundreds of video tutorials on all types of design software, if you split the cost between a few of you it works out to be an incredibly cheap way of learning new techniques and programs.

Use your website to become an active member of the design community

Design your site as a single part of your own brand

Research other designers site

Design the information structure before you design the visuals

Use Site Maps and Wireframes to do this

Consider the update-ability of your site

Carefully consider the tone of copy of site, including the site’s URL

Consider where you want the graphical weight of your site to be, in the site’s content or it’s shell

Choose an appropriate technology to build your site

Nothing we’re going to produce today is going to set the world alight from a design point of view but it’ll give you enough basic knowledge so you can create your wonderful looking sites in your own time.

The reason we’re going look at CSS is that if you want to have a moderate degree of control over the look of your site you’ll come across this technology no matter how you create your site. If you create it using Dreamweaver from scratch there’ll be a large amount off CSS’ing, if you use blogging site (or wordpress.org) then you can often edit existing CSS, if you use Flash and want to change the colour of the page then you can/should use CSS. Even if you cop out and use iWeb then a little CSS knowledge can be useful to edit the pages it creates to a finer degree.

We’re going to use Dreamweaver as it’s the industry standard web editing software but there’s loads of alternatives. CSS and HTML are only made from simple text files so you can use lots of text editors to manipulate them. The advantage of Dreamweaver and similar programs it that they give you visual feedback whilst editing the files by suggesting what CSS property is most appropriate.

Because websites are built from of a combination of text files it means it’s easy to see how other people have put together their sites. Because this has been the case for many years there’s often a philosophy of shared learning and openness with web development. You can take a look at the basic building blocks from other peoples sites and see how something similar could apply to what you have in mind. To take a quick look at how a web page is put together right-click and select ‘View page source’. To delve deeper into a site you can use the web developer toolbar for Firefox.

“It’s not where you take things from – it’s where you take them too”
Jean-Luc Godard

As well as looking at other pre-built sites this environment of openness means there’s loads of development sites which you can legally take snippets of code from to create your own site and tons resources for help.

The Cascading part refers to the way in which CSS applies to a page. A priority scheme determines which style rules apply if more than one rule matches against a particular element.

The reason CSS has become the principal way of styling web pages is that it separates the content (in the HTML files) from the style (in the CSS files) of a website.

This is a huge advantage for a number of reasons:

You can apply site wide style changes very quickly and easily.

You can port your content to different devices (say an iPhone) by using a different style sheets rather than having to create another site and duplicating content.

You can have all your content in a database which can store vast amounts of information and then just style it with a CSS.

It makes a web page smaller and encourages speedy  loading.

When you add content to a site you needn’t worry about having to style it from scratch.

CSS gives you more control over the page layout than relying apon HTML, it also makes the page more accessible to disabled users.

If you’re viewing this site in Firefox click on the View > Page style > No Style menu then you’ll see what the web page looks like without it’s CSS style sheet. As you can see it has no styling what so ever.

The website CSS Zen Garden shows just how powerful style sheets can be. Each different design takes exactly the same content but uses different CSS file.

Open a new page in Dreamweaver (File>New>HTML>layout none)

Make sure you have the viewing options set to ‘Split’. That you can see the HTML your generating whilst working in Design view. This is a great way to learn which tags do what.

The first thing to do is set the Title of the page. The page Title is the text that appears at the top of the browser, e.g. ‘Creating a Self Promotional Website’. To do this fill in the field at the top of the Dreamweaver interface called Title.

You can see in the code window that the title you entered appeared between <title> and </title>, these are tags. All tags have angled brackets around them and most tags have opening and closing sections. The opening tag has angled brackets the closing tag has a slash after the tag name. There’s a comprehensive list of tags here.
So this is general structure of a tag:

When you create a new HTML file in Dreamweaver there’s a number of tags already in there, the ones you need to worry about are <head> and <body>.

Content within the <head> tags contains information about the page, for example who created the page and where the CSS is stored. Generally content within the <head> tag won’t directly appear on the page.

All the visual elements on a page appear within the <body> tag.

Let’s add a header into our page. To make it more prominent we’ll apply a heading tag to it. Properties Panel > Format > H1

To create a space after the title hit Enter on the keyboard. You can see Dreamweaver has added <p></p>, these are paragraph tags.

For the body copy we’ll use Lorem Ipsum, it’s been used for 500 plus years for type setting. Paste this text into Dreamweaver.

Let’s use some of this text as a subheading so select the first sentence and make it bold. Properties Panel > B and italic Properties Panel > I.
You can see Dreamweaver has added <strong> and <em> (emphasis) tags around that content.

The subheading would stand out better if it started on a new line (but remained in the same paragraph).  If you hit Enter after the first sentence Dreamweaver will think it’s a new paragraph and add unnecessary vertical space into the paragraph. To add a line break without creating a new paragraph hit Shift AND Enter. You can see Dreamweaver has now added in a break tag <br />.

It’s time to save this genius piece of design. File>Save.
Save the file somewhere where you can easily find it again. Call it index.html. It’s called that so the web server you’ll (in theory) put this web page on knows it’s the first HTML file to display, the homepage. The names of your HTML files shouldn’t have spaces in them or contain uppercase letters. Some web servers can handle this, some can’t.

Find where you saved the HTML page and open it in a web browser to see it in all it’s glory. To speed things up you could go File>Preview in Browser>Browser name.

Now let’s add an image to the page. After the body copy create a new paragraph by hitting Enter. Find an image on your computer or the net, no wider than a 250 pixels, so pretty small. Place this image in the same directory as your index.html page. Click Insert>Image>imagename.jpg.

You can see Dreamweaver has inserted the image tag <img>. It has the source attribute (src) of “filename.jpg”, a width and height. The image tag like the break tag doesn’t need a closing tag.

After creating such a beautiful looking page you’ll want to credit the guy who showed you how to achieve this, understandable, so let’s add a link to this promotional site in.

Create a paragraph after the image by hitting Enter, type in something complementary and highlight the text. Paste in the URL of this site http://promotionalwebsite.wordpress.com. It’s important not to forget the http:// bit.

Dreamweaver has added in hyperlink tag <a> with a hypertext reference (href) attribute of this site’s url. Preview the site.

This page is starting to look like the web page we viewed with the style sheet off. That’s because it contains no styling or layout information. We’ll come to those later. The tags you’ve seen so far form some of the most common and important tags you’ll come across.

Now it’s your turn to create this simple page.

Open Dreamweaver
Create a blank HTML document
Make sure your viewing the page in Split mode
Insert some body copy
Create a heading <h1>
A bold, italic subheading with no line break before the body copy
Save the file as index.html
Add an image
Add a link
Stand back and admire your page

It’s important that at this stage you don’t try to change the font’s attributes, colour, size, face, using Dreamweaver’s properties panels. Dreamweaver helpfully adds in it’s own embedded style sheet which will muck up the external style sheet which we’ll add later.

You’ll be familiar with tables from (God awful) programs like Word and Excell. Tables are made up from columns and rows in various combinations to create a lattice that page elements can be placed within.

Each individual table element is called Cell.

All basic layouts can be made with tables, often with tables placed within tables, this is called nesting tables.

Return to your web page and create a paragraph below your link and click Insert>Table.

Let’s create a 500 pixel wide 2×2 table. If you create a table with pixels you have absolute control of it’s width, if you use percentage values your table will stretch to the available width. Most table based sites use a combination of percent and pixel based tables.

You can see Dreamweaver has created a <table> tag with a width attribute. Other attributes include border, cellspacing and cellpadding, I find it makes life easier if you always set these to 0.

Within the table tag it has also created two table row tags <tr> and several cell tags within the rows <td>. It has placed some spaces within each cell, these are represented as &nbsp; (non breaking space).

Unless you specify the pixel values of rows and cells your carefully crafted table will soon start going pear shaped. To demonstrate this try adding some text into a cell, it soon loses it’s original shape.

To specify a cell width, click within a cell then click Property Panel>W. Enter 250 into the field. That has added a width attribute to the table cell tag. Add a width of 250 to a cell of other column. The table will be now be more robust. The table can be more robust still by adding invisible images (1 pixels transparent Gifs) to create a kind of brace for the cells, but we won’t need to do that for such a simple layout.

Now you’re becoming more familiar with HTML tags try adding the widths in the Code view window when editing the page.

In the top left cell we’re going to create a simple menu, type in Homepage then a Shift + Enter to add a line break (without creating a paragraph). Then repeat with About and Work. Select Home and link it to index.html via the Properties Panel>Link. Repeat for About (about.html) and Work (work.html).

In the right-hand column we’re going to place the content we’re created so far. Select the content, cut it and paste it into the right upper column of the table. Delete the unused white space above the table and preview the page.

You can see the menu is vertically centred with the right-hand content. This occurs because all cells vertically centre align content as a default. Simply click on Panel Properties>Vert>Top. Do the same for the cell with the main content in.

Tables become powerful when you start to nest them. Say we wanted to create two columns beneath the original link, insert a table of 250 pixels (or 100%) into the bottom right cell with two columns and one row. Save and preview the page.

With anything more than very simple layouts it’s a good idea to draw the out the table structures on paper before tackling it in Dreamweaver.

Now it’s your turn, so…

Create a 500 pixel wide 2 column, 2 row table
Add in pixel widths of 250 to the cells
Create a menu in top left cell with the links Home (index.html), About (about.html) and Work (work.html) in.
Paste in the main content in to the top right cell.
Vertically top align all cells with content in.
Nest a two column table in the bottom right cell