Warning: Invalid argument supplied for foreach() in /home/dutch/public_html/wp-content/plugins/divi-builder/includes/builder/feature/custom-defaults/Settings.php on line 64
September 2010 – Duhallow Web Design

September, 2010

Web Design

Web Design

Here’s my breakdown of the ideal web design process.

I know a lot of people are going to read this and shout “That’s not the best way to go about designing web sites!”

All I can say is: this is the essence of the process that works best for me.

I offer it in the hope that maybe bits of it will work for you too.

I’ve been creating web sites for 17 years now, and I’ve got much more successful at it over that time. And I’ve come into contact with lots of very clever and complex software development processes, many of which don’t produce very good results.

This is the typical process I use today on most of the sites I do (of all sizes). It focuses on getting clear on what you’re doing before you start, and staying clear while you work swiftly towards a good solution.

Overview

  1. Know what you’re doing
  2. Know what the site needs to do
  3. Know what the site’s visitors want
  4. Get a good picture of the personality and style of the web site
  5. Sketch out highly successful scenarios
  6. Organise views into a site map
  7. Sketch the essential features & look
  8. Map your visitors’ attention
  9. Arrange the visual elements to work together

Step-by-step

1. Know what you’re doing

Being clear about what you are working to achieve helps you achieve it.

Always be clear on your goal – the state you wish to reach – when you sit down to design a site.

  • Do you want to impress other web designers?
  • Do you want to delight your client?
  • Do you want to make a good profit and pay your rent on time?

There’s a kind of magic called “creative visualisation”. When you can see an end-point in your mind’s eye, you can much more easily see the steps you need to take to get there. Also, you’ll even find that your subconscious actions help carry you forward too.

2. Know what the site needs to do

You may have a client who tells you what they want (e.g. “We want to break into the big time and sell more widgets.”).

Try to get really clear about what the goals of a site are. What does success look like? How will you know when you’ve got there?

Having this stuff clear in your mind helps you:

  1. make the thousands of design decisions between now and a finished product
  2. communicate with your client and maintain their confidence throughout the process
  3. show that you’ve done what you set out to do

3. Know what the site’s visitors want

Ideally, you’d like to show your designs to all your site’s target users, and find out what works well for them. As this is not possible, you need another technique.

For all but the simplest of sites, I develop personas and scenarios, based on a simple goal-directed techniques developed by lovely Alan Cooper and his friends at Cooper Interaction Design.

4. Get a good picture of the personality and style of the web site

User personas give you great insight into users’ goals and behaviour.

But a web site often has its own goals that may be in conflict with the goals of the users. The site also often has Soft Goals, to support or develop its Brand.

You need a way to balance all these various forces optimally.

I’ve developed a further tool, the Site Persona, which embodies the site’s personality, drive and goals in the same way that User Personas do for users. The Site Persona represents both the Brand and the Goals of the web site, which you work into the mix through dialogue with User Personas.

Picture your web site’s interactions as a series of conversations between User Personas and the Site Persona. The users are trying to get what they want, and the Site Persona is trying to help them, while ensuring it does its own job.

5. Sketch out highly successful scenarios

Once you know what your site wants to achieve, and what your visitors want to achieve, it’s time to start planning out the site’s structure.

I don’t start with a site map, as this is too restrictive. I prefer to sketch out the experience, using pencil & paper, just showing the most important aspects of the interaction between site and user.

(Sometimes, these are in the form of a scripted dialogue, where my user persona and site persona communicate as though in a conversation, which will eventually be translated into visual elements.)

A sketch will typically feature:

  • Stars showing how a user arrives at the site (entry points)
  • Circles showing actions, views or places (which may eventually become pages)
  • Arrows showing how users may move around the site
  • Speech bubbles representing what a user persona thinks at key places

Here’s a real first site sketch I’ve just done on paper, which lets me think and work quickly.Don’t worry about the particulars of the design. This sketch isn’t a project deliverable to share with other people. It’s for my use, to help me clarify what’s important.

This particular sketch shows a few successful scenarios, which may apply to different user personas. The important thing is I’ve started visualising the path to success (users taking part in online auctions), from different starting points.

Here, I’ve realised that the key point is ensuring that visitors can find something that they’re interested in. If that doesn’t happen, nothing else I can design will matter.

Therefore, to make this site successful, I have to make it easy and appealing to look around until you find something you like enough to find out more.

