Tips and Snips: Creative Website Hacks for Creative People
ImageandAspect
Philosophy
About
Demos
Contact
Privacy
Terms
Subscribe
Tips and Snips: Creative Website Hacks for Creative People
  • ImageandAspect
  • Philosophy
  • About
  • Demos
  • Contact
  • Privacy
  • Terms
  • Subscribe
Browsing Category
Archive
Design

 7 web design principles you should know

Principles of Design
October 15, 2020 by Diane Metcalf, M.S.I.T. No Comments

Fact:

You need basic design skills if you’re going to build a great-looking website. There are particular design principles that every Developer must know.

Fact:

It’s important to see how your web platform will look and function from a user’s point of view. It should be relevant for them, visually attractive, and easy (maybe even “fun”!) for them to use.

The first thing a visitor experiences on your site is its look and feel. A sites’ look and feel are both important aspects of web design. If the page doesn’t look professional, it loses credibility. If it’s not balanced, if the colors seem inappropriate or off-brand, if the fonts are hard to see or read, if page elements are missing or not where a user expects them to be (ex: a product search-field), it can contribute to a user experiencing negative feelings about your site, and may increase unwanted page-bounce rates.

Go for Easy

You can improve the quality of your web projects by collaborating with designers. You can also improve the quality of your web projects by learning some fundamental graphic design skills. It doesn’t have to be a difficult thing to do. If you make it an integral part of your development process, you’ll easily be able to incorporate both coding and design fundamentals into your web projects. Later on, you won’t find yourself poring through analytics reports, looking for the causes of high bounce rates.

Your design should be consistent across all pages of the site. Elements should be aligned and balanced, and the pages should be visually attractive as a whole, with no particular element overpowering any other element. And the most important thing is this: know the problem you’re solving with the page, and who you’re solving it for.

Here they are, 7 Design Principles 

alignment-300x157  7 web design principles you should know

Alignment

If you’ve ever used a word processor like MS WORD, then you’re already familiar with Alignment.

Alignment is a basic design principle that describes the way that the text and graphics components are arranged on the page. An example of alignment is choosing “justified” rather than “centered” text. Alignment creates the boundaries between areas on the page, making it easier for the user to see and read the content.

repitition-300x232  7 web design principles you should know

Repetition

“Repetition” can mean several different things, but the most common meaning is the reusing of a pattern, text, or graphic element throughout the entire design. By repeating elements, you can create a sense of consistency and harmony throughout the site.

Repeating an element, such as an image, doesn’t require that it be an exact duplicate, or even that it’s aligned in a particular way. Even slightly changing the look of a reused element is a valid creative technique.

hierarchy-126x300  7 web design principles you should know

Hierarchy

The use of hierarchy creates a sense of importance between the elements, as they relate to each other.

Creating a hierarchy is often accomplished by using a larger font size or font weight for the most important elements. You could also use a different font altogether, or you could make it a contrasting color to the other elements on the page.

Calls To Action (CTA’s) should be at the top of the hierarchy because they are more important than other page elements, and visual attention should be called to them.

balance-300x165  7 web design principles you should know

Balance

Balance is a design principle that uses symmetry and asymmetry, and space, to ensure that no individual element overpowers another on the same page.

Symmetry is a type of visual balance; where all elements are the same distance from the center.

Asymmetry can also be used to create balance. Using asymmetry, heavier looking elements would be on one side of the page, with lighter looking elements on the other side, further from the center, and using more of them.

Try to counter the “weight” of a large element by grouping several smaller elements together on the opposite side.  (If this arrangement consisted of real physical objects, they’d actually balance-out, in the real world.) The design feels balanced when element-distribution is consistent, and when you achieve this challenge visually, you’ve achieved balance on your page.

With practice, you’ll know if it doesn’t “feel” or look quite right, and you’ll also know when it looks and feels balanced.

contrast-300x150  7 web design principles you should know

Contrast

Contrast creates a type of visual interest by combining “opposites”. You can use contrast with textures (smooth and rough), and colors (light and dark), you name it. Get creative with contrast!

Using Contrast is important to make the page visually interesting for the user to look at and engage with.

color-300x300  7 web design principles you should know

Color Psychology

Color choice is an important aspect of design because when used effectively color can influence specific emotions (for example, blue has been shown to solicit calm feelings) or trigger brand recognition (for example, red and white is used for Coke products).

Keep your projects’ color palette simple; four to five colors at most.

fonts-300x72  7 web design principles you should know

Typography

Typography refers to the style and appearance of your written content. Like color, it can be used to influence a variety of emotions and inform users about the nature of your brand.

Use no more than two unique fonts. Using more than two has the potential to cause difficulty in reading the text, competition with the overall design or confusion about the purpose of the site itself.

Helpful Resources:

Google Fonts: HUGE cache of free web fonts.

Coolers: upload an image and automatically create a color palette based on the image colors.

Have fun designing your web pages!

Questions? 

[email protected]

My Contact Page

Other articles you might like:

-Using images: Tips to improve your SEO rankings

-10 Things to Do After Creating Your Website

-6 Tips to Make Your Blog Post SEO Friendly

 

About the author

diane-author-300x181  7 web design principles you should know

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

Read more

Reading time: 5 min

Find Topics

 Image and Aspect is a solution-based web presence development service for creatives, entrepreneurs and solopreneurs. We create impactful online presences that showcase your talents, skills, values & style, while focusing on influencing, engagement & connection.

 

It’s a collaborative process; we use streamlined project-management & communications tools so you’ll always know what’s happening with your project. And by adding personalized service, you get  one-on-one support. We want you to feel equipped, educated & empowered to ask questions & make decisions about your web presence & web platform.

 

Tips and Snips was born from the desire to give back; to support anyone who has an interest in learning the art and science of  web design and coding.

 

Thanks for your interest!

~Diane Metcalf, MS

Image and Aspect logo

Connect with me on Twitter!

Follow @MetcalfDiane

Categories

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Recent Posts

  • Why you need a customer thank-you page December 23, 2020
  • 10 things to do after creating your site November 8, 2020
  •  7 web design principles you should know October 15, 2020
  • Make your site mobile friendly with media queries September 18, 2020
  • Create a tiny browser icon for your site ID August 19, 2020

Older Posts

  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018

Tags

  • Blogging
  • bootstrap
  • CSS
  • Design
  • Entrepreneurs and Creatives
  • HTML
  • Job Seekers
  • Marketing
  • security
  • SEO
  • Thoughts
  • WordPress

Image and Aspect on Instagram


Warning: Invalid argument supplied for foreach() in /home/customer/www/tipsandsnips.imageandaspect.com/public_html/wp-content/plugins/feed-them-social/feeds/instagram/class-fts-instagram-feed.php on line 539

recent posts

  • Why you need a customer thank-you page
  • 10 things to do after creating your site
  •  7 web design principles you should know
  • Make your site mobile friendly with media queries
  • Create a tiny browser icon for your site ID

ImageAndAspect.com © 2020 Designed by ImageandAspect

 
This website or its third party tools use cookies to enhance our experience. More info CLICK HERE.