The Four Key Components Of A Great Web Design

Coolest 25+ Web Design Trends In 2021, that'll rock the world😎 | by  ThemeSelection | Quick Code | Medium

There’s a lot that goes into creating a web design, but I believe it can be broken down into four main components. If you’re able to execute on all four, you will have a hit web design on your hands. However, if you come up short on one, the entire design will suffer. That’s the challenge. All aspects of a great design must complement each other while helping achieve the end goals of the website. In this article, I’ve broken down the four key components of a great web design with examples and resources.

1. A Solid Layout

The importance of having a good foundation applies to just about everything in life. If the foundation is wrong, everything that is put on top of it will probably fail. In web design, the foundation is your layout. Laying out a web design involves placing all the content and navigational elements. You want to establish a hierarchy in these elements that gives the most important one’s prominence, and this should be determined by how you think your audience will use the site.

Use Wireframes

A common practice by web designers to nail down a layout is to create a wireframe, which is basically a bare-bones representation of the various elements that will appear on the page. Wireframes are typically made up of grayscale boxes and blocks of placeholder text. The key is to keep things simple and not get caught up in color and design elements.

Jesse Bennett-Chamberlain of 31Three is great about posting his design processes on his blog. Here is an example wireframe he created for the Embrace Pet Community project.

Be Generous With Whitespace

One key aspect of a great layout is more about what’s in between (or rather not in between) your various page elements. I’m talking about whitespace or negative space. Many designers make the mistake of over crowding their web designs. Don’t be afraid to let your pages breathe. Adding larger amounts of whitespace will actually give your design a more sophisticated look.

With so much going on in the layout of The Swish LifeLiam McKay realized how important it was to use wide margins around the content to give this design an open and airy feel while making it easy to skim over all of the text. Notice how much empty space is around the blocks of content. This makes it easier for the user to focus in on what’s important.

Mutant Labs is another great example of good use of whitespace. It gives this dark design an open feel and lets the subtle chalkboard texture and doodles room to show through.

Learn More About Layout And Wireframes

Wireframes Magazine is a blog written by information architects and interaction designers that has lots of info and examples of layouts and wireframing.

2. Effective Typography

Just like layout, typography plays an important role in how a user digests the content of a website. It’s important for a web design’s typography to be easy to read and follow while establishing structure and hierarchy within the content.

Big = Important

31Three uses all caps and a large font size for the titles and subtitles. This establishes a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.

Make It Legible

By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs. Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size.

Learn More About Typography

If you want to learn more about typography, we’ve compiled a list of great sites about the subject, and we’ve also go a list of tools to help you with typography on the web.

3. The Right Color Scheme

How to Choose the Right Color Scheme for Your Blog

Choosing the right color scheme is extremely important, because it will set the mood of your design more so than any other component. Don’t let your own personal taste determine what colors you use. That should be based on what’s trying to be achieved with the site and what you know about it’s audience.

Dare To Be Different

The Gap Medics site features a bold choice of colors that goes against everything we are used to seeing on medical related sites. It’s appropriate since the site is trying to attract young medical students. The colors help give the site a young hip feel that softens the seriousness of the subject matter.

Sometimes Little Color Is The Right Color

Carsonified basically only uses two colors. The dark brown and a creamy white compliment the vintage poster style and design elements. Sometimes a minimal color palette is all you need.

Need Help Choosing The Right Color Scheme?

Adobe’s Kuler is a community-driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders. There are also other tools to help you choose the right colors.

4. Appropriate Design Elements

What Makes Good Design?: Basic Elements and Principles

This is where you can have a lot of fun with a design. Your creativity can go wild here with texture, icons, patterns, etc. However, keep in …

The web design process in 7 simple steps

In order to design, build, and launch your website, it’s important to follow these steps:

1. Goal identification

tom cruise help me help you gif
The initial stage is all about understanding how you can help your client.

In this initial stage, the designer needs to identify the end goal of the website design, usually in close collaboration with the client or other stakeholders. Questions to explore and answer in this stage of the design and website development process include:

  • Who is the site for?
  • What do they expect to find or do there?
  • Is this website’s primary aim to inform, to sell (ecommerce, anyone?), or to amuse?
  • Does the website need to clearly convey a brand’s core message, or is it part of a wider branding strategy with its own unique focus?
  • What competitor sites, if any, exist, and how should this site be inspired by/different than, those competitors?

This is the most important part of any web development process. If these questions aren’t all clearly answered in the brief, the whole project can set off in the wrong direction.

It may be useful to write out one or more clearly identified goals, or a one-paragraph summary of the expected aims. This will help to put the design on the right path. Make sure you understand the website’s target audience, and develop a working knowledge of the competition.

