HTML Website – Design process and final result

I’ve been owning my domain name, RumenaZlatkova.net, for the last three years. It has gone through at least three redesigns; each version was using a WordPress installation for content management, with a customized theme. It hosted a simple blog with static pages, portfolio and links to my online spaces. The last version of the website was the portfolio I presented when applying for my place at Coventry University – so it was a bit outdated, considering all the new media artefacts I’d produced since starting my Media Production course.

So when I found out we were meant to design an HTML website for our 161MC coursework, I decided I would redesign my own website.

Kissing WordPress goodbye

Although WordPress is a great system when it comes to blogging and managing a large amount of content, it is a coding hell if you need to customize it and/or simlify it. What is more, all the different versions of its software and constant need of update for it and/or its plugins mean endless hours of bug tracking, testing, and rewriting code. The fact it is an open system, as great as it sounds, makes for no consistency – each developer has the freedom to choose how to structure their code, how to design the elements etc. – there is no right or wrong way. So if you wanted to include a Flickr ot Twitter widget / plugin, and wanted to customize it, you’d need to bury yourself in PHP / HTML / CSS which is usually all over the place. Plus, if you (God forbid!) decide to update either the WordPress or plug-in version, there is a good chance the system will work in a different way after the update, or not work at all.

Anyway, rant aside, I didn’t really need so much functionality. My website has never received much attention, neither from me, nor from people searching for me. Plus, if I want to showcase my work, I can guide them to my online spaces like Flickr and Vimeo, which are systems specifically built to suit this type of content – and if I want to highlight certain pieces, I can either link to them or embed them in a simple HTML template.

So instead on focusing on functionality, I decided to focus on how the website would help me curate the pieces I already have in a way that makes sense to me, and hopefully to people that are interested in my work.

Focus on content and structure

After deciding I would outsource the hosting and visualisation of things like photo slideshows, videos and sound, I finally got the chance to think about structure.

I have various bits and pieces of content worth showing – there are writing and translation projects I want to highlight, a bit of graphic and web design, sound, video, and photography. Some of them are straightforward, some belong to more than one category; in others I was only partially involved or just the editor. So I had to invent a structure for the website to help people navigate through all these pieces. It had to be consistent, but also customizable enough to suit each type of content. I decided to divide them into categories and make these separate entries in the main navigation.

Website mockup - 01

In terms of design, I wanted something simple – first because it is easier to code, but also because it is easier to maintain. I believe in clean black, white and grey designs – because it helps the viewer focus on what is most important – the content. The design had to serve the content – rather than the content trying to fit into a design.

The basic structure was decided to be a horizontal header with my name and tagline, and vertical navigation menu for the different content categories. I was also experimenting with horizontal navigation, but since my design is based on typography and text, having my name, tagline, and menu entries all in the same part of the screen proved distracting and hard to navigate. Plus, with vertical menus you can always add or remove entries without it affecting the balance of the design too much.

Branding

I think a crucial part of someone’s online presence is their branding – the way you write your name, the fonts and colours you use, even the tone of your writing. I’ve been building an online presence for almost as long as I’ve been online – 10 years, more or less. The elements of my branding include:

  • my name – Rumena Zlatkova. I actually have three names, and it is more typical for people to be known for their first and third name. But since I first started labeling my notebooks in primary school, I’ve always used my first and second name – because it is more unique, sounds better and I feel it has more character. Wherever I have an online profile, my username is either Rumena Zlatkova, or Rumena – rarely Rumi. It is consistent, easy to remember, and easy to find. Plus, my name is rare enough so that most of the time, this username is free when I join the service.
  • the tagline – ‘Media producer and content editor. I live to create.’ This is something I came up with a couple of months ago – I am studying Media Production, and producing various types of media pieces, both for university, and in my ‘real work’ and personal projects – so I believe ‘media producer’ is accurate. Plus, I found out I am often involved with editing and polishing my own and someone else’s work – in various formats. So ‘content editor’ is a very important part of what I do and I needed to include it in my tagline. The last bit: ‘I live to create.’ is something I added for a more personal touch. ‘Media producer and content editor’ sounds good, but is too generic and it doesn’t have a real personality. But when you add ‘I live to create’, it hints that creating is something I do not only because I have to – but because I have the emotional drive to do it.
  • the font I use – Arial, whenever possible. It is a web-safe font, looks good and professional, plus people are so used to it that it doesn’t distract them from what they are reading. Plus, I’m using it in my ‘logo’ – in my case, I simply spell my name in Arial Bold.
  • the colours – black, white, grey, and sometimes pink. However, the more content I produce, the less I am inclined to use pink. It adds a very strong, too strong, emphasis – and distracts from the actual content. So I decided I won’t be using it much in my website design.

Something I decided not to use was the cartoony version of my name spelled in Bulgarian that I designed a couple of months ago. You can still see it here in the earlier versions of the design, but in the most recent ones, I removed it. It is drawing too much attention to itself with its strong, bold lines and sharp edges – so it is a good visual element in itself, but when put on top of other content, it shifts the focus.

Website mockup - 02

Website mockup - 03

Layout and secondary navigation