I may do lots of these sketches, but they’ll never take more than a couple of minutes each. But I’ve got my head working freely on the problem, unencumbered by constraints like complicated drawing packages or modelling syntax.

6. Organise views into a site map

You will need to plan out what pages will be on your site, how they might be grouped, and how users will easily find their way around.

Your site map will effectively merge all the views from your initial free sketches into a structure that’s clear and economical. You want your visitors to be able to move freely from place to place, following their noses to their goals.

Things to think about:

  • Think what global or top-level links really need to be available on every page. Test your assumptions.
  • Create enough sections that it will be easy to focus on what you want.
  • Be careful not to over-segment. If you have too many sections, your site will look bigger and seem harder to navigate. Avoid creating sections that won’t have enough content. (“No news is bad news”).
  • You need to include any other stuff that needs to be there (like Contact Us and Login), which might not feature on any of your sketches to date.
  • Look for ways to use smart links and deep links that take users directly to what they’re most likely to want next. Don’t make them dig.
  • Try to optimise the site so that the paths to the key goals are easy, i.e. with fewest possible steps. Your page design will build on this.
  • Remember the principles of simplicity and Occams Razor. If you can achieve something more simply, if you can remove something and still maintain the required effect, do it.

See..

7. Sketch the essential features & look

Now we’ll start designing the page, still working on paper at this point. (I find that paper & pencil are much quicker tools than a computer, no matter what software package I use.)

Normally, I’ll start by shutting my eyes or gazing out of the window, while I visualise what kind of layout and look will feel right, providing a nice clean interface that portrays the right personality.

I’ll then sketch that quickly onto paper, in a rough rectangle, and slap on the essential features:

  • Overall page structure and proportions
  • Level 1 navigation (your sections)
  • Other global navigation (like login/out, site map, help, footer navigation)
  • Main areas of screen real-estate
  • Any key graphical elements

Example

There’s not much to see in this simple sketch. The body of the site will sit in the middle of the page. I’ve put in the top navigation bar, site logo and strapline, and I’ve got an idea where the content is going, and that there will be thumbnail images down the right hand side.

It doesn’t look like much, but all it’s doing is helping me crystallise the vision in my mind’s eye of what the page will look like.

Why I do more designing in my head than I do on the computer

The quick pencil sketch just helps me quickly record the likeness of what I’ve visualised in my head. Then I don’t forget and can make it up quickly in Photoshop. I find this way of working a lot more efficient than starting off in Photoshop. Again, it’s getting clear first, then doing (think-then-do).

8. Map your visitors’ attention

A key step in doing your page layout sketch is getting a good idea of where your visitors will want to look.

When you craft the page on the computer, your job is to balance the relative noticeability of all the visual elements on the page, so that visitors will be drawn to the things that are most important.

Things that increase noticeability

  • Bigger things!
  • Strong colours (used sparingly)
  • High contrast (either shapes, lines or edges with significantly different tones)
  • Movement (either actual animation or dynamic lines that give the impression of movement)
  • Things with plenty of space around them (they’re easier to identify and seem more important)
  • Things placed at high-value positions on the page (e.g. towards the top-left and down the middle — depends on your layout)

The Golden Rule comes into play here.

Everything on your site must either:

  • Help your visitors achieve their goals, or
  • Support the site’s goals without obstructing the visitor’s goals

So we’ll use these devices to show visitors where to look, and where they don’t need to look (unless they need to).

Here’s how my page sketch (above) came out looking..

On the screenshot above, notice what’s most noticeable. See how you can get an impression of what the site’s about, and what you’re likely to find there, with just a quick glance (and without being able to read much of the text).

This is made possible by carefully prioritising the most relevant visual elements – the ones that are most useful in explaining what the site is about, what you’ll find here, and where you might go next.

9. Arrange the visual elements to work together

It’s only now that I’d dive into Photoshop. I’m totally prepared, and ready to work quickly (because I know that playing on the computer can easily make me lose perspective).

  • I know what the site has to achieve to succeed
  • I know what my visitors are looking for, and what they’re trying to achieve
  • I understand the site’s personality and what it wants to achieve while the visitors are on there
  • I know what pages and sections are on my site
  • I have a good idea of the right page layout that will help visitors flow round the site easily, keeping them interested until they have done what they want
  • I know what visual elements will be on my page, and their relative priority