For more on this design phase, check out “The modern web design process: setting goals.”

Tools for website goal identification stage

  • Audience personas
  • Creative brief
  • Competitor analyses
  • Brand attributes

2. Scope definition

One of the most common and difficult problems plaguing web design projects is scope creep. The client sets out with one goal in mind, but this gradually expands, evolves, or changes altogether during the design process — and the next thing you know, you’re not only designing and building a website, but also a web app, emails, and push notifications.

This isn’t necessarily a problem for designers, as it can often lead to more work. But if the increased expectations aren’t matched by an increase in budget or timeline, the project can rapidly become utterly unrealistic.

gantt chart
The anatomy of a Gantt chart.

A Gantt chart, which details a realistic timeline for the project, including any major landmarks, can help to set boundaries and achievable deadlines. This provides an invaluable reference for both designers and clients and helps keep everyone focused on the task and goals at hand.

Tools for scope definition

  • A contract
  • Gantt chart (or other timeline visualization)

3. Sitemap and wireframe creation

simple sitemap
A sitemap for a simple website. Note how it captures page hierarchy.

The sitemap provides the foundation for any well-designed website. It helps give web designers a clear idea of the website’s information architecture and explains the relationships between the various pages and content elements.

Building a site without a sitemap is like building a house without a blueprint. And that rarely turns out well.

The next step is to find some design inspiration and build a mockup of the wireframe. Wireframes provide a framework for storing the site’s visual design and content elements, and can help identify potential challenges and gaps with the sitemap.

vireflow wireframe kit
Anton Balistsky built a Webflow wireframing kit you can clone for free.

Although a wireframe doesn’t contain any final design elements, it does act as a guide for how the site will ultimately look. It can also act as inspiration for the formatting of various elements. Some designers use slick tools like Balsamiq or Webflow to create their wireframes. I personally like to go back to basics and use the trusty ole paper and pencil.

Tools for sitemapping and wireframing

  • Pen/pencil and paper
  • Balsamiq
  • Moqups
  • Sketch
  • Axure
  • Webflow
  • Slickplan
  • Writemaps
  • Mindnode

Design interactions and animations without code

Build complex interactions and animations without even looking at code.Start animating

Start animating

4. Content creation

seo and content google trends
When it comes to content, SEO is only half the battle.

Once your website’s framework is in place, you can start with the most important aspect of the site: the written content.

Content serves two essential purposes:

Purpose 1. Content drives engagement and action

First, content engages readers and drives them to take the actions necessary to fulfill a site’s goals. This is affected by both the content itself (the writing), and how it’s presented (the typography and structural elements).

Dull, lifeless, and overlong prose rarely keeps visitors’ attention for long. Short, snappy, and intriguing content grabs them and gets them to click through to other pages. Even if your pages need a lot of content — and often, they do — properly “chunking” that content by breaking it up into short paragraphs supplemented by visuals can help it keep a light, engaging feel.

Purpose 2: SEO

Content also boosts a site’s visibility for search engines. The practice of creating and improving content to rank well in search is known as search engine optimization or SEO.

Getting your keywords and key phrases right is essential for the success of any website. I always use Google Keyword Planner. This tool shows the search volume for potential target keywords and phrases, so you can hone in on what actual human beings are searching on the web. While search engines are becoming more and more clever, so should your content strategies. Google Trends is also handy for identifying terms people actually use when they search.

My design process focuses on designing …

Skills Every Successful Web Designer Needs — And How To Learn Them

10 Things Every Modern Web Developer Must Know

If you’re a beginner in tech, it can be tough to figure out where to start. There are so many paths available to you — from web development to web design to digital marketing, and every specialization under the sun. Web design is often a great place to dive in if you’re new to the scene, but the question is: how to become a web designer?

Like many roles in tech, becoming a web designer requires both the creative and analytical sides of your mind. Web design is a versatile career with lots of opportunities to niche down or course-correct once you discover exactly what you love.

📌 Related: What is the Difference Between a Web Designer and a Web Developer?

What skills do you need if you want to become a successful web designer? In this article, we’ll cover the essential skills you need to know to get hired as a web designer, plus the soft skills that will help set you apart.

How to Learn Web Design: What Are The Tech Skills You Need to Know to Become a Web Designer?

First, let’s go over the technical side of becoming a web designer.

1. VISUAL DESIGN

It might seem obvious that you need design knowledge to be a web designer, but what exactly does that mean? Well, web design is actually a subset of the larger field of visual design, so it makes sense to start there.

At Skillcrush, we teach visual design because it focuses on digital products and sets you up to succeed across design careers, including web design. When you learn visual design, you learn the fundamental design principles you need to be a web designer.

📌 Related: What is Visual Design? Graphic Design, UI Design, Web Design — What’s the Difference?

