What Is Web Design?


INTRO FROM DON – Heather as most of you know is our technical writing intern.

Heather and I worked hard on this the first article we’ve published – it’s on Web Design. She’s done a great job of explaining the basics of what “Web Design” consists of – It’s a good starting point 😀

Many are confused between “Web Design” and “Web Development” … Guess what’s next ? “What Is Web Development”


What Is Web Design?

Introduction

When you open up the web browser on your computer, tablet, or smartphone what is the first thing you see?

doncharisma-what-is-web-design-1-logo

A web page!

The internet is built on web pages, all of which have been designed for a specific purpose: to give visitors exactly what they’re looking for. On a well-designed web page, visitors can navigate their way around the page (and any subsequent pages linked to it) with ease and confidence.

A web page can be created in many ways, through coding such as HTML, CSS, JavaScript, PHP, XML and several more besides. You don’t need a solid grounding in computer programing to create a dynamic website either, with the creation of CMS or Content Management Systems (such as WordPress) – systems that do the programing for you.

So we’ve established that anyone can build a web site; it sounds simple enough, doesn’t it?

The truth is that it is simple enough with the right planning and structure. Before you even begin thinking about how many visitors your site will reach, you first need to consider how your site will be organised, how easy it is to navigate, the layout (including the colours and fonts you’d like to use and any graphics that will compliment them).

Sounds like a lot of hard work, doesn’t it?

Well, with the right preparation and planning, designing and creating your web site should be fairly straightforward, just keep in mind who you want to reach and how you might want to do that.

When looking at a web page, have you ever taken the time to really consider how it’s designed, how various aspects of it are laid out? The answer is probably not. A well-designed web site gives its visitors exactly what they want, making the site both easy to navigate and pleasing to the eye.


Design Principles

There are a number of design principles to consider when creating a web page (and web site). These include:

Balance

This encompasses the distribution of light and heavy elements across the web page itself. The screen which you view a web page through is usually rectangular, which means that nearly all well-designed pages are built on a grid system. This ensures that the content of your page is balanced. Too many heavy elements on one side will make your page look off-kilter and harder for your visitors to read.

Contrast

The basic definition of contrast itself is to place opposite objects in close proximity to emphasise the difference in them. In terms of web design, contrasting colours, sizes, shapes and textures can all be employed to create emphasis on the web page itself.

doncharisma-what-is-web-design-5-logo

Emphasis

As mentioned above, when you emphasise something, the human eye is immediately drawn to it. This can be used to great effect in web design, drawing your visitor’s eye to the most important elements of your site i.e. placing emphasis on the sections of the page that you want the visitor to concentrate their attention on.

Rhythm And Repetition

We as humans love patterns and repetition – it helps us to understand and store information. That’s why it is so important that a web page employs an effective sense of rhythm. Rhythm ensures that the visitor’s experience is enhanced by the repetitive patterns of the page itself. Rhythm also makes it more likely that your visitors will remember the information displayed on your web site’s pages and increase the chance of repeated return visits to your site.

doncharisma-what-is-web-design-9-logo

Unity
Just as contrasting elements can be used for good effect in a web page, unity is also another key factor to consider. The idea of unity is to keep similar elements together and diverse ones apart. Keeping similar elements in close proximity draws them together.


Navigation and organisation

The basic principles of design have been covered, but having a visually appealing web page is only half the battle. We also need to consider how the web site itself will be organised and structured. Having a pleasant-looking site is not enough, we need to encourage visitors to stay around long enough to look at the web site as a whole, rather than just landing on a page and leaving again quickly.

There are thousands of aesthetically pleasing web sites out there that are almost impossible to navigate due to more time and effort being placed on design and little or no consideration to the functionality and usability of the site itself. In order to make your web site both pleasing to the eye and easy to use, we need to consider the following elements in the planning stages of creating a web site:

Information architecture

Most web sites have more than one page. It’s important that a site’s home page structures the information in a systematic and functional way. Think of the architecture of buildings – all well-designed buildings are built on solid foundations and a structure that enables the building as a whole to remain stable and upright. The same is true of web sites – time and consideration must be taken in order to ensure that all information within the site is classified in such a way that it makes it easy for a visitor to access the information they are looking for.

doncharisma-what-is-web-design-4-logo

Navigation

Think of this as your web site’s filing system. All businesses have a filing system of sorts whereby information can be recalled or accessed easily by retrieving the folder in which it has been filed. The same is true of a web site: information needs to be labelled clearly so that your visitors can gain access to the information relevant to their search. Your menus need to be clearly displayed on your home page to ensure that this task is made as easy as possible for visitors.

doncharisma-what-is-web-design-7-logo

