Skip to content
Menu
  • Web Design Business
  • Web design Fundalmentals
City Kitty Design

Web Design 101 – 3/8

Posted on November 3, 2017


Web Design 101 – 3/8
This series of lessons is part of our “Build a Better Site” course. Learn how to improve your Wix skills and your website. Enhance your website, grow your business!

In this video, learn the three guiding principles of design. You don’t need to be a graphic or web designer to create an impressive website. Use this class as a resource to help guide you in your customization process, to make your website look and feel as good as it can. You’ll learn basic web design concepts and principles, to make the best design decisions for your site.

Sign up for WixEd at http://www.wixeducation.com to get downloadables for this lesson.

Also, subscribe to our channel here: https://goo.gl/d0VmxW

TRANSCRIPTION:
These principles or guidelines come from decades of observing how people interact with websites. Whether you’re creating a website for your cousin’s lemonade stand, your local community center or a Fortune 500 company – these same principles can and should guide your design decisions.

First and foremost – a well-designed website is EASY TO USE. This is also referred to as “user-friendliness”.

Second, well-designed websites actually WORK. They provide a purpose or a function.

Last but not least – the best websites make an impression. They’re visually IMPACTFUL, inspiring or even beautiful.

Now let’s walk through each principle a little closer.

The first rule of thumb for creating successful websites, is making them easy to use. Let me explain.

Think about what it’s like to visit a website for the first time.
Maybe you recently bought something from a new brand you just heard about, or wanted to look up what a certain company does.

What was the experience like?
How easy was it to find what you were looking for on the website?
Did you feel disoriented, lost in a maze?
Or, was it easy to navigate, with a familiar layout, where everything was clearly labeled?

Think about this when browsing the web, and you’ll start to appreciate sites where the design was PLANNED…and sites that AREN’T that user-friendly.

Now imagine someone visiting YOUR website for the first time. In other words, look at the project from the point of view of your POTENTIAL VISITORS. If you can focus on THESE people, you can make smarter design decisions. You’ll plan things based on their needs and expectations.

I can’t stress this principle enough: the website must be comfortable for visitors to find what they came for. We’ll look at some tips for user-friendly web design in the next chapter.

The second core design principle involves the way your site actually WORKS, and what it allows visitors to DO.

Think about the needs of your website visitor – and design your website around those needs.

For example, if I’m building a website for a pre-school, I want the parents to be able to find information about upcoming events and ways to get in touch with the staff. If I’m building a website for a band, I want it to be easy for fans to listen to samples, check upcoming shows and book tickets.

We’ll explore tips for optimal website functionality in a later chapter.

Finally, good web design inspires some sort of emotional response. This area is the most challenging to define, and different industries have very different notions of what looks good.

You may wish to create a warm and playful mood on your website, while others may want a more traditional, polished look. No matter what “mood” you are going for, the “design elements” of your site should support that mood. These include the colors and fonts you choose for your site. We’ll go into detail about these elements in a later chapter.

So there you have it – three core principles to inform your design decisions.

In the next three videos I’m going to walk you through some tips and best practices for APPLYING each principle, so we’ll transition from a theoretical discussion, into a more practical one.

Let’s do this!

Recent Posts

  • How to Hire a Web Designer: 5 Steps
  • 5 Benefits Of Hiring Professional Web Design Companies
  • 8 tips for hiring a Web designer for your business
  • Top 5 Tips for Choosing a Web Designer
  • 7 Qualities of a Great Website

RSS Web Design News

  • Specify Node Versions with .nvmrc August 9, 2022
    I’ve heavily promoted nvm, a Node.js version manager, over the years. Having a tool to manage multiple versions of a language interpreter has been so useful, especially due to the complexity of Node.js package management. One tip I like to give new developers is adding a .nvmrc file to their repositories. The file contents is […]
  • How to Inject a Global with Web Extensions in Manifest V3 August 8, 2022
    For those of you not familiar with the world of web extension development, a storm is brewing with Chrome. Google will stop support for manifest version 2, which is what the vast majority of web extensions use. Manifest version 3 sees many changes but the largest change is moving from persistent background scripts to service […]
  • How Plugins Enhance The WYSIWYG Editing Experience (Sponsored) August 2, 2022
    WYSIWYG editors are one of the core components of any content management system (CMS). A well-coded, feature-filled WYSIWYG HTML editor can distinguish between a CMS users love and one they can’t stand.  While all WYSIWYG editors have a set of basic functionality, the power of plugins enhances the editing experience. Plugins allow WYSIWYG editors to […]
  • JavaScript Event.defaultPrevented July 27, 2022
    Whether you started with the old on_____ property or addEventListener, you know that events drive user experiences in modern JavaScript. If you’ve worked with events, you know that preventDefault() and stopPropagation() are frequently used to handle events. One thing you probably didn’t know: there’s a defaultPrevented proptery on events! Consider the following block of code: […]
  • 7 Ways to Optimize Performance for Your WordPress Site (Sponsored) July 18, 2022
    The vast majority of blogs, news websites, and information websites run on WordPress. While the WordPress developer team and community do their best to ensure wordPress is performant, there are a number of practices you can implement to keep your site blazing fast. Let’s look at some of them! Use Cloudinary WordPress Plugin for Media […]
  • How to Get Extension Manifest Information July 10, 2022
    Working on a web extension can be kinda wild — on one side you’re essentially just coding a website, on the other side you’re limited to what the browser says you can do in the extension execution environment. One change in that environment is coming January 2023 — pushing extensions to move to manifest version […]
  • How to Reverse an Animated GIF June 23, 2022
    Modifying visual media via code has always been a fascination of mine. Probably because I’m not a designer and I tend to stick to what I’m good at. One visual effect I love is seeing video reversed — it provides a sometimes hilarious perspective on a given event. Take this reversed water effect for example: […]
  • CSS :optional May 22, 2022
    A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The required attribute helped inform users which fields were required, while pattern allowed developers to provide a regular expression to match against an ‘s value. Targeting required fields and validation values with just CSS and HTML was very […]
  • Get a Random Array Item with JavaScript May 9, 2022
    JavaScript Arrays are probably my favorite primitive in JavaScript. You can do all sorts of awesome things with arrays: get unique values, clone them, empty them, etc. What about getting a random value from an array? To get a random item from an array, you can employ Math.random: const arr = [ "one", "two", "three", […]
  • Legacy String Methods for Generating HTML April 26, 2022
    I’m always really excited to see new methods on JavaScript primitives. These additions are acknowledgement that the language needs to evolve and that we’re doing exciting new things. That being said, I somehow just discovered some legacy String methods that you probably shouldn’t use but have existed forever. Let’s take a look! These legacy string […]
©2022 City Kitty Design