This prior work will help me quickly execute a design that’s fit-for-purpose, without getting too bogged down trying lots of different page layouts in Photoshop (which is time-consuming).

There are a few other principles & disciplines that help me create something that’s more than adequate, without taking up too much of mine & my client’s time:

  • I work in short bursts. If I feel tired or unclear, I’ll stop and do something else.
  • I keep it simple. I’ll try to find simple page layouts, navigation structures, and tonal/colour schemes. I’m not afraid to adapt something that has worked before, if it’s suitable.
  • I invest energy where it is most beneficial. I’ll happily craft custom buttons, an icon or logo, if doing so will deliver impact. I know that each page doesn’t need too many rich visual features, if they are applied with care.
Read More

Website Hosting

Website Hosting
If you’re new to buying web hosting or running a web site, this page could answer some of those nagging questions. We’ll take you from the very beginning and work up to some fairly advanced concepts – but don’t worry, everything on this page is suitable for absolute beginners.

What is web hosting?

Think about the files and folders on your computer. They are stored on the hard disk of your desktop or laptop computer, ready for you to access them whenever you like. A web page is a file, just like your word processing documents. Just as your word processing documents require your computer to store them, all web pages require a computer to store them. The difference is that web pages are generally intended to be seen by the general public. To enable this, the computer on which they must be stored must be of a much higher specification than your desktop PC, and must be connected to the Internet through a very powerful link. A computer on which web pages are stored is called a web server (because it serves pages, on request, to users on the Internet). Collectively a bunch of web pages is a web site, and collectively all the web pages in the world form the World Wide Web (WWW). The job of making web sites and web pages available to many users is called web hosting. We sometimes like to call the product we offer web space, because we are selling “space” on the Internet for you to host your web site. Web space is measured in megabytes, in exactly the same way as the space on your own computer is measured.

Why do I need web hosting?

It is technically possible to connect your own PC or Mac to the Internet and have it serve pages. But it is not practical since usually a home-based Internet connection is not powerful enough to serve many users at the same time. For this reason, web hosting companies exist. They own and maintain very powerful web servers which store your web pages. They connect these web servers to the Internet by very powerful connections, enabling many web users to access your web pages at the same time. If you want to run a web site you need web hosting because unless you’ve got unlimited funds you would not be able to afford the web servers and connections necessary.

What else do web hosting companies do?

As well as providing web space web hosting companies provide other “value-added” services. The extent of these varies from company to company but there are some key services provided by nearly all. These are the registration of domain names (see below) and provision of email. They may also provide technical support either through their web sites or by email or telephone.

Are there different kinds of web hosting?

Yes, of course! There are many different varieties of web hosting, designed to meet different needs. A two-page web site set up by an individual will need far less robust web hosting package than a multinational high-traffic site set up by a big company. There are a few key differentiating factors between the packages web hosting companies provide.

Amount of web space

This means how much web space the web hosting company will allow you to use for your web site. This can vary but usually starts at around the 100 megabytes mark, and can go all the way up to 1000 or 2000 megabytes. For all but the biggest web sites, 100MB is more than adequate. Some web hosting companies offer much more space – they are able to do this because they know that the average web site comes in at less than 100 megabytes.

Number of email addresses

This means how many email addresses the hosting company will permit you to have. For budget accounts, this is usually somewhere between 1 and 10 email addresses. Some higher-end packages permit say 250 addresses. Here at UKcentric we like to go one further whenever possible of course, most of our web hosting packages come with up to 100 email addresses.
Quick reference
1 letter on a page = 1 byte
1024 bytes = 1 kilobyte
1024 kilobytes = 1 megabyte
1024 megabytes = 1 gigabyte

Bandwidth (or data transfer)

This is a much misunderstood measure, but it is really important if your web site starts to generate a lot of interest from web users. It means the amount of data your web site can transmit to web users. For example, if a web page in your web site is 10 kilobytes (about 1000 words on the page) in size, and one Internet user views it, you have used 10 kilobytes of bandwidth. If 10 users request that page you have used 100 kilobytes of bandwidth. Bandwidth is normally measured monthly. Most small web sites will need under half a gigabyte of bandwidth per month. That means you can serve about 52,000 web pages per month (assuming the pages are an average of 10 kilobytes in size). At UKcentric our lowest-cost package (the Pro plan) offers 20 gigabytes of bandwidth per month, allowing you transfer about 2,080,000 pages. This is more than adequate for small to medium web sites.