Organisation

This element neatly ties in with navigation. To ensure that your visitors can access the information they require, consideration needs to be taken of how the information is classified and organised within the structure of the site itself. If your site is relatively small, putting all of your web pages in one directory may be an adequate solution. However, if your site is large and contains a high number of separate pages, a better option might be to split the site up into subfolders. This also makes it easier to access in the future should the pages need to be modified or updated.

doncharisma-what-is-web-design-3-logo

Once you’ve planned how your web site is to be structured and organised, you will then need to give consideration as to how it will be displayed to your visitors. Returning to the theory of design itself, the following should be taken into account:

Accessible

This means making your site accessible to as many visitors as possible, whether they use a computer, tablet, or smartphone to access your site. Although most web browsers support various plugins for Flash, JavaScript etc. it is best not to use these as your only means of navigation through your site. Why? If your visitors cannot navigate easily through your site from the homepage they will quickly leave and likely not return.

doncharisma-what-is-web-design-2-logo

Meaningful

Make sure that your links are clearly and accurately labelled. The most effective way of doing this is to create navigation links with the idea in mind that someone who has never visited your site before should know exactly what each navigation link means and the information that they can expect to find there.

Understandable

Consideration needs to be taken in regards to accessibility for visitors who may be sight-impaired or using a browser that does not support the display of images. If images are a key part of your site’s navigation, then it is essential that you also employ alternative text so that your site can still be accessed and easily navigated.

Prominent

The navigation panes for your web site should appear on every page so that your visitors can easily return to previously visited sections of the site. Where at all possible, the overall structure of your site should remain the same throughout (this goes back to rhythm and unity).


Presentation

We then need to consider the layout of the web site itself – which fonts, colours, images to use, while also giving consideration to how large or small we want the text to appear on the page. When designing a web site, the use of standardised fonts and small images is a wise choice.

Why?

Visitors will soon tire of web pages that take too long to load or fonts that are hard to read and make the contents of your page almost illegible. The same is true of gaudy and contrasting colours – there are various colours that the human eye finds hard to read and using these in the design of your site could turn visitors away rather than encouraging them to stay.

Take into consideration the width of your text and ensure that it fits within the web browser so that your visitors don’t have to scroll from left to right in order to read the contents of the page. The images you add to the page should be relevant and enhance the page. Too many images will make the page slower to load. Too much text and not enough supplemental images will make the contents of your page look uninteresting and bland.

There are a number of simple tricks that can enhance your web site for your visitors and make it easier to navigate and read. Lines can be employed to add borders around certain elements such as images, vertical and horizontal lines can be used to separate differing elements within the web page using a grid-like structure.

doncharisma-what-is-web-design-8-logo

You can also employ the use of shapes throughout the design of your web page in order to place emphasis on certain elements. Different shapes can be used to organize information throughout the web page. Textures such as soft, smooth, hard, and rough can be used to give your pages a tactile feel, separating backgrounds from the information provided on the page itself.


Conclusion

For the complete beginner, web design can seem like a headache and a big challenge to overcome. The good news is that you don’t need a degree in computer programing to be able to create a dynamic and powerful web presence. All you need is a clear idea of the purpose and direction that you want your web site to take. Research, careful planning, and an eye for what your visitors want are the key elements to making your web site a success. Giving consideration to the factors mentioned within this article means that you’re already halfway there.


DonCharisma.com-logo-4Designing and creating a web site may not be something that you have time to dedicate to personally. Our team at DonCharisma.com are experienced in all elements of web design and would be happy to assist you with your project.

Do contact us at http://DonCharisma.com/contact/ for further information.


© DonCharisma.org & DonCharisma.com 2014

BY HEATHER B. COSTA


Resources & Sources

Photos – MorgueFile


Notes for commenters:

Don Charisma Warning Improvised Writing

Comments are invited. BUT you are reminded that this is a public blog and you are also reminded to think before you press the “post comment” button. 

Good manners are a mark of a charismatic person – so please keep comments civil, non-argumentative, constructive and related, or they will be moderated. If you feel you can’t comply, press the “unfollow” button and/or refrain from commenting.

I read ALL comments but can’t always reply. I will comment if I think there’s something that I can add to what you’ve said. I do delete without notice comments that don’t follow rules above. For persistent offenders I will ignore you permanently and/or report you.

Most decent people already know how to behave respectfully. Thank you for your co-operation on the above.

Warm regards, Don Charisma