What you can also see here is that I was designing with real content. I don’t use placeholders – my content is too eclectic as it is, and it is a design challenge to fit it into a consistent structure. So I was trying to find a way to list the different projects within the same category, giving a ‘short and sweet’ visual preview for the viewer to quickly decide whether they want to see it or not. I first started working with the ‘Video’ section – so I was experimenting with similar to Vimeo and YouTube’s video lists with previews on the right. It is familiar, something visitors would expect how it works – I didn’t want to confuse viewers with yet another new navigation concept. If you are a big name you can be bold and make people ‘search for it’ – but if you are the one crying for attention, you need to facilitate an easy and effortless interaction.

I was trying to fit this concept also in the layout for non-visual content – for example, writing and sound. So it is one of the solutions I am considering for the next, full version of the website (the one I submitted for assessment is focusing only on university work as pointed out in the 161MC brief).

Another idea for the secondary navigation was to use clean, text-only menus. It was inspired by this website which (amongst others) I looked at in my research:

Jan ReichleThe problem with this type of navigation, however, is that it doesn’t clearly show the visual hierarchy of the items. It can be mistaken as the second column of the same long list rather than a new level of navigation. It is definitely in my short list for design solutions, but I will need to rethink it.

Other websites I’ve been looking at when researching for simplistic design and navigation included:

http://www.madebytj.com/ – for a black and white + grey typography focused design

http://jamesmli.net/portfolio.php – for the visual previews on the right

http://www.giantantmedia.com/archive.php – for the simple, text-based navigation and visual previews of the content. They are also using the ‘hover’ function to display additional information about each project.

http://riotindustries.com/ – for the secondary navigation with visual previews.

When researching for navigation and design solutions, I tried to focus on portfolio websites, especially ones with more than one type of content. Some of the decisions were quite interesting and pleasing the eye – but there is a catch. I want my website to be usable on touch devices such as mobile phones and tablets – so I don’t want to have significant functionality relying on ‘hover’. I also wanted the website to be viewed effortlessly on smaller screens – so the layout is less than 960 px in width, making it usable on 1024x screens. I later found out that the version I currently have online only needs 800 px in width – so it works on even smaller displays.

From these 800 px, 700 are dedicated to the main content area. I made sure all the images and embedded objects are 700 px in width, so they are the huge focus of the site.

I used <div>s instead of tables – tables, I’ve found out, are to be used for tables of data, while divisions should form the layout. Also, I used Adobe Fireworks for the design mockups – it is a program specifically designed for screen based interfaces, and it has a better integration with HTML. What is more, since it is vector-based, resizing elements is very easy – as opposed to the Photoshop hell where, once ‘flattened’ or ‘rasterized’, the elements need to be redesigned for each small resize or design change. Here is a nice article with a walkthrough of a typical web design workflow for Fireworks:

50 reasons NOT to use Photoshop for Web Design

Here is another screenshot of a design mockup I was playing with:

Website mockup - 04

It is actually a ‘design within design’ – it would be the page with my previous website design – to be included in the Design section in my portfolio (a bit meta, I know…).

And here is something I have been thinking about to use as a Home page. I am not sure about that yet – visitors should be able to access the content easily, and if I use this as my Home page, one might think that’s all there is to the website – like a business card, with no call to action or hint where to click next.

Website mockup - 05

Finally, here is the version of the website I submitted for assessment:

http://rumenazlatkova.net/

I am not sure how visible it is, but I worked with the line spacing of the text. I found that you can set the ‘padding’ parameter in em points – so it is relative to the text and element sizes in my design. So now all the lines of text with the ‘normal’ text size are aligned to an invisible ‘grid’. I also made sure I set the text to be ‘justified’ – so it looks more like a block of text instead of individual lines with varying lengths. It is not always the right choice – but in this case, it works well. I am also using a global CSS stylesheet – so all the elements in the HTML pages only contain content, and their style is controlled in a central file. This means, that if I need to change some design element, for example the colour of links, I only need to edit the style.css entry and it updates throughout the website.

However, using pure HTML for the separate pages adds more work for the elements that are present in all the pages – the header, footer and navigation menu. What is more, in order to track the visits, I had to install a separate track to each static page and add them as individual projects in my tracker.

So in the next version of the website, I will try to employ a different approach – using static HTML pages, but then including them in a dynamic template – where I only need to update the header / footer / menu template once. I still, however, insist on having separate HTML pages for each project – because I can control the content easily. And I don’t need a CMS – most of the time, they complicate things too much. So I will be researching for such a solution.

Screenshots of each page:

1. Home /index.html

Design - Final - 01

2. Net TV /nettv.html

Design - Final - 02

3. Soundscape /soundscape.html

Design - Final - 03

4. Photography /photography.html

Design - Final - 04

5. Contact /contact.html

Design - Final - 05

Here is a link to the Stylesheet for the website: /style.css

Advertisements

4 thoughts on “HTML Website – Design process and final result

  1. Thank you for the link Georgi, I’m bookmarking it for future reference ๐Ÿ™‚
    By the way, I can see you want to give some more detailed feedback / comments, please do. Don’t worry, I won’t bite ๐Ÿ™‚ It’s so rare to have someone geniunely comment and critique my stuff, I do want feedback – I learn best from my own mistakes.

    Like

  2. Uh giving feedback isn’t easy ๐Ÿ™‚ I wrote what I was thinking at the moment ๐Ÿ™‚
    About the website the details are what make the difference in this case. You have gone the way of design serving the content but not all the way. The guy from the website tells it in details I can’t.

    Like

Any thoughts?

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s