Bandwidth overage

What happens if you go over your allotted bandwidth? This is known as bandwidth overage. Some companies will switch off your web site if this happens. Others will automatically add on extra bandwidth charges which are priced at a different (usually much higher) rate than your normal monthly hosting charges. At UKcentric we understand that some customers will occasionally go over their monthly allowance. We do not cut off the web site if this happens, nor do we charge any extra. Instead we may notify you and recommend you upgrade your web hosting package to one with a higher allowance.

Windows or UNIX?

The last major differentiating factor between web hosting packages is the operating system. Just like your desktop computer (probably running Microsoft Windows or an Apple Mac OS), web servers run an operating system. It’s the software that makes the computer go. There are two major types of OS in the web hosting world – Windows and UNIX. The major variant of UNIX is called Linux. For basic web sites it doesn’t really matter whether you choose Linux or Windows hosting. Your pages will work just the same whichever you choose. But for more advanced users it pays to make the right choice. Which OS to choose comes down to what you want to do with your web site. For example if you want to install certain apps such as WordPress (see below) then you need to know which OS the app runs best on. Here are some examples: Apps that run better on Linux: WordPress blogging system Magento shopping cart Joomla website building software Apps that run better on Windows: Umbraco website building software nopCommerce shopping cart BlogEngine.net blogging system But – almost all the Linux apps can also run on Windows!

Features and apps

These days it is quite rare to find a web site that consists entirely of simple, static web pages. Normally most sites offer at least some degree of interactivity. There are many examples of interactivity, including:
  • forms for users to fill in, which email the data to the web site owner
  • databases which contain details of many products on offer
  • ability for web site users to upload files such as photos to the web site
  • shopping carts
  • online learning systems
  • online communities and forums
All web hosting accounts offer the ability to store static web pages. If you want  interactivity, you need to ensure your host offers the right components. These are available to you through web site scripting. Web site scripting means we offer you the ability to program your web pages to behave in certain ways. Scripting is done using a programming language, and there are several common ones available for web programming including: PHP ASP.NET Java Python For example, let’s say you want to set up a bulletin board to allow your users to hold an online conversation amongst themselves. This would require a database to store all the messages, and the ability to send an email automatically to you when someone has added a new message so that you can review it. In this situation, we are using at least two components: a database and an email component. Storing and retrieving data and sending emails are all done via special script which is embedded in your web page. We offer support for several scripting languages, including PHP, Active Server Pages (ASP) and .Net (ASP.NET). The latter two languages are from Microsoft, so if you have any familiarity with Microsoft languages such as Visual Basic, you will be at home here. Furthermore, .NET in fact supports many different languages such as C#, a variant of the C++ language. Most hosting plans come with the ability to connect to a MySql database.  Windows hosting plans can usually connect to a Microsoft Access database, or even an Excel spreadsheet, if you like!

Once I have web hosting how do I get my web site online?

Once you’ve decided on your web hosting package, you will need to design your web site and get it online. This isn’t as hard as it sounds and there are thousands of web sites built by people who’ve never built one before!

WordPress – a brilliant site-building system for absolute beginners

There are many tools and apps available which can help you build your web site. These tools usually allow you to log in to your site and create/edit pages, add images, and add features such as shopping carts or forums. A great way to start would be with WordPress – a free system which helps you build web sites and blogs. WordPress is incredibly easy to use, and you don’t have to know any technical stuff whatsoever. It also has an extensive collection of free themes available – which means it’s easy to make your site look amazingly professional with just a couple of mouse clicks. WordPress runs in your web browser, so you don’t have to download any software, and you can edit your site from anywhere in the world. (Fancy updating your site whilst lying on the beach? With WordPress, you can!)

Site-building for those who like to do things by hand

For those who prefer to build their own sites by hand, you’ll need to start with a software program that can create and edit your web pages. An excellent choice is Microsoft Expression. Another popular choice includes Adobe Dreamweaver. Both of these packages are paid-for, but there are many free web design programs you can download too. You will initially create your web site on your computer. Once ready, you will then need to upload it to our web servers. As part of the process of ordering your web space, we will have sent you the username and password and other details you need to access your web space on our servers. You must set up your web page editing software with these details. How to do this will vary from program to program, but feel free to contact us for advice on this. Whichever program you choose, the objective is the same – create good-looking web pages. All these editors allow you to enter text and images into your web pages in a similar way to using a word processor. So if you’re familiar with word processing, this will be quite easy for you. If you don’t want to do this yourself you can of course a professional web design company. You will then upload your files to our servers. You usually do this using a facility in your site-building software. You’ll need the username and password for your web site to do this – your web hosting company will give these to you when you set up your account.