34 thoughts on “What Is Web Design?

  1. Insightful article Don! Every point you have written in this article of yours I agree with. Web design is important when it comes to internet marketing. Of course, you could not do internet marketing if you do not have a website, right? A website, for me, is something that should represent your business/company/product. It should as well be enticing, easy to navigate and could be accessed through different platforms (e.g. mobile, laptop, tablet or desktop PC). — http://www.siteabove.com

  2. Okay, Bravo! And can I say thanks for the tips Heather!
    Wow, I did not know all the key points for a web page. I feel ignorant, but not in a bad way. I just learned something new, hurrah! Not sure for my web pages out there, but will look at them again to see what can be tweeked/fixed/organized,
    .:-)

    1. I’m so happy to hear that you found the article useful! 🙂

      There are plenty more articles in the series to come which will hopefully prove to be just as useful and informative for you.

      Thanks for your kind words and support, they’re very much appreciated.

  3. Thanks for this wonderfully written article – was recently appointed to a team that is tasked with re-designing the organization website – many team members are not familiar with how badly you can shoot yourself in the foot, later, if you don’t take the time to plan well now – 🙂 – how timely to have a nifty article to share with them so I don’t have to reinvent the wheel by writing it all down! Thanks!
    🙂

    1. I’m so happy to hear that you enjoyed the article and that it will be useful to you. There will be more articles in the series that you’ll hopefully find just as interesting and informative 🙂

  4. Reblogged this on WorldwideFriends and commented:
    Sounded like anyone can do Web Design. An article by Don Charisma and Heather B. Costa that appeared on Doncharisma.org

    Thanks both for sharing.

  5. Well done. I’m a newbie to blogging and hope to put up my own site sometime in the future. You have clearly addressed the ground level info that someone of my limited experience needs to move forward. Thank You. And also thanks to Heather whose hand in this is greatly appreciated. (Every one needs a Heather.) 🙂 Oh, I found my way here from Belinda’s site – glad she reblogged it.

    1. Well then Paul you are in very good hands, you’re finding all the cool people on WordPress ! This is a very good introduction to web design, it’s VERY much worth paying attention to in detail. It gives an excellent high level overview of the concepts, a road map of what’s involved in web design. For me this is more important than the detail, which can be filled in at any time … The structure of a complex idea …

      😀

      Warm regards

      Don

    2. Hi Paul,

      I’m very happy to hear that you found the article both informative and useful; I’m also very happy to hear that you think everyone needs Heather, I may very well use that to market my professional skills in the future! 🙂

      Welcome to the WordPress community, I look forward to seeing your own blog 🙂

    1. Thanks so much for taking the time to read and comment on the article, I’m very happy to hear that you enjoyed it 🙂

      Also, thank you so much for reblogging; I hope you continue to enjoy what we’ve come up with.

  6. Good job – very useful introduction – perhaps could be a little bit enhanced by talking about user design? Or will that be later? May I reblog to mediakult.wordpress.com?

    Cheers
    Tracey

    1. Hey Tracy, thanks. And yes Heather and I are aware of this – making a blog post longer than a certain length doesn’t get it read by most people, so we’ve split what we’re doing into multiple posts. We’ve also included some pretty pictures for visual people like myself !

      You’re very welcome to reblog 😀

      Warm regards

      Don

      1. Thanks Don
        Great strategy – and yes you are correct – it is tricky getting people reading ‘below the fold’.

        I like visuals too 🙂

        Cheers
        Tracey

    2. Hi Tracey,

      Thank you so much for taking the time to read and comment on the article, I’m very happy to hear that you enjoyed it. As Don says, we’re planning a series of articles that will concentrate in different areas of web design, development etc. This article is to primarily serve as an introduction to web design as a whole before delving a little deeper into certain elements. We want to keep the articles to a certain length and cover topics over a number of shorter pieces rather than one very long one 🙂

      1. My pleasure Heather, I really enjoy reading useful information about online culture – i think many people get confused about what the difference is between a developer and designer and you articulate that well.

        Cheers
        Tracey

      2. Thank you, Tracey 🙂

        I completely agree that web design and development tend to get confused quite a bit and hopefully the articles we’re putting together will help make the definitions of both a little clearer. Once the foundations to both design and development have been laid we’ll then delve a little deeper into certain elements of each.

        Thanks for your support, it’s very much appreciated.

  7. Very informative and very well written too. Easy to understand and I could wish a lot of companies would use your informations. That would make the internet a more easy place to navigate.
    Thanks for sharing your good ideas and I hope you will gain some new customers here, not all have time or a creative enough to do this themselves. Good luck 😀

    1. Thanks Irene, I’m very happy to hear that you enjoyed the article, we have many more to come in the series and I hope that they will both informative and helpful to all our blogging friends out there.

      Your support is very much appreciated ❤

Leave a Reply for Don Charisma

Fill in your details below or click an icon to log in:

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