Design principles are what determine the look and feel of a site, and are one of the most important concepts for web designers to know. They can range from proportions, to typography, to grid systems, to color theory. Learning visual design means creating mood boards and type hierarchy and experimenting with web fonts and color palettes.

2. UX

UX stands for user experience, or how people feel (calm, frustrated, etc.) when they use a website. Above all else, UX design is about approaching your designs from a user-friendly and user-first perspective — how can you produce a website design that helps them get exactly what they need?

To do that, you’ll research your users and create “personas” (profiles of imaginary ideal users). You’ll lay out the pages and content with a site map. You’ll figure out the path users take on your site in user flows. For example, do they always click straight through to social media? Or are they just looking for contact information? You’ll use responsive design to account for different screen sizes and improve functionality for all users, regardless of device.

As a UX designer, you’ll build wireframes and use prototyping and templates to sketch out the key parts of each webpage, including the user interface. All of these components are essential to practicing user experience design.

3. GRAPHIC DESIGN AND WEB DESIGN SOFTWARE

Like any craftsperson, as a web designer, to do your work, you need the right tools. Knowing your way around web design and graphic design industry standards will be helpful in every case and critical in many. While designing a website can be done right in a web browser, tools like Adobe Photoshop, Adobe Illustrator, and Sketch are used in graphic design and web design for important job functions: creating mockups, designing assets (think logos and images), and of course, modifying and enhancing photos.

You should learn how to use them (although, if you’re just getting started, consider trying out a few free Adobe Photoshop alternatives instead).

4. HTML

Wait, to become a web designer, do you need to know how to code? You might not have imagined that web designers would need to know any code, but some amount of technical skills is necessary — a little familiarity with HTML and CSS is expected for most design jobs nowadays. HTML stands for HyperText Markup Language, which is the programming language used to put content on a web page and give it structure on the front end. That means it’s how you turn a bunch of words into headlines, paragraphs, and footers. And it’s also how you get the “cool” content like photos, videos, and graphics on a website.

5. CSS

And then there’s HTML’s partner, CSS or Cascading Style Sheets. CSS is a coding language that tells browsers how to format and style HTML for a web page. In other words, it’s what makes all the text and other content look good and have a design. With CSS, you can adjust the colors, change the fonts, or add a stunning background — and so much more! This is where your eye for design really shines and how you can put your creative stamp on every site you create.

Pro tip: If you want to start learning web design for free, HTML & CSS are great skills to start with. We’ve got our free coding camp if you’re ready right here and now. Otherwise, take a look at our roundup of free resources for learning to code.

📌 Related: These Are the Jobs You Can Get with Just HTML and CSS

BONUS! JAVASCRIPT

While …

Bonded Rescues: Two Years Later

Our bonded rescues, Bud Abbott and Lou Costello, still depend on each other as brothers. Though they are growing into different cats.

The invisible cord of their partnership remains strong. They can’t be separated for more than a matter of hours. Then they will seek to reunite.

bonded rescues

In the picture above, I watched one of my favorite things they do. Road work was going on outside the window, with the added novelty of a beeping truck. Lou and Bud alternated looking out the window, then facing each other for a Cat Conference.

Bud was sitting close for the best view. I tried not to laugh out loud at the antics his ears were doing as he watched the activity below. It wasn’t always the radar dish tilting of finding the source of a sound.

It alternated with expressions of surprise and confusion. I explain how their ears are part of their facial expression in The Gears of Their Ears.

Lou seemed to be taking in what Bud was “saying.” So they were both getting the benefit of Bud’s observations. This obvious teamwork had been the first thing I noticed about them, as I describe in Welcome, MC Hammer and Fresh Prince!

true partnership

In my previous post, Burden of Leadership, it would seem that Lou Costello brings a lot to our Civilization. Which he does. What about Bud Abbott?

For one thing, he’s good for Lou. Where did Lou get all that social savvy from? Likely from those intense early connections between himself and his brother. When I consider this, I realize Lou actually isn’t working alone. It might be his skill at this role, even as a teen cat, is how he has Bud in his corner.

I rescued them, for their fourth and final time, as a package deal. Because I wanted them to stay together.

targeting a need

Bud can be a source of conflict, as I detail in The Alpha Brain Challenge. But while he exasperates Rhiannon, who has plenty of Fortitude, he’s become a sweet big brother to Morgen. Which is helping him recognize how he can improve his relationship with Rhia.

Bud is also a happy team player in the important work of wearing out baby Morgen. At six months old, she’s surfing a growth spurt that gives her considerable energy. Bud and Lou wear her out, while wearing themselves out, too.

This leaves Rhiannon and Tristan free to explore their own friendship and makes Bud less obnoxious about playing with her. Lately, he will let her play her favorite laser game without interrupting.