What about email?

The other half of web hosting is email. All web site owners require email accounts with the same domain name as their web site. For example, if your domain is londonwidgets.co.uk, you’ll probably want an email address like sales@londonwidgets.co.uk, or john@londonwidgets.co.uk. Most web hosting accounts come with a set number of email accounts included, usually between 3 and 10. Your web host will also give you access your own personal email control panel which will allow you to set up your accounts.

Sending and receiving email

Once you’ve set up your email accounts, you’ll need a way of sending and receiving email through them. There are many ways to access email these days, such as:
  • desktop software such as Microsoft Outlook, Outlook Express, Thunderbird
  • email software built into your Mac, iPhone, smartphone, Android phone, Blackberry or Windows phone
  • send and receive your email via tablets, smart TV and other devices
  • WebMail – a web site where you can log into your email account via your web browser
  • popular free or paid-for webmail facilities such as GMail or Hotmail.
Provided your email account supports POP3 or IMAP (don’t worry about what these mean) you will be able to use your email through any or all of the above ways.

Where do domain names come into it?

A domain name is your identity on the Internet. For example, the domain name of this web site is ukcentric.com. All web sites are reached by a user typing in the domain name to their web browser. Also, all email accounts are related to a specific domain name. To set up a web site you will need a domain name. Most people purchase their domain names from their chosen web hosting company, either before they purchase their web hosting accounts or at the same time. You can also host a web with a different company you bought the name from. A domain name that does not have any web space allocated to it and does not have any email facilities is known as a parked domain. This means it is reserved for the owner’s later use.

What are the pitfalls?

As with buying any service, whether online or off-line, there are a number of potential pitfalls that is advisable to be aware of. The world of web hosting is infested with jargon and it is sometimes difficult to understand what your requirements are and how to tell if you are getting a good deal. Unfortunately there are some unscrupulous companies operating in this area who bring the industry into disrepute. Fortunately, the most common pitfalls are easy enough to avoid as long as you are armed with a little information.

Hidden bandwidth charges

Many companies hide the fact that they offer insufficient bandwidth for you to reasonably run your web site. Check small print for any hidden bandwidth charges. Often extra bandwidth is charged at a much higher rate than your normal allowance.

Hidden VAT charges or setup costs

Check the small print of any web site you’re thinking of ordering domain name registration or hosting through for hidden VAT, or setup charges. These can often add substantially to your overall bill.

Unlimited bandwidth

Some companies offer you “unlimited bandwidth”. This sounds fantastic but in fact no company (really, no company) is able to offer this. What it really means is that there are no set limits, but if your web site attracts too much traffic, they will either close it down or contact you and force you to upgrade.

Hidden domain name transfer fees

Some companies offer very low-priced domain name registration, and allow you to transfer names in for free. However there may be hidden costs if you want to transfer your name away from the company for whatever reason. Some firms are still charging up to £80 to transfer away, which is totally unethical. Most companies allow you to transfer your domain away free of charge.

Domain name ownership

Incredibly, some companies still register names purchased by you to themselves, instead of you. This makes them the legal owner of your chosen domain name. Make sure your domain name will be registered to you, not your web company.

Fixed length contracts and lock-ins

Most companies offer a month-by-month hosting option. But many companies offer good discounts if you pay for a whole year at a time. It’s worth asking your web hosting company if there is a minimum contract term.

Lack of technical support

If you are new to web hosting and running your own web site, top-notch technical support will be crucial to you. You need to ensure that you can contact the hosting company and that they will respond in a timely way with an appropriate answer. Support is one area where web companies can really differentiate themselves. Support should ideally be offered through email, web and phone. Many companies also offer online chat support and support forums where customers can help each other.

Finally

We’ve introduced many concepts and gone through some jargon too. We hope this has not put you off. Running a web site, whether for business or pleasure is immensely rewarding.
Read More

Join Duhallow Today

Join Duhallow Today

Join Duhallow Today

5 + 13 =

Read More