In this chapter you will learn about
● What is Web Design
● Principles of Web Designing
● The Lifecycle of a Web Design Project
● Different Ways of Building a Website
● Web Design for beginners
What is Web Design ?
Web design is a concept of planning, creating, and maintaining websites. The very process of using creative to design and construct a website and updating it regularly to incorporate changes is also referred to as web designing. Besides the creation and updating, this concept also involves taking care of the user interface, the architecture of information present, the layout, the colors, content,navigation ergonomics, as well as the designs of various icons. Some other areas in web design include search engine optimization, user experience designs, standardized codes, graphic design, as well as interface design.
Web designing is a process that can be done by anyone who has the right knowledge of the various disciplines involved but is usually best handled by professionals known as web designers. The term 'web design ' may also point to the visual aspect of a website but in truth it also overlaps with the process of web development in a broader sense. The process not only includes front end desining but also the process of writing the markup.
Principles of Web Designing:
Like the phrase 'beauty is the eye of the beholder ', effective web design is judged by the users of the website and not the website owners. There are many factors that affect the usability of a website, and it is not just about from (how good it looks), but also function (how easy is it to use).
Websites that are not well designed tend to perform poorly and have sub-optimal Google Analytics metrics (e.g. high bounce rates, low time on site, low pages per visit and low conversions). So what makes good web design? Below we explore the top 10 web design principles that will make your website aesthetically pleasing, easy to use , engaging and effective.
(1) PURPOSE:
Good web design always caters to the needs of the user. Are your web visitors looking for information, entertainment, some type of interaction, or to transact with your business? Each page of your website needs to have a clear purpose, and to fulfill a specific need for your website users in the most effective way possible.
(2) COMMUNICATION:
People on the web tend to want information quickly, so it is important to communicate clearly, and make your information easy to read and digest. Some effective tactics to include in your web design include organising information using headlines and sub headlines, using bullets instead of long windy sentences, and cutting the waffle.
(3) TYPEFACES:
In general, Sans serif fonts such as Arial and Verdana are easier to read online (Sans Serif fonts are contemporary looking fonts without decorative finishes). The ideal font size for reading easily online is 16px and stick to a maximum of 3 typefaces in a maximum of 3 point sizes to keep your design streamlined.
(4) COLOURS:
A well throught out colour platter can go a long way to enhance the user experience. Complementary colours for the text and background will make reading easier on the eye. Vibrant colors create emotion and should be used sparingly (e.g. for buttons and call to actions). Last but not least, white space/negative space is very effective at giving your website a modern and uncluttered look.
(5) IMAGES:
A picture can speak a thousand words, and chossing the right images for your website can help with brand positioning and connecting with your target audience. If you don't have high quality professional photos on hand, consider purchasing stock photos to lift the look of your website. Also consider using infographics, videos and graphics as these can be much more effective at communicating than even the most well written piece of text.
(6) NAVIGATION:
Navigation is about how easy it is for people to take action and move around your website. Some tactics for effective navigation include a logical page hierarchy, using bread crumbs, desining clickable buttons, and following the 'three click rule' which means users will be able to find the information they are looking for within three clicks.
(7) GRID BASED LAYOUTS:
Placing content randomly on your web page can end up with a haphazard appearance that is messy. Grid based layouts arrange content into sections, columns and boxes that line up and feel balanced, which leads to a better looking website design.
(8) "F" PATTERN DESIGN:
Eye tracking studies have identified that people scan computer screens in an "F" pattern. Most of what people see is in the top and left of the screen and the right side of the screen is rarely seen. Rather than trying to force the viewer 's visual flow, effectively designed websites will work with a reader's natural behavior and display information in order of importance (left to right, and top to bottom).
(9) LOAD TIMS :
Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimizing image sizes (size and scale), combining code into a center CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).
(10) MOBILE FRIENDLY:
It is now common place to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly. If your website is not mobile friendly, you can either rebuild it in a responsive layout this means your website will adjust to different screen widths or you can build a dedicated mobile site ( a separate website optimized specifically for mobile users).
The Lifecycle of a Web Design Project:
Big projects, small projects, e-commerce projects, social projects, every web design or development project, can benefit during each phase of the project life cycle, and in some way each phase will help with the success of the project.
There are many different phases to projects, and everyone involved needs to remember that every project is different. The two major key points to every project that I believe everyone needs to remember is that no project is the same, and that every project needs to have some degree of flexibility, as everyone involved will always learn and experience things along the way that may change a project to some degree.
Here are the phases that should be reviewed within each project Lifecycle. While the order and all the relevance of each phase will differ for each project, I believe that each phase is still important to each project.
Phase 1: Analysis / Specification :
This is the phase where are you and others get to think about all the great ideas for your website, and all the bad ideas as well.
The goal for this phase is to get an idea of what you want to achieve with the website.
Phase 2: Briefing / Quoting :
This phase is where ypu talk to developers and discuss the specifications and narrow it down to what you really want that fits within your budget. Try and get the brief and spec down to as fine a detail as possible, it will only help later down the track.
Phase 3: Content Writing :
You can start this phase earlier if you like or even later this phase is sort of flexible to a degree but we recommend writing the content before the design, as it just gives the designer that extra bit of information and understanding of what you are looking for from your site. It also gives them the ability to design around the content, rather than later just trying to put content into areas that have been designed.
Phase 4: Design:
This is where it can all start happening, and you actually start to see your site come together. Make sure thatvall information from all parties in this phase is communicated correctly and I also suggest giving the designer flexibility as they will probably throw something in there that will either knock your socks off, or be way off the mark, but if you don't give them flexibility then you will never know....
Phase 5: Implementation:
This phase will probably be the longest of the development phases, and if rushed could mean you don't have a website that is expandable or useful in the long term. Make sure you have your goals defined 100% at this point and that you are 100% happy with the design. It's always harder to go bavk and retro fit something than to build it right the first time round.
Phase 6: Content Loading:
This phase as I said before can be very important to your site, content is KING after all. Content should be designed into the site and not just loaded in, and if content is provided prior to the build this should already be happening.
Phase 7: Testing:
Test, Test, and Test again! It is always good to over test, and get additional parties to test or view from a different perspective, but remember when doing this not to stray from your original goals, ideas will be thrown up but not everything has to be done at once. It is better to have a live site that does your core goals well, than have a site in a never ending cycle of development.
Phase 8: Launch / Promotion:
It's D-Day everyone is stressed and wants to get the site live, my advice is don't rush it! Make sure- if it's replacing an old site, to go to a per-live version first so that yo can test on your live hosting and also just take your time, and if something does go wrong respond quickly. Even sites as big as Facebook and Twitter didn't work perfectly when they first came out but what they did do, was grow on the feedback of their users, so listen well and respond fast !
Phase 9: Growth and Development:
This comes bavk to what your users want and need. Listen to your users, review your stats and reports (if ypu don't have any get some, Google Analytics is FREE and easy to implement) and then gradually improve your site. Nit everything has to be done at once, but users will appreciate seeing your website grow !
Different Ways of Building a Website:
There are many different ways to make a website, hand coding is only one way and it is also the hardest. If you are new to websites and you just want to create your own websites for any reason, then I recommend NOT hand coding your website. Let's take a look at some of the ways to create a website without you having to know any type of coading at all.
Content Management System's:
Content Management system is usually shortened to CMS so from now on I will use CMS to save me typing it out every time. A CMS is web application that you can install onto your website that will basically handle the entire website for you. A good example of a CMS would be joomla is the most popular CMS available and it's free.
Blogging Software:
You have most likely seen a Blog, does the word WordPress mean anything to you? There are plenty of different Blogging applications out there but WordPress is by far the best and most popular. WordPress is pretty similar to Joomla but it's focused at Blogging, if you are unsure what a Blog is check out "Types of Websites ". Like a CMS WordPress runs your website for you all you do is install it then specify what you want it to do, you don't code anything, it's all point and click. You can learn more about WordPress, learn how to install and use it within the "Creating Section.
Website Builders:
Website Builders can vary slight from definition to definition but I think of a website builder as an application you can use to build a website (mainly from a point and click style). Website Builders usually don't require you to know any coding either, you simply pick out a template that you like and start adding stuff to the pages. Every time you create a new page it will simply reuse the template you selected. Whrn you are finished, most website Builders have a feature that will upload all the files for your website to your website hosting account for you.
Forums:
Like Blogging and CMS's foryms are simply a web application that you install to your website and everything is handled for you. I'm going to take it that everyone knows what a Forum is, if not check out "Types of Websites ". Once you have installed your Forum all you do is change the settings to mert your requirements and pick out a good template, it's that simple.
Hand Coding:
Hand coding a website is another way to make a website, yes it does give you the most control over your website out of all the ways of creating a website. However, it is also the hardest way to make a website and would involve a huge learning curve and take uo a lot of your time. In most situation you will be able to make your website without having to hand code any of it.
0 Comments