mood board example for the colors on asigma web design.

First off let’s start with the basics, each website has it’s own “soul”. In other words, this is the color theme that it employs. This can either make or break a website. Pre 2010 era website did not care so much about the color design, the main concern was always is it informative? Does it get the main idea across? Now past 2010, we see a drastic shift in design before we had a very static feel. Now website’s are shifting from skeuomorphism to flat design. The main difference is the appearance and use of certain colors. Like in the example below you can tell the difference between both designs. The difference is very obvious, the design on the right is much more visually aesthetic.

the difference between skeuomorphism design and flat design. Comparing two calendars.

The big question then arises, how do we have a constant color flow on the site? It all starts with a mood board. In our Toronto design agency, we always focus on this first before we apply any colors to the site.  A mood board is essentially color inspiration, we find 6-10 images that feel aesthetic to our niche or in this case the website. We then proceed to select the common colors from the images as we want our website to have the same “mood”. This ensures consistency all over the website, so when a possible client goes on our site, they feel the same theme everywhere. When we begin the visual design we always refer back to this mood board, the colors we use and pick all depend on it. Below is the mood board example that we at Asigma Design used for our website.

mood board example for the colors on asigma web design.

The three main colors used are Red, Black, White, Grey. As you see in the picture above, all these colors flow, even though the images are all different in a sense they all feel the same. The colors give this consistent aesthetic. When you visit our website aSigma.ca you will see how and where we used all these colors.

The next step after the mood board creation and color choosing is where to use what colors? This is the struggle that all of our clients faced when they came to us. Each element on the website has its own colors. For example, all the important heading on the site use the color red. While all secondary headings (less important)  use the color black. This way when the human eye jumps across the website it will understand that red is important while black is less important. The crucial takeaway from this is that this use of red for primary heading and the use of black for secondary is consistent all over the website. Every page you go on will have this consistent “theme”. So for the future when we create a new page, we then know where to use read and where to use the black.

Red is not used everywhere as you might image, it is only used in spots where there is emphasis needed. In places where we want the client to look. An example is our “Start Project” button, this is an action so the color used for text within the button is red. To stress the importance of red, we only use it in the most important parts of the sites. There where we want the most attention.

Imagine if we used red everywhere, then it would lose all the importance that it holds. It is important to use your “main” color where it is truly needed. To wrap this up let’s look at the main takeaways from this.

-Before implementing colors on the site start with a mood board.
-Mood board must be consistent with colors, it has to be aesthetic.
-Focus to determine the main color to use for important bits of the site. Then choose the secondary colors.
-Make sure the colors flow, they must all have a purpose.
-Outline where you will use the colors, example red for headings and black for subheadings.
-Be consistent with your choices, don’t use yellow for the title if your main theme is red.

I hope this articles helped you understand how we at aSigma design our website’s to be aesthetic and flow with purpose. If you could only take one thing away from this, its always start with a mood board!

Feel free to send us an email or give us a call if you would like to discuss your website and what we could do for you to improve it.

No Comments

  1. торцовочные пилы sturm on February 28, 2021 at 5:25 pm

    Your comment is awaiting moderation.

    Торцовочная пила Sturm! MS5525WM https://штурм.рус — это практичная и мощная модель для уверенной обработки длинных заготовок и выполнения работ с повышенными требования по качеству реза.

    Инструмент оснащен увеличенным пильным диском, встроенным протяжным механизмом, винтовым зажимом для прочной фиксации заготовок и предотвращающие их опрокидывание выдвижными боковыми суппортами. Благодаря большому поворотному столу, фиксирующемуся в любом положении, наличию удобной регулировки с прецизионными шкалами для точной настройки нужного наклона пилу можно уверенно выставить в рабочую позицию на предварительно заданные параметры косых пропилов. В торцовочную пилу Sturm! MS5525WM встроен проецируемый на заготовку лазерный указатель, позволяющий правильно разметить линию пропила и обеспечивает высокую точность проведения проложенных резов. Безопасный сдвигающийся кожух и бесступенчатая регулировка глубины пропила с удобной шкалой и фиксацией без ключа облегчает работу с заготовками.
    Пила Sturm! MS5525WM имеет устойчивую к деформациям литую опорную платформу, которая обеспечивает точные параметры наклонного реза. Так же имеется принудительный выдув пыли из рабочей зоны реза, наличие фильтромешка для опилок и дополнительная возможность подключения к пылесосу улучшает условия труда. Цилиндрический редуктор с косозубым зацеплением обладает низким уровнем шума и минимальной вибрацией, повышает аккуратность граней пропила и общую производительность операций.

    В нашем интернет-магазине Вы можете купить торцовочную пилу Sturm! MS5525WM по выгодной цене! – Купить Sturm! MS5525WM, Sturm! MS5525WM купить

    Комплектация:

    ? струбцина — 1 шт.;
    ? торцовочная пила — 1 шт.;
    ? мешок-пылесборник — 1 шт.;
    ? шестигранник — 2 шт.;
    ? инструкция по эксплуатации — 1 шт.;
    ? инструкция по безопасности — 1 шт.
    Приобрести – Торцовочная пила Sturm! MS5525WM, Sturm! MS5525WM.

  2. торцовочные пилы sturm on March 2, 2021 at 6:50 pm

    Your comment is awaiting moderation.

    Торцовочная пила Sturm! MS5525WM https://штурм.рус — это практичная и мощная модель для уверенной обработки длинных заготовок и выполнения работ с повышенными требования по качеству реза.

    Эргономичный корпус пилы Sturm! MS5525WM выполнен с применением нейлона, стойкого к ударам и низким температурам. Для уверенного ведения пильного диска и безопасного управления с экономией времени операций рукоятка пилы сделана в D-образной форме с триггерной стартовой клавишей, что делает эту торцовочную пилу Sturm! MS5525WM – идеальной для покупки!
    Удвоенное лакирование обмотки, бронированный ротор с арамидной нитью и закаленные приводные шестерни из легированной стали продлевают работу инструмента. Оптимизированная внутренняя аэродинамическая схема и лабиринтная защита от пыли сохраняет мотор от перегрева и продлевает его срок службы. Прочный полимерный, не спутывающийся кабель, сохраняющий свою эластичность при низких температурах, обеспечивает надежное питание инструмента в любых условиях.

    В нашем интернет-магазине Вы можете купить торцовочную пилу Sturm! MS5525WM по выгодной цене! – Купить Sturm! MS5525WM, Sturm! MS5525WM купить

    Преимущества:

    ? глубина пропила 45о — 45 мм;
    ? глубина пропила 90о — 90 мм;
    ? диаметр диска — 255 мм;
    ? длина кабеля — 2 м;
    ? принудительный выдув пыли;
    ? невысокая цена.
    Подробно на сайте – Торцовочная пила Sturm! MS5525WM, Sturm! MS5525WM.

Leave a Comment