big brother

This Bud contribution is important to Mr. WayofCats. He found Morgen’s need for play to be more than he can handle when his sleep is disrupted. At such times, I let her romp in Kitten Country.

This is when I notice Bud and Morgen’s friendship the most. He won’t come in until she has made her way all the way up the stairs. She likes to sleep at the top of the little cat tree, and he has chosen a middle shelf on the big cat tree, so he can easily keep an eye on her.

Bud’s swiftness makes him a favorite target when she wants to play chase. They share the love of ambush. Bud is happy to be “surprised” by her.

getting there

I always felt Bud would improve with maturation. Of course, as a cat far out on the Alpha end of the Cat Type Distribution curve, that might take a while. Alphas stay kittens the longest.

The shift in activities has been good for him. He gets worn out faster and sooner with Morgen’s help. This leaves less of that restless energy that drives him to annoy.

There have been instances of Lou scolding Bud, which has never happened before. I think Lou sees Bud getting into trouble, and is trying to get through to him. He’s probably the best one to do so.

So, on many fronts, Bud is making advancements.

different pursuits

Compared to when they were kittens, they might seem to spend more time apart. Instead of sleeping together on one cat shelf, they have a tendency to pick different spots in the room. Lou has patrol responsibilities. Bud hangs near Morgen when she is upstairs.

But while they are not always together like they used to be, they have increased the intensity of the time they do spend together. When Lou is on patrol, Bud does not always accompany him. But he will wait at the threshold for his return.

More and more, I find Bud sleeping near Tristan and Rhiannon. I guess they have decided he is “good when he’s sleeping.” That’s another encouraging sign.

bonded pair pluses

Adopting two cats who already get along is a real advantage. From Introductions to lack of loneliness, two friends are a gift that keeps on giving.

This is why rescue organizations are trying, more than ever, to keep bonded pairs together. It’s a classic case of Cat Math.

When it comes to multiple cats, it’s not about the numbers. It’s about the variables.

11 Important Qualities That Every Good Web Designer Possesses

How to Become a Web Designer: Your Go-to Guide to Kick-start Your Career

A company website is one of the most important tools that businesses can use to promote their products and services and even make sales. Even if your website is not meant for business purposes, it is important for it to be easy and engaging for your online visitors to use. Choosing the right web designer is a major investment for your business. These qualities will help you make the right choice.

Industry experience

good web designer should have experience designing websites for clients in the industry you are dealing with. This is an assurance that the professional is familiar with your type of industry and will help you get the best website for your business. Even though the experience will vary from one web designer to another, even one who has handled one project with a company like yours, then he/she has a hint of what your business entails. While web designers who do not have an understanding of your industry can help you design your website, the planning will take longer, with lots of editing to be done during the process.

Knowledge, techniques, and strategies

Irrespective of the designer that you hire, it is crucial to know about their knowledge level, the techniques, and overall strategy they use when creating a website. If a web design expert has difficulty explaining any of these qualities, then you will definitely have a difficult time working with them. The best professionals will know what they are doing and they will be ready to tell you what they know, how they work, and the methods they will use to improve your website.

Expansive portfolio

Hiring web designers who are just starting up is okay. However, it is also a gamble. New designers may be talented; however, they do not have experience or a track record. Experienced professionals will have a detailed portfolio to showcase their past projects. With this, you are able to get a collection of different website links to showcase the expertise of the designer. These work samples can also help you choose a design that suits your business.

Competitive pricing

You should consider how much a web designer charges for their website design services. This is important because the cost of designing a website varies greatly depending on a number of factors, such as location. To find the best price, you should set a budget before you begin looking for the best designers. With a set budget, you will be able to narrow down on web designers that you can afford.

A clear and organized development process

Excellent designers have created countless websites over time. As a result, they have developed clear processes that they have constantly refined with time. They can easily see any pitfalls or mistakes and take the necessary steps to avoid them. Since they have handled several websites in the past, they will give you an estimate of the time they will need to finish building your website. Their website development process must be available and well documented for you to analyze.

Variety of services

Apart from creating websites, most web design companies will offer additional services. Some companies will have employees who offer content creation, SEO, social media campaigns, and much more. All these services complement the needs of your newly created website. With a company that you can rely on whenever you need these services, you will not have to hire another company after your website has been created.

Good communicators

Expert website designers will take their time to explain web technologies and terminology in simple terms for clients to understand. They will not assume that you understand this complicated jargon. If a professional is unable to communicate intricate concepts and terms to you, they will not be able to communicate your company’s message. Be sure to get expert designers who are excellent communicators.

Well-versed web technologies and internet

Top 6 Basic Elements of Web Design - DreamHost

Excellent web designers are proficient and knowledgeable about web designing tools and web technologies. Such professionals are active participants in seminars, online groups, forums, and webinars. This helps them to boost their knowledge and continuously upgrade their skills because they get to interact with other designers and learn from them.

Reasonable contract

Before a website designer starts working on your project, you will be required to sign an agreement. It is crucial that you carefully read this contract before signing on the dotted line. If you have a problem interpreting the contract terms and conditions, you can have a lawyer check it out to ensure that your interests are protected. A contract is important, especially when the website is not designed to your exact specifications.

Flexibility

Irrespective of the programming language that you major in, the fact is that the code is usually unpredictable. Web designers should have the flexibility to alter the scope or contexts of a project. Web designers should be able and eager to adapt and deal with problems as they arise. Different businesses or individuals will have different needs and wants when they need a website. A good designer should be able to meet the different needs of different clients with ease.

Set and meet deadlines

WildWeb, Website Design Durban, Social Media Marketing, Web Application  Development

You want a designer who will tell you the time they need to create your website and make sure that they meet the set deadlines. However, the project can take a longer time than stated and this makes everyone involved in it frustrated. Good …

10 Top Principles of Effective Web Design

Top 10 Principles of Effective Web Design | by Company Website Design |  Medium

Like the phrase ‘beauty is in 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 form (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.

Elements of an Effective Web Design & How it Effects Performance

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 bullet points 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 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 (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 choosing 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, 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.

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 behaviour and display information in order of importance (left to right, and top to bottom). 

9. Load time

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

10: Mobile friendly

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. 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 optimised specifically for mobile users).  It is easy to create a beautiful and functional website, simply by keeping these design elements in mind. Have you got a website design that needs reviewing or optimising? Or perhaps, you are planning a website and you are looking to get the design right from the ground up. Either way, these principles of effective web design can help your website be more engaging, useful, and memorable for visitors.

What are you waiting for? Contact us for more information.…

10 Principles of Good Web Design

Good web design involves more than an aesthetically pleasing appearance.

In fact, a range of professionals with different areas of expertise is engaged in each major decision – when it is done right. We have outlined the 10 basic principles of good web design to address what we consider to be the most critical points in creating a site that brings in high numbers of conversions.

1. Less is More – Simplicity Rules

Simple web design in Austin, TX

Many sites are over-designed, with too many elements on the page, distracting visitors from the purpose of the site. In effective web design, simplicity rules. Not only does a clean, fresh design make the site easier to navigate, but the aesthetics are more appealing and will stand the test of time. It is unnecessary, as well as distracting, to load a site with design features that don’t serve a purpose. What is the purpose of your company website? To direct new business directly into the lap of your enterprise, in volume, keep your design simple so your users can find their way naturally and easily.

2. Innovative but Not Distracting

Use whitespace for better design and user experience

An impressive design involves creativity and natural talent. Professionals in the design industry understand how to use whitespace. Whitespace, or negative space, is the area of the page that is “empty,” found between graphic elements, images, and text. An innovative use of design elements and whitespace creates a less distracting, more appealing design, and guides visitors where you want them to go. Consider the iconic logos of Apple and Google — unforgettable. Simple, clean design, surrounded by whitespace makes a website more effective. Cheaper, lower quality products often have busy, noisy, ad-oriented designs, and website visitors automatically consider a distracting site to be promoting a lower quality product.

3. Aesthetically Appealing – To the RIGHT Users

You have a specific market segment that is your target customer (or client). The design must be crafted explicitly to appeal to that niche. Research into buyer habits can reveal the type of image, colors, and other design features that are appealing to those you want to reach. Each “buyer persona” has specific likes and dislikes, and research into likes/dislikes are essential. High numbers of site visitors are useless if they are not those who will eventually convert — and buy.

4. Respectful, Honest, and Engaging

Social media has had a significant impact upon communication, both written and spoken. Visitors want to be engaged in a very “human” way. Even the largest multinational corporations have been forced to put a human face on what they do. Every word, phrase, and headline must be respectful of the user, honest, and have some engaging quality that makes it intriguing. As an example, “put your roof to work” would be more likely to get a response than “find a solar installer.” The basic concept is that people want honesty, and appreciate it. Your company may participate in various charity events, or donate time to causes you care about – let them know who you are. Become real.

5. Designed for Usability and Functionality

In website design, usability and functionality must drive each decision – outstripping any other design consideration. To achieve a clear, easy, and ultimately, direct path to conversions, both design and technical issues come into play. Every link must function fast, and every button and call to action must be positioned correctly, demanding as little effort as possible for the visitor to move forward to the next step.

6. Cohesive in Design, Down to the Details

Your enterprise has a unique personality, as an entity. That personality is demonstrated in your service, your history, how you conceive of your mission, and by the actions of every member of your team. Communicating the unique qualities of your business through design involves making every element, down to the details, a reflection of that personality. There are no minor details in a design – every piece must fit together seamlessly, and create a cohesive appearance that serves to support the appeal of your brand.

7. Easily Understood

Web design with clear communication

Site visitors must be able to easily understand every word, phrase, and headline without any confusion. One unusual or less commonly used word or phrase will drive them off. Industry-specific terms that are not in common usage will hinder your appeal. Dense, complex content won’t work. Calls to action that are unclear or hard to find will be skipped – and you have one more lost customer. All site content and each visual element must be laid out clearly and cleanly, with all critical conversion points visible above the fold (not requiring scrolling to find). Any deviation merely creates a barrier to conversion.

8. Design Elements Inspire Users to go Deep

Your homepage must have an initial appeal in design and usability. Every design feature is then developed with the specific purpose to inspire the visitor to find out more – and go deeper into your site, and in the end, convert and become a customer. It takes rare skills to achieve this purpose, as well as experience and insight into user behaviors. Nothing should be left to chance – your design should naturally lead them to where you want them to go.

9. Visual Elements Placed to Focus User Attention

The exact placement of visual elements is a major factor in a successful web design. All design features create an open, inviting path to conversions. Design elements can be explicit, such as arrows, or very subtle. …

9 PRINCIPLES OF GOOD WEB DESIGN

PRINCIPLES OF GOOD WEBSITE DESIGN

An effective website design should fulfill its intended function by conveying its particular message whilst simultaneously engaging the visitor. Several factors such as consistency, colours, typography, imagery, simplicity and functionality all contribute to good website design.

When designing a website there are many key factors that will contribute to how it is perceived. A well designed website can help build trust and guide visitors to take action. Creating a great user experience involves making sure your website design is optimised for usability (form and aesthetics) and how it easy is it to use (functionality).

Below are some guidelines that will help you when considering your next web project.

Principles of good web design by Feelingpeaky
Principles of good web design by Feelingpeaky

1. WEBSITE PURPOSE

Your website needs to accommodate the needs of the user. Having a simple clear intention on all pages will help the user interact with what you have to offer. What is the purpose of your website? Are you imparting practical information like a ‘How to guide’? Is it an entertainment website like sports coverage or are you selling a product to the user? There are many different purposes that websites may have but there are core purposes common to all websites;

  1. Describing Expertise
  2. Building Your Reputation
  3. Generating Leads
  4. Sales and After Care

2. SIMPLICITY

Simplicity is the best way to go when considering the user experience and the usability of your website. Below are ways to achieve simplicity through design.

Colour

Colour has the power to communicate messages and evoke emotional responses. Finding a colour palette that fits your brand will allow you to influence your customer’s behaviour towards your brand. Keep the colour selection limited to less than 5 colours. Complementary colours work very well. Pleasing colour combinations increase customer engagement and make the user feel good.

Type

Typography has an important role to play on your website. It commands attention and works as the visual interpretation of the brands voice. Typefaces should be legible and only use a maximum of 3 different fonts on the website.

Imagery

Imagery is every visual aspect used within communications. This includes still photography, illustration, video and all forms of graphics. All imagery should be expressive and capture the spirit of the company and act as the embodiment of their brand personality. Most of the initial information we consume on websites is visual and as a first impression it is important that high quality images are used to form an impression of professionalism and credibility in the visitors mind.

3. NAVIGATION

Navigation is the way finding system used on websites where visitors interact and find what they are looking for. Website navigation is key to retaining visitors. If the websites navigation is confusing visitors will give up and find what they need elsewhere. Keeping navigation simple, intuitive and consistent on every page is key.

Principles of good web design by Feelingpeaky
F-Shaped layout - digital design by Feelingpeaky Ltf

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a website. Eye tracking studies have found that most of what people see is in the top and left area of the screen. The F’ shaped layout mimics our natural pattern of reading in the West (left to right and top to bottom). An effective designed website will work with a readers natural pattern of scanning the page.

5. VISUAL HIERARCHY

Visual hierarchy is the arrangement of elements is order of importance. This is done either by size, colour, imagery, contrast, typographically, whitespace, texture and style. One of the most important functions of visual hierarchy is to establish a focal point; this shows visitors where the most important information is.

Principles of good web design by Feelingpeaky
Principles of good web design by Feelingpeaky

6. CONTENT

An effective web design has both great design and great content. Using compelling language great content can attract and influence visitors by converting them into customers.

7. GRID BASED LAYOUT

Grids help to structure your design and keep your content organised. The grid helps to align elements on the page and keep it clean. The grid based layout arranges content into a clean rigid grid structure with columns, sections that line up and feel balanced and impose order and results in an aesthetically pleasing website.

Principles of good web design by Feelingpeaky
Importance of load time by Feelingpeaky Ltd

8. LOAD TIME

Waiting for a website to load will lose visitors. Nearly half of web visitors expect a site to load in 2 seconds or less and they will potentially leave a site that isn’t loaded within 3 seconds. Optimising image sizes will help load your site faster.

9. MOBILE FRIENDLY

More people are using their phones or other devices to browse the web. It is important to consider building your website with a responsive layout where your website can adjust to different screens.

Principles of good web design by Feelingpeaky

Our team will breathe life into your website and tell your story We are a ‘family’ team of creative practitioners in the areas of design, marcoms and technology. Get in touch to find out more.…

25 inspiring examples of industrial design

Whether it’s a mobile phone, a vacuum cleaner or a chair, the very best examples of industrial design seamlessly blend form and function to make products truly desirable.

As its name implies, this discipline is about all balancing creative, conceptual, freeform thinking with the practical, industrial constraints of actually getting something made, which requires knowledge of production processes, materials and technology.

Over the years, some designers’ mastery of this crucial balance has elevated them to iconic status – and we’ve featured some of the fruits of their labour here. We all know how product design by the likes of Jonathan Ive, James Dyson or Charles Eames look and work. Chances are you already own one, or at least want one.

But we’ve also included some great industrial designs that you may not already have seen – some of which are on the market, while some are still at a concept stage. So whether you’re a consumer hungry for the latest stylish gadget to kit out your apartment, or a designer yourself looking for inspiration, read on…

01. Mini Cooper

The original Mini influenced a generation of car designers

The original Mini influenced a generation of car designers

The Mini is a design classic that came about because of restrictions in fuel supply during the 1950s caused by the Suez crisis. Designer Alec Issigonis was tasked with designing a car that was more frugal than the large cars of the day, aiming to compete with increasingly popular German bubble cars like the original VW Beetle – itself a design classic. The original design became a true British icon, influencing a generation of car designers, and was revolutionary at the time. Its distinctively diminutive contours remain hugely popular today.

02. Coke Contour Bottle

Coke's bottle needed to be distinctive and instantly recognisable - even in the dark

Coke’s bottle needed to be distinctive and instantly recognisable – even in the dark

Instantly recognisable, the Coca-Cola contour bottle is a masterpiece in industrial design that dates back to 1915 when the Coca-Cola Company asked its bottle suppliers to design a new bottle that would be distinctive and instantly recognisable – even in the dark. Designer Earl R. Dean took up the challenge, and following instructions issued by his boss, aimed to come up with a design based on the ingredients of the drink. Unable to find any reference images for either the coca leaf, or the Kola nut, Dean instead used an image of a cocoa pod from his encyclopedia as inspiration, leading to the iconic ribbed bottle shape we know and love today.

03. Piaggio Vespa Scooter

The Vespa is a globally recognised icon of the Italian design aesthetic

The Vespa is a globally recognised icon of the Italian design aesthetic

The classic Vespa scooter design is associated heavily with the Italian design aesthetic, but it was actually heavily influenced by pre-World-War-II Cushman scooters made in the US and shipped to Italy by the Allies to act as field transport for paratroopers and marines during the war. It wasn’t until Paggio involved aeronautical engineer Corradino D’Ascanio that the now familiar scooter shape, missing the central supporting spar and allowing the rider to step through the bike to get on and off.

04. Hasselblad 500C Camera

Hasselblad's 500C Camera was its anchor product for four decades

Hasselblad’s 500C Camera was its anchor product for four decades

During World War II the Swedish government tasked Victor Hasselblad with designing a camera that mirrored a German aerial surveillance camera recovered from a downed plane. This camera was refined over the following years, eventually spawning the iconic 500C in the late 1950s. Such was the popularity of the camera, it became the anchor product for the Hasselblad company for the next four decades, and was used by NASA during the Apollo missions to the moon.

05. Alessi Juicy Salif

Phillipe Starck's design is abstract yet functional

Phillipe Starck’s design is abstract yet functional

Designed by Phillipe Starck in 1990, the Juicy Salif is rightly counted amongst the icons of industrial design and has been exhibited in the Museum of Modern Art in New York. The citrus squeezer is cast in aluminium which is then polished, the design based on the shape of a squid and according to an account from the founder of Alessi was originally sketched out by Starck on a napkin while eating squid with lemon squeezed over it. It’s a perfect example of how the most abstract associations can inspire iconic design.

06. Edge of Belgravia Knife

Industrial design

Christian Bird’s futuristic design is a work of art as well as a superior tool

How often does a knife get included in the D&AD Annual? UK designer Christian Bird created a perfectly balanced industrial design that weighs up a sleek ceramic blade that never needs sharpening with an angular, soft touch handle. A work of art as well as a precision cutting tool, each knife is available in a limited edition run of 999.

07. Rocking Wheel Chair

Industrial design

This chair remains a conceptual design – we can wait to see the finished product

German industrial designer and concept artist’s Mathias Koehler’s fresh, bold take on the staple favourite of knitting grandmothers the world over curls round into a sleek, circular shape, enabling a fluid rocking motion that also powers a reading light at the top. It remains at a concept stage.

08. Dyson cyclone vacuum

Industrial design

Dyson has genuinely revolutionised the vacuum cleaner

A classic example of totally rethinking the way a staple household product functions. In the 1970s, James Dyson was inspired by

8 BASIC RULES FOR GOOD GRAPHIC DESIGN

First, we need to define the meaning of the term “good design”. So, there are two important aspects. It should attract attention as well as please the eye of the beholder and it must serve a purpose (that is, to convey the message). Nowadays, free design programs can be found online, but to produce a good design it is necessary to know certain rules that every designer uses while designing his visuals.

To improve your design skills, we bring you 8 basic rules for good graphic design.

#1 KISS

KISS has become a well-known principle that graphic designers apply to their layouts ever since. Keep it simple, stupid – is a phrase that was coined by Kelly Johnson, lead engineer at the Lockheed Skunk Works, in 1960. The principle’s meaning isn’t difficult to understand and very similar to “less is more”. Don’t overcomplicate your design, keep it simple.

A clean and simple design is focused on the audience. With short attention spans and immense overflow of information, it’s necessary to be clear in your message. With this in mind, go to your layout and eliminate everything that’s not necessary. For example, more than three colors, more than two or three fonts, design elements that don’t transport any message at all or break a long text into paragraphs. Every design element needs to serve a purpose. Ask yourself if you need the element to understand the design.

Further to this, we come to the following rules, which will better explain how and why simplicity is essential.

#2 WHITE SPACE

The most important factor of good design is white space, or also called negative space. White space is the space between the elements in your design. Space that is not filled with text, graphics or photos. White space doesn’t have to be white. It can be a colored background or textured, as long as it doesn’t hold elements of design or content. Almost every designer faces the same problem – disagreement with the client about white space. While a designer knows about the advantages of negative space inside a layout, the client often feels like he’s not getting what he paid for. For the client, white space equals lost space. For the designer, white space is the rule of good design.

Clients usually require that every space is filled with information and elements. That makes it difficult to read, not enough emphasis is placed on what matters, and overcrowded visuals usually result in messages not reaching people. Try to avoid this situation. Suggest creating paragraphs and separating text through headings and subheadings in order to increases the readability of content and makes it easily scannable. The reader doesn’t have to search for important information because it stands out in your design. By leaving space around text and graphic elements, you not only create a hierarchy of those, but you can also put the main focus on the most important.

Below is a good example of a clean and simple design. The main message has been conveyed, and with this approach, people will be intrigued to visit our website to find out all the details.

White space good example

So, don’t be afraid to leave the spaces empty. This doesn’t mean your design is boring or unattractive. Putting too much into your design can confuse the viewer. An overload of information can distract from what is important and makes people turn away. We suggest that once you get the brief from the client, spend a couple of minutes thinking about what the information is essential to provide, and what message is important to send. Make one object of your design stand out from the rest. This is the main focal point, and to make this obvious to the viewer it should be separated into other objects through negative space.

#3 RULE OF THIRDS

Understanding the rule of thirds in design is relatively simple, and can make you a significantly stronger designer. So, how the rule of thirds works?

Using grid in your layout, divide it into three equally sized horizontal sections and three equally sized vertical sections, the resulting grid provides a sort of “roadmap” that helps you choose where to place your design elements. You will end up with 9 fields, and the spots where the lines intersect indicate the prime focal areas within your design. Bringing an element closer to one of these intersections will allow it to stand out more, while objects that are further away will receive less attention.

In the example below, you can see the orange point that shows where the lines intersect and where is the prime focal areas. We can see the computer screen placed on the left side and aligns with the upper grid. With that, we determined what the focus would be.

Rule of third examples

Audiences tend to follow a capital “F” shaped pattern with their eyes whenever they look at a design. The eye naturally starts at the top left section of the canvas, then moves down to the bottom left, back up to the top right, and then finally the bottom right.

The rule of thirds grid gives you the chance to give your graphic design a perfectly symmetrical appearance—but you’ll want to squash that instinct. The truth is that humans are naturally attracted to symmetry. While symmetry isn’t always necessary for good …