Get Started. It's Free
or sign up with your email address
WEB DESIGN by Mind Map: WEB DESIGN

1. Principles

1.1. Purpose

1.1.1. 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.

1.2. Communication

1.2.1. 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 bullet points instead of long windy sentences, and cutting the waffle.

1.3. Typefaces

1.3.1. In general, Sans Serif fonts such as Arial and Verdana are easier to read online. 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.

1.4. Colours

1.4.1. A well thought out colour palette can go a long way to enhance the user experience. Complementary colours create balance and harmony. Using contrasting colours for the text and background will make reading easier on the eye. Vibrant colours create emotion and should be used sparingly.

1.5. Images

1.5.1. A picture can speak a thousand words, and choosing the right images for your website can help with brand positioning and connecting with your target audience. 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.

1.6. Navigations

1.6.1. 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, designing 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.

1.7. Grid Based Outline

1.7.1. 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.

1.8. "F" Pattern Design

1.8.1. 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 behaviour and display information in order of importance.

1.9. Load Time

1.9.1. Everybody hates a website that takes ages to load. Tips to make page load times more effective include optimising image sizes (size and scale), combining code into a central CSS or JavaScript file (this reduces HTTP requests) and minify HTML, CSS, JavaScript (compressed to speed up their load time).

1.10. Mobile-Friendly

1.10.1. It is now commonplace to access websites from multiple devices with multiple screen sizes, so it is important to consider if your website is mobile friendly.

2. Elements

2.1. Colors

2.1.1. The site’s colors should convey your company’s personality or brand. Colors have a big emotional factor so it’s important to choose colors your audience will love.

2.2. Fonts

2.2.1. The site’s fonts should also be based on the company’s brand and the feeling you want to convey to customers. The fonts need to be easy to read.

2.3. Pictures & Graphics

2.3.1. Choose pictures and graphics that display your company and products in the best light possible. Hire a professional photographer if possible. Images speak volumes about your company and play a key role in your website’s look and feel

2.4. Complexity

2.4.1. Strive for simplicity in your design. Keep it simple, yet not so simple that it lacks appeal

2.5. Usability

2.5.1. Make sure the website’s design is user-friendly. The navigation needs to be straightforward and the design needs to be created based on how users will interact with the site.

2.6. Clarity

2.6.1. Make sure all images and graphics on the site are sharp.

2.7. Consistency

2.7.1. Keep the design of the site (colors, fonts, button styles, heading sizes, etc.) consistent throughout the site.

3. Web

3.1. A complex system of interconnected elements, especially one perceived as a trap or danger.

4. Design

4.1. A plan or drawing produced to show the look and function or workings of a building, garment, or other object it is built or made.

4.2. Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object.

5. Web Design

5.1. Web design encompasses many different skills and disciplines in the production and maintenance.

5.2. The term Web Design is normally used to describe the design process relating to the font-end (client side) design of a website including writing mark up.

6. Weebly

6.1. Popularity

6.1.1. Weebly was founded in 2007 and has over 40 million registered users.

6.1.2. They do not disclose how many of their users are paid users, making it challenging to have a direct comparison with Wix in this respect.

6.1.3. They are privately funded by very reputable investors that have funded other large companies as well.

6.2. Template Design

6.2.1. Weebly gives you over a hundred templates to choose.

6.2.2. Weebly gives you access to the template codes so you can customize it.

6.2.3. With Weebly, you can purchase external premium templates to import into your website.

6.2.4. Weebly started creating responsive templates, so your website will be mobile ready.

6.3. Ease of Use

6.3.1. Weebly is one of the easiest website builders to use.

6.3.2. Their templates have designated drag & drop zones.

6.3.3. This may potentially give you some creative limitations as to where you want to insert content.

6.4. Website Building tools

6.4.1. Weebly has fewer tools available than Wix.

6.4.2. You won’t get as many styling options as Wix, but if you know a bit of code .

6.5. Support System

6.5.1. Weebly provides you with phone and email support.

6.5.2. As mentioned, Weebly is one of the easiest website builders available today.

6.6. Exporting your Website

6.6.1. Weebly does allow you to export a website into HTML / CSS codes.

6.7. Advertisement

6.7.1. If you use the free version of Weebly, they will insert an advertisement across the bottom of your website.

6.8. Pricing

6.8.1. Weebly offers you 4 premium plans.

6.8.2. Similar to Wix, Weebly also gives you a free custom domain name for 1 year.

7. Wix

7.1. Popularity

7.1.1. Wix was founded in 2006 and has over 109 million registered users.

7.1.2. They have over 2.87 million paying customers as at the end of December 2016.

7.1.3. There are over a million people continuously paying Wix for their services .

7.1.4. Paid users for Wix has a year-over-year growth of 41%.

7.2. Template Design

7.2.1. Wix provides you with over 510 professionally designed templates.

7.2.2. Wix templates come pre-populated with content in placeholders.

7.2.3. One drawback of using Wix is that once you pick a template and insert your content.

7.2.4. Wix has a good mobile editor as well.

7.3. Ease of Use

7.3.1. Wix is a “pure” drag & drop website builder.

7.3.2. They give you the freedom to insert content literally anywhere on the website.

7.3.3. Wix’s templates do not restrict you to only being able to insert content in designated areas.

7.4. Website Building tools

7.4.1. Wix gives you a lot more styling control / options over their content elements.

7.4.2. Change how their elements function, you have a lot more styling control over them when compared to Weebly.

7.4.3. Wix also gives you a lot more tools than Weebly.

7.4.4. Wix also has an App Market if you want even more advanced tools to bolt on to your website.

7.5. Support System

7.5.1. Wix offers you email and phone support.

7.5.2. They also have a very comprehensive Help Center that provides both text and video tutorials.

7.5.3. Wix also has a community forum where you can search for answers to a lot of commons questions asked by other Wix user.

7.6. Exporting your Website

7.6.1. One of the drawbacks of using Wix is that you won’t be able to export your entire website.

7.7. Advertisement

7.7.1. If you use the free or the lowest paid plan with Wix, there will be visible Wix advertisements at the top and bottom of your website.

7.8. Pricing

7.8.1. Wix offers you 5 premium plans.

7.8.2. Wix will give you a free custom domain name for 1 year.