Research Report

Web Design Workshop

Team 2C:

Damy Daalhuisen 0923088

Lynn van Dooren 0872148
Farah Salhi 0927693
Zainab El Batal 0930616
Onur Yakisikli 0897417
Rafik Yemlahi 0893071
Shahmar Katibli 0910176
Vladimir Votinov 0918486

1
Inhoud
Research Report Web Design Workshop ............................................................................................... 1
Introduction............................................................................................................................................. 4
Main question: .................................................................................................................................... 4
Sub – questions: .................................................................................................................................. 4
Methodology & Literature Review .......................................................................................................... 5
Trends in web design............................................................................................................................... 6
Top 5 current web design trends ........................................................................................................ 6
Push notifications ............................................................................................................................ 6
Micro Animation.............................................................................................................................. 6
Motion design.................................................................................................................................. 6
Minimalism ...................................................................................................................................... 6
Asymmetric layouts ......................................................................................................................... 7
Top 5 future web design trends .......................................................................................................... 7
Vlogs ................................................................................................................................................ 7
3D .................................................................................................................................................... 7
VUI ................................................................................................................................................... 7
Social media..................................................................................................................................... 7
Artificial Intelligence and enhanced machine learning integration ................................................ 8
Conclusion ........................................................................................................................................... 8
Common web design mistakes ................................................................................................................ 9
No responsive design ...................................................................................................................... 9
No favicon...................................................................................................................................... 10
Generic 404 pages ......................................................................................................................... 10
Your home page uses carousels .................................................................................................... 10
Your website is slow. ..................................................................................................................... 10
Slow server response times ........................................................................................................... 12
Your website does not allow design norms. ................................................................................. 12
Choosing an unclear font............................................................................................................... 12
Poor tracking, kerning, and leading............................................................................................... 13
Your website isn’t focused on your website visitors. .................................................................... 14
Not answering questions ............................................................................................................... 14
Psychology and Web Design.................................................................................................................. 15
Intro ................................................................................................................................................... 15
Types of effects ................................................................................................................................. 15

2
 The Serial Position Effect ............................................................................................................... 15
The Von Restorff Effect ................................................................................................................. 16
The Zeigarnik Effect ....................................................................................................................... 17
Conclusion ......................................................................................................................................... 19
Colours in marketing ............................................................................................................................. 20
Colours in marketing and Branding ................................................................................................... 21
Conclusion ......................................................................................................................................... 22
Bibliografie ............................................................................................................................................ 23
Appendix................................................................................................................................................ 24
Search strategy form for Workshop research papers ....................................................................... 24
Script.................................................................................................................................................. 26
Team Reflection & Lessons Learned Report...................................................................................... 28
Rafik ............................................................................................................................................... 28
Onur ............................................................................................................................................... 28
Shahmar......................................................................................................................................... 28
Vladimir ......................................................................................................................................... 28
Zainab ............................................................................................................................................ 29
Farah .............................................................................................................................................. 29
Damy.............................................................................................................................................. 29
Logbook ............................................................................................................................................. 30
Onur ............................................................................................................................................... 30
Rafik ............................................................................................................................................... 31
Shahmar......................................................................................................................................... 32
Vladimir ......................................................................................................................................... 33
Zainab ............................................................................................................................................ 34
Farah .............................................................................................................................................. 35
Damy.............................................................................................................................................. 36
Lynn ............................................................................................................................................... 37
PowerPoint Slides .............................................................................................................................. 38

3
Introduction
This research paper will focus on the web design and the techniques or methods used in designing
website. The report will be split into 4 themes each of them covering aspects of the web design and
how they all sometimes interact: Current and the future web design trends, common website
mistakes, psychology of web design and marketing colors and their role. These themes will help to
increase the awareness about what is the most successful way to promote and create website and be
able to gain positive reviews rather than negative. It will also aid to overcome some difficulties and
mistakes that many web developers may face today. The research in this report is based on
qualitative and desk research. It is important to gain knowledge about the above-mentioned topics
as well as gain insights. Desk research was used by making a research in online articles, websites as
well as making research in books (Chaffey & Chadwick, 2019). Below are the main question and sub-
questions which will be answered through research made in this paper.

Main question:
What impact does the web design techniques had on the dominating and competing successfully in
online market?

Sub – questions:
How does the current and future web design trends affect online users and provokes positive
emotions?
What are the common website mistakes and their effect on online users?
Which psychological patterns and effects are used to influence online users?
How colors in creating a web can have unconscious effect on online users?

By answering these questions will help to increase an understanding of how to improve and create a
website which would include and consider all the current and future trends, different colors and their
effect, the psychological patterns that help online users to navigate and make decision faster, and
finally understand common website mistakes which would help to recognize them and apply all
these techniques. It is very important for current century and future to be involved in online
marketing, creating website for private business and be aware of most popular web design trends
which would help to create a user-friendly, interactive and attracting website.

How colors in creating a web can have unconscious effect on online users?

What kind of information do I need to answer my sub-questions?

It is important to collect data about each topic by creating research and writing around 1000 words.
This text would have an examples and explanation of current and future web design trends and what
are the advantages of using them. The common website mistakes will cover different types of
mistakes usually made and what are possible options to overcome these challenges. The
psychological patterns will help to explore and create awareness about different patters used in
order to grab online users’ attention. And finally, colors will be exploring their characteristics and
also explain which emotions they provoke in online users.

4
Methodology & Literature Review
What type of source(s) is needed/used?
For this workshop and research report, credible sources for used to support the research report on
Web Design. These were listed in the bibliography chapter. The team has also made use of workshop
lessons provided by the school on Web Design. This research report was based on the secondary
sources. Some of the secondary sources that we have used reports, magazines (online blog) (Ciotti,
2014). The main desk research approaches that we used were external, online desk research. The
research made was done with the help of different websites, blogs, YouTube videos, online
magazines, and with the help of books covering psychological aspects regarding colors and patterns
(Birren, 1950).

This research was made in order to be able to answer on the main research question and
sub-questions. The main question was regarding the web design and sub-questions were based on
the secondary themes.

It was important to check different online websites in order to recognize if the sources are
reliable or not, thus for example reading literature which covered how colors could influence people
language, senses and emotions. It was also necessary to understand the outline of our report in
order to create a logical consequence between themes and make it connected.

The primary resources were not collected during creation of this report since it was not
required to collect data using interviews or survey, rather it was important to use secondary sources
by analyzing already existing theories and interpreting or summarizing them in this report.

How are the sources analyzed?

By understanding whether the provided information is aligned to the study’s concept. These were
then applied to the research report paper.

5
Trends in web design
Following the website trends and knowing which to apply this to your website is very important in
order to generate leads and convert these into profit. The trends will help you to impress, keep
interest, interact and create a positive experience for the consumer. Therefore, a “top 5 current web
design trends” and “top 5 future web design trends” will be provided in this report, based on
information several experienced professionals and research reports have provided.

Top 5 current web design trends

Push notifications
No one has missed the unpleasant notifications that have been popping up while watching a movie
or working. These are called “Push notifications”. Never the less there is a positive side to these
annoying notifications. F.e. getting the newest news first about the tickets to the concert of your
favourite artist. Besides, “the notifications can be blocked, which will eliminate their annoyance and
on devices like a tablet or phone, they are often useful rather than unbearable”, a developer Olga
Stashenko says. Most sites are already asking the user's permission to send notifications and if there
is attention payed to the interest of the consumer and the amount of notifications is set properly,
this can really work for both the consumer and seller (Stashenko, 2019).

Micro Animation
One of the latest web design trends for ecommerce sites is using micro animations to enhance the
user experience and give shoppers a taste of what their products are like, Jonathan Maxwell, the
UI/production designer of Theedigital.com explained. F.e. the website aloyoga.com is using an
animation which you can dress to see how the clothing would look like on. However there is a
downside to this micro animation, H&M was using the micro animation the same way a few years
back. Due to this the website was constantly slowing down and they decided to remove it from their
website. Therefore, it is here important to outweigh whether your improving the consumers
experience or not.

Motion design
With motion design, movement on a website is being used to interact with consumers. F.e. by using
GIFs or videos. This way the consumers get instant exposure and will not leave a website due to
impatience. A research done by Marketing Statistics, has shown that 79% of consumers where
convinced to buy a product by the video. (Wyzowl, 2018) With a video you will have longer time to
get your message across. However, a video does take more time to load then a GIF (Stashenko,
2019).

Minimalism
The concept of minimalism is “Less is more”. This concept is a big trend among the rich in Hollywood,
think of the house of Kanye West and Kim Kardashian. This same trend you can also see it translating
into websites where you can see hidden navigation bars, minimum of colours, lack of additional
details of graphic design (shadows, font variety) and in general minimum of buttons (Stashenko,
2019). Here it’s important to see who your target group is as this is a big trend for the rich target
groups.

6
Asymmetric layouts
Most website look quite orderly and are based on grids, a current trends is to make your website
actually asymmetric. Especially broken-grid layouts are received very positive, they are distinguished,
distinctive and stubborn assertive. However, some visitors might find it still chaotic and unreadable.
(Hall, 2018)

Top 5 future web design trends

Vlogs
Video marketing is becoming more popular over the years. According to research, approximately 500
million hours are spent on YouTube every single day. Google acquisition of YouTube has made vlogs
more popular and given it more attention over the globe. Another study showed that Facebook
receives around 135% of video content, with a positive effect of 73%. The conclusion can be drawn
that of all online traffic, people would prefer videos over written content. Therefore, it is highly
important for the creator of a web design to focus more on video content as it is considered most
engaging.

3D
3D is not a straight forward trend yet, however several studies show 3D design will start to get more
attention and evolve at a faster rate after 5 years. With augmented reality becoming more popular,
creators obtain more tools to design 3D elements. An example is the update of Snapchat which
allows users to use 3D lenses.

VUI
VUI is one of the latest web design trends that will make the way we search the web more unique in
2020. Voice User Interface (VUI) aims to make human and computer interaction easier by the
possibility to have technology devices that enable voice interaction between people and devices.
However, a VUI does not need to have a visual interface as it can be a tactile (excluding a vibration)
or completely auditory. Examples of VUI’s are: Siri, Apple iOS and Home Pods like Google Home,
which are all part of more than 40 million users monthly.

Social media
Social media is one of the best tools available. But social media synchronization is even more
important and can be seen as a rising trend. It allows you to sync all your social media accounts in
one place, so that you are able to share your content across all accounts with just one post. This will
give you the advantage to widen and diversify your reach, you will maintain consistent branding and
you will be able to spend more time on greater content.

7
Artificial Intelligence and enhanced machine learning integration
According to a prediction made by Facebook in 2018, the top three upcoming social media trends will
be: Machine Learning and Artificial Intelligence. Enhanced machine learning will help designers and
developers to capture user detail based on location and browsing history. This data will help to direct
designers and developers better to a concerned landing page. Artificial intelligence makes it possible
for machines to adjust to new inputs and perform ‘human-like’ tasks. An example are the self-driving
cars that rely on deep learning and natural language processing. The goal of AI is to accomplish
specific tasks by processing large amounts of data and recognizing patterns in those specific data.

Conclusion
To conclude, it is highly recommended for creators to be familiar with the current and upcoming
trends in web-design. As a company’s web page is often the first place a potential customer interacts
with a brand. Therefore, using various design elements in order to leave a positive impression has to
be the first priority.

8
Common web design mistakes
It can be difficult to master web design. Many businesses struggle trying to make a design that boosts
conversions and generate revenue. The website of the company needs to make money and also be
appealing. A lot of times a company will focus on design so that their website looks good but forget
about maximizing their conversion rates. It’s is a small mistake in the eyes of the company but it can
definitely to a lot of damage in the long run. If the website introduces a lot of objections and
problems unnecessarily is can make it very difficult for customers to buy a product because they are
overwhelmed with information. This pushes customers away from the website. The company needs
to avoid making basic or the same mistakes as their competitors. Avoiding this will increase the
amount of traffic, leads, and sales. It may take a lot of time to fix these mistakes but its sure worth it.
You can increase the amount of traffic, leads and of course sales greatly with consistent effort. This
process starts with knowing what kind of mistakes you have to avoid designing the website. Lets take
a look.

No responsive design
Making your website responsive is number one. This has been listed as the most important feature
for a website by awards.com. A lot of your website visitors will look at your website from a desktop,
smartphone, tablet or even a PS4. Therefor it is very important to optimize your website for all of
these devices and it is what Google recommends.

9
No favicon
Some of your visitors will save your website in their favorites or leave them open to visit it later
again. While the visitors like to use a lot of tabs to brows the big web your favicon gives your visitor a
visual cue to return to your tab while they’re browsing.

Generic 404 pages

Talking about traffic killers, the 404 pages a number one. In an informal survey of 3,475 users it was
made very clear that most visitors that see a 404 page on your website will not try to fix the problem.
They just simply leave the page for good.

Your home page uses carousels

More and more websites use a carousel these days and that is not a terrible thing at all. Only when
they start to scroll automatically it is a problem. The slides will kill the conversion with your visitors
because they induce banner blindness (they look like ads).
A carousel that sides automatically will annoy your visitors and move the attention they have away.
The attention of your visitors should be more focused on conversion!

Your website is slow.

A web page should not take more than four seconds to load completely. If it takes more time than
that your website it too slow. In a survey made by Google they found that over 70% of the websites
took seven seconds or longer to load. Google also found out that if it takes longer than 4 seconds to
load a website the chance that the visitor will bounce is a lot more likely. Google also noted 3 that
seconds is the accepted best practice If you want to keep your visitors on your website.

10
The speed of your page can also impact your google rankings because google uses page speed as a
important ranking factor. Google will terermin your page speed on the following factors:

Time to the first byte. When you enter a URL in your browser, it asks the server for the HTML
document at that URL. The faster the response time, the more likely it is that the rest of the page will
load quickly.

Render Time. A Computer code creates and presents the visual display on your device screen. It will
show visitors that something is going on and that the web page is loading.

Visual design. The web page has finished loading, is fully visible, and has become fully available to
your visitors.

Documents backend. The web page may be complete on the screen, but if there is a lot of additional
loading in the background it will make your website score low on speed.

11
FIle requests. When you load your website page, your browser loads JavaScript, CSS, and possibly
your image files. Loading lots of small and/or large files make the website slower to load.

Slow server response times

Congratz! Now you can optimize your website for speed! But if your server response time is slow,
your website will still load very slow. If this is the case, there is usually a underlying performance
problem.

The Google giant recommends that you reduce your server response time to 200 ms or better less.
Lets take a look at the potential causes:

 Slow application logic

 Slow database queries
 Frameworks and libraries
 Resource CPU starvation
 Memory starvation

Sluggish server response times and optimized web pages are must-haves if you’re looking to increase
your website speed and performance.

Your website does not allow design norms.

Your visitors want your website to follow the design norms. You have a lot of space to be creative but
you have to be careful. Your website visitors need to be able to find the navigation bar and/or the
search function. If they are not you will lose them.

Choosing an unclear font

Somethimes it can be difficult to read cursive font, hand-drawn scripts and symbols. Take a look at
this message, as a example.

Are you able to read it?

12
This font Is calles “Bedtime Stories” but it is not very clear to read. If the font on your website is not
easy or even difficult to read it can decrease cognitive fluency. Is your website easy to read? Your
visitors want your content to be easy to read and follow if not it will decreases understanding.

Poor tracking, kerning, and leading

With Kerning we refer to the space in between two characters.

With tracking we refer to the spacing in between your words and phrases.

And leading applies to the spaces in between the lines of the words.

13
If these are very close to each other it will make it harder for your website visitors to read what is
written. Focussing on these details seem to be to much effort because some website owners may
feel that as long as its readable the website is good. The fact with tracking, kerning, leading and other
typography is that they make clarity hard or even impossible.

It is very important because you can’t sell anything to your visitors until they understand you. A
Facebook Ad that’s written in Spanish won’t be clear to you unless you also happen to speak Spanish.
Clarity trumps persuasion because clarity is an element of persuasion.

Your website isn’t focused on your website visitors.

Inexperienced content makers focus on creating content that’s focused on their business and how
great their business is. This content ignores visitors’ desires, goals, fears, frustrations, and problems.
This decreases credibility and it makes it harder to convert visitors into customers.

Not answering questions

Your website visitors have very specific questions they want to be answered. At the bottom you will
find a few common questions your visitors have:

How do I get in touch with a real person at your company?

What’s the price of your products and services?
How do you handle refunds and exchanges?
Why should I do what you’re asking me to do right now?
What’s your privacy policy?
What will you do with my information?
What’s your shipping policy?
Where are you located?
What makes your company different?
Why should I choose your product or service over a competitor?

14
Psychology and Web Design

Intro
By using certain psychological triggers, consumer choices can be influenced to take a desired path or
action. How our brain reacts to certain colors and options on a website goes unnoticed but plays a
huge role in the way we perceive the website and the company. Most common example are colors.
We associate bright vibrant colors with positive emotions like happiness, whereas dark colors are
often boring. But what are other secret tricks that play with our mind?

Types of effects
Now that we know website design can boost sales, let’s take a closer look at some particular
techniques companies use.

The Serial Position Effect

Have you ever seen words where the letters in the middle were mixed but you were still perfectly
able to read it? This is because the first and last letter did not change, which apparently are the most
important, did not change and is all our minds need to try and create the word. Sort of the same
concept can be applied to Web Design with the so called Serial Position Effect. This idea refers to a
user’s tendency to recall the first and last items in a series far more than the middle ones. We call
this the primacy – and the recency effect. The first and last piece of information are the most
important ones.

Thus, putting specific items or information in a particular order can influence the consumer’s buying
behavior. An example if by offering different plans, starting with the most beneficial one to catch the
customer’s attention. At the end of the sequence that you offer, you can put the one that will catch
the interest of the customer, like the free trail here. This is in line with what the theory suggests, that
customers are most likely to remember the last item, does offering a free trial can remind the client
that they can still try the product out for free, and upgrade to a higher plan if they like it.

15
Another important example is your navigation menu. It’s important to put the most important link
that you want to emphasize on as the first. As you can see on the website of this basketball team,
they put their most important links that will generate money as the first and the last. These are
tickets and the store.

The Von Restorff Effect

The Von Restorff Effect, also called the isolation effect, states that website visitors remember the
things that stand out on a page. It’s used to draw attention to unusual items by using lights, colors,
images sounds etc.

This isolation effect is applied by highlighting the so called Call-To-Action buttons. It is also used to
minimalize the choices that are presented to the visitor, because when there is a lot of choice,
customers are often less inclined to act fast, and sometimes don’t even buy at all. Thus creating a
isolation effect on services or products that you want to emphasize on can help the customer act
faster. However, just because it’s in a fancier color doesn’t mean that it’s better, it must be
something special as well for the customer to remember it better. Here are some examples:

16
The Zeigarnik Effect
Lastly, the Zeigarnik effect. This strategy revolves around using incompleted tasks that stick in
people’s minds to tempt them to come back to your website and persuade them to act. It’s about
giving customers motivation to finish a task whether it’s creating a profile or making an online
purchase. We see this on almost all websites. Think about the progress bar when you purchase
something online, or when you create an account. On forums, this strategy is also used by using
ranks for account holders based on how often they are active or how much they post. (use zalando)

17
18
Conclusion

Now that we learned about some psychological strategies to persuade customers to act, you can
apply these to the website you are developing. But keep in mind, it’s about fulfilling the needs of the
clients first. When that goal is met, strategies like these can help expand your business and increase
conversions and revenue.

19
Colours in marketing
Everyone knows what all colours have influence on human body and they make a different
reaction from it, for example:
1. Red – Creates a sense of urgency, which is good for clearance sales. Encourages appetite,
thus is frequently used by fast-food chains. Physically stimulates the body, raising blood
pressure and heart rate, associated with movement, excitement, and passion.
2. Blue – The preferred colour of men. It’s associated with peace, water, tranquillity, and
reliability. Blue provides a sense of security, curbs appetite, and stimulates productivity. The
most common colour used by conservative brands looking to promote trust in their products.
3. Green – Associated with health, tranquillity, power, and nature. Used in stores to relax
customers and for promoting environmental issues. Green stimulates harmony in your brain
and encourages a balance leading to decisiveness.
4. Purple – Commonly associated with royalty, wisdom, and respect. Stimulates problem-
solving as well as creativity. Frequently used to promote beauty and anti-aging products.
5. Orange & Yellow – Cheerful colours that promote optimism. Yellow can make babies cry,
while orange can trigger a sense of caution. Used to create a sense of anxiety that can draw
in impulsive buyers and window shoppers.
6. Black – Associated with authority, power, stability, and strength. Often a symbol of
intelligence but can become overwhelming if used to frequently.
7. Grey – Symbolizes feelings of practicality, old age, and solidarity. But too much grey can lead
to feelings of nothingness and depression.
8. White – Associated with feelings of purity, cleanliness and safety. Can be used to project an
absence of colour or neutrality. White space helps spark creativity since it can be perceived
as an unaltered, clean state.
Leading colour theorist Faber Birren (1900 to 1988) believes colours are closely related to our
senses, language, surroundings and personal features. In his theory, Birren links the perception of
colour with the emotion it arouses in the viewer. He claims colour responses are interrelated with
other senses. In his Colour Psychology and Colour Therapy, Birren says bright colours may have a
benign effect on the mentally-challenged. He also states that introverts are less emotionally
responsive to colours than extroverts. "Outwardly integrated," persons like colours in general and
warm colours in particular, he wrote, while "inwardly integrated," people may choose cool colours or
none (Birren, 1950).
Colours in the red range of the spectrum (red, orange, yellow) are generally referred to as
warm, active colours and are associated with intense emotions ranging from joy and excitement to
fury and violence. Red, yellow and orange, the colours of the sun and volcanoes, incite motion and
change. Blue, green and purple, which are on the blue side of the spectrum, are cool, passive colours,
arousing feelings of calmness, tranquillity but also of coldness and depression. Green (associated
with nature) has a soothing effect on vision and blue (the colour of oceans and sky) implies serenity,
quietness and unity (Birren, 1950).
In his study on the psychological aspects of colour, psycho-neurologist Kurt Goldstein found
that colour affects the ability of the body to keep its position, with red light disturbing the
equilibrium far more than green light. Thus, wearing green glasses may relieve disturbances in
patients with tremors, according to Goldstein (Goldstein, 1940).
Other psychological aspects of colour are related to the notions of time, length and weight.
Goldstein claims time is overestimated under the influence of red light and underestimated under
blue light. Thus, from a functional perspective, cool colours are good for offices and industrial plants
where monotonous work is performed, while warm hues are suitable for restaurants and living
rooms. Objects appear longer and bigger under red light and shorter and smaller under blue light.

20
Weights under green light can seem lighter and weights under red light appear heavier. Hence,
weightlifters perform better in blue-coloured gyms (Goldstein, 1940).

Colours in marketing and Branding

Use contrasts to reduce eyestrain and allow readers to focus their attention on specific items.
Vibrancy can dictate the emotional response users have to your design. For example, choosing
brighter colors can lead users to feel more energetic, which can evoke better responses and
reactions. But if your website is information-intensive, you may find that a darker color theme will
make it easier for readers to process all your data.

McDonald’s chooses high-energy colors like red and yellow which appeal to children, kindle appetites
and create a sense of urgency. Of course, Ronald McDonald himself is popular with the kids, but he’s
also sure to agitate parents quickly. This facilitates faster customer turnover.

It’s scary to think how powerful this tactic has been for Micky D’s, which might not have been the
same ridiculously big chain it is today without using red and yellow so effectively. McDonald’s sure
wouldn’t be so popular trying to market all that unhealthy food using the color green!

Interestingly, the only major global brand to use green as its primary color is Starbucks. Using green
shows that Starbucks hopes to promote a sense of relaxation in their cafes, inviting customers to
come in for a coffee break during a stressful day.

True Blue has been shown to calm the senses and even lower blood pressure. It soothes and
reassures, promoting feelings of trust, security, order, and tranquility. Blue is the most oft-cited
favorite color for both men and women and is the most popular choice for logo designs by a
significant margin. Some tests show that people are at their most productive in blue rooms, and
you’ll find many companies using the color to capitalize on that.
Technology brands like Intel and Dell use blue to relay their security and reliability; no one wants to
purchase a computer that frequently crashes. Brands selling machines use blue: Ford uses it, relaying

21
their solidity and reputability. VISA uses it for their iconic text-based logo, because it falls in line with
the security and trust that people associate with blue. If you’re a company that prides itself on its
professionalism, trustworthiness, and dependability, blue might be the hue for you.

Orange exudes playfulness and exuberance, standing out as a beacon of youthful enthusiasm in
every brand that employs it in their logo. Orange is vibrant, and its lively energy is perfectly suited for
companies looking to attract a younger (or young at heart) group. Nickelodeon’s bright orange logo
stands out in a crowd, emphasizing its buoyant, light-hearted spirit. Fanta has brilliant orange logos,
and it perfectly captures the fun of grabbing a soda on a hot afternoon.

Much like a little black dress, black is timeless, elegant, and sophisticated. Using black in your logo is
a bold move, letting consumers know that your product stands for itself. Classic and refined, a simple
black logo is a sure-fire way to represent yourself as an exclusive, high-end experience. Chanel’s logo
is chic and tastefully understated, and instantly recognized in the fashion world. The dignified BBC
logo is similarly minimalistic, and their refined black styling gives it a sense of authority and
respectability worthy of a world class broadcaster.

Conclusion
Research has found that deferring to consumer’s feelings about colour appropriateness in relation to
your product is more important than the individual colour choice itself. So, don’t get too hung up on
the rules for colour–there’s room for interpretation on how a colour choice is going to be received,
and as always, you simply can’t please everyone all the time (I’m never going to like pastel purple. It’s
not going to happen). That said, even if you really love it, electric orange may not be the best colour
choice for the logo of your mattress company — maybe that’s a decision you should sleep on.

22
Bibliografie
Akex Birkett. (2016, June 8). Serial Position Effect: Why Order Matters in Optimization. Retrieved
from ConversionXL: https://conversionxl.com/blog/serial-position-effect/

Birren, F. (1950). Color psychology and color therapy.

Ciotti, G. (2014). Color Psychology: How Colors Influence the Mind. Psychology Today.

Hall, E. v. (2018, 12 08). Webdesign trends in 2019. Retrieved from Mediaweb.nl:

https://mediaweb.nl/blog/webdesign-trends-2019/

Roos. (2018, November 15). https://klikproces.nl/von-restorff-effect/. Retrieved from Klikproces:

https://klikproces.nl/von-restorff-effect/

Stashenko, O. (2019, 08 18). 8 MAIN WEB DESIGN TRENDS AND PREDICTIONS 2020. Retrieved from
merehead.com: https://merehead.com/blog/8-main-trends-of-web-design-2020/#content_2

Wyzowl. (2018, 12). The State of Video Marketing 2019. Retrieved from www.wyzowl.com:
https://www.wyzowl.com/video-marketing-statistics-2019/

Yana Yelina. (2019, February 19). Psychology In Web Design: How To Influence Consumer Choice.
Retrieved from Usability Geek: https://usabilitygeek.com/psychology-web-design-influence-
choice/

(Daniel An, 2018) Find out how you stack up to new industry benchmarks for mobile page
speed
(Jakob Nielsen, 2013) Auto-Forwarding Carousels and Accordions Annoy Users and Reduce
Visibility
(Webydo, 2019) Why Responsive Design Support is the Most Important Feature You Can Add
to Your Website
(Google, 2012) Recommendations for building smartphone-optimized websites
(Neil Patel, sd) We Analyzed 143,827 URLs and Discovered the Overlooked Speed Factors
That Impact Google Rankings
(Google, sd) Improve Server Response Time
(Colleen Roller, 2011) How Cognitive Fluency Affects Decision Making
Decision Architecture
(Marketing Experiments, 2009) How changing the first seven seconds of user experience
drove a 201% gain

23
Appendix

Search strategy form for Workshop research papers

Form Desk research – Search strategy
Step 1
Main question:
................................................What impact does the web design techniques had on the
dominating and competing successfully in
online market?............................................................................................................................
.....
Sub-questions:
How does the current and future web design trends affect online users and provokes
positive
emotions? ..................................................................................................................................
..............................................
What are the common website mistakes and their effect on online users?
.....................................................................................................................................................
............................
Which psychological patterns and effects are used to influence online users?
.....................................................................................................................................................
............................
How colors in creating a web can have unconscious effect on online users?

Step 2
Sort of information Database
Subquestion  Current web design Hall, E. v. (2018, 12 08). Webdesign trends in 2019.
1 trends
 Future web design Keillor, B. D. (2012). Marketing in the 21st Century.
trends Omnicoreagency. (2019). Youtube Statistics.

Stashenko, O. (2019, 08 18). 8 MAIN WEB DESIGN

TRENDS AND PREDICTIONS 202

Top 8 Web Design Trends for 2020. (2019, 08 28).

Wilson, R. E., Gosling, S. D., & Graham, L. T. (2012).

Wyzowl. (2018, 12). The State of Video Marketing

2019.

Subquestion  Common website (Daniel An, 2018) Find out how you stack up to new
2 mistakes industry benchmarks for mobile page speed

24
 (Jakob Nielsen, 2013) Auto-Forwarding Carousels
and Accordions Annoy Users and Reduce Visibility
(Webydo, 2019) Why Responsive Design Support is
the Most Important Feature You Can Add to Your
Website
(Google, 2012) Recommendations for building
smartphone-optimized websites
(Neil Patel, sd) We Analyzed 143,827 URLs and
Discovered the Overlooked Speed Factors That
Impact Google Rankings
(Google, sd) Improve Server Response Time
(Colleen Roller, 2011) How Cognitive Fluency Affects
Decision Making
(Marketing Experiments, 2009) How changing the
first seven seconds of user experience drove a 201%
gain

Subquestion  Psychological Leigh Turner, 2017

3 patterns
 Their effects on (Roos, 2018), Wat het Von Restorff Effect is en hoe
online users je het gebruikt voor conversie

(Yana Yelina, 2019) Psychology in Web Design: How

to influence consumer choice

(Akex Birkett, 2016) Serial Position Effect, why order

matters in optimization

Subquestion  Importance
Birren,ofF. (1950). Color Psychology and Color Therapy.
4 colors in marketing
Goldstein, K. (1940). Human nature in the light of
psychopathology.

Step 3
English Synonym Other
Subquestion  Web design trends  Web app design
1  Web design trends 2019 trends
 The latest web design trends
 Future web design trends

Subquestion  Common website mistakes  Common small

2  Most common website business website
mistakes mistakes
 5 common website design
mistakes

25
 Subquestion  Psychology behind web design  E-commerce
3 psychology

Subquestion  Marketing colors psychology  Marketing

4 colors and meaning

Script

Script Workshop Class 403 Group 2C

Onur Yakisikli (0897417)

Rafik El Yemlahi (0893071)
Shahmar Katibli (0910176)
Zainab El Batal (0930616)
Damy Daalhuisen (0923088)
Vladimir Votinov (0918486)
Lynn van Dooren (0872148
Farah Salhi (0927693)

Timeline
The entire Workshop will be from 14:30 till 15:50 (80 minutes).
14:30-14:31 Introduction of the entire group and start of the Workshop.
|
14:31-14:40 Farah will start it off by introducing the workshop and talk on Web Design Trends.
|
14:40-14:50 Following Farah up, Damy will talk on Common Web Design Mistakes and
furthermore introduce Assignment 1 (Appendix)
|
14:50-15:00 3 version (A,B and C) will be handed out to each couple for them to look and spot the
common mistakes on the images.
|
15:00-15:10 After the first Assignment there will be a 10 minute Break.
|
15:10-15:20 After the Break Rafik will start the second half of the workshop by talking on The
Psychology Behind Web Design.
|
15:20-15:30 Following up Rafik, Shahmar will speak on the Marketing Colours and their Role in
Marketing and furthermore introduce Assignment 2 (Appendix)
|
15:30-15:49 The large papers will be handed out and Assignment 2 will be introduced and
finalized.
|
15:49-15-50 The Workshop will be closed.

Goals
- The understand the importance of the trends and which trends to look out for.

26
- Create awareness for possible website mistakes and how to regulate them
- Understand the different types of psychological strategies
- Understand the influence of colors in Digital Marketing

27
Team Reflection & Lessons Learned Report

Rafik
What went well?
Workshop presentation tasks were clear and defined
What didn’t go so well?
Research report task division
What did I learn?
Different aspects of Web Design, specifically psychology

Onur
What went well?
I think the workshop itself went well, we all knew what we had to do and we executed it well. The
assignments also went good as we had good participation from the class.
What didn’t go so well?
The research report tasks could have been better defined amongst the members. Some parts of the
report were missing due to unclear communication.
What did I learn?
Rafik and I worked on the Psychology of Web Design part. I learned a lot about how different
strategies and colors for example can play a huge role in consumer buying behavior and web design.

Shahmar
What went well?
It was possible to create a Whatsapp group in order to follow the code of conduct which is basically
provide the work due deadline and be active in the group. This helped us to arrange the meetings in
order to prepare for the workshop.
What didn’t go so well?

The division of the research report task was unclear and it would be improved for the next time.
What did I learn?

It was important to understand how to prepare a workshop and be able to really deliver the main
knowledge that we gained from written report.

Vladimir
What didn’t go well? the part of my subject was to big, and the time of presentation for me was too
short for open all info as much as I wanted. To many information had to be red, for clear
understanding of all information.

What went well? the possibility of connection with all group, we used chatting and meetings without
any problems and understood each other without any problems. There was no any rules which we
had to follow like code of conduct.
Also the part of learning about colors in marketing was so interesting for me, and I red to much about
that, which improved my skills in marketing and psychology.

What did I learn? I understood how to prepare lectures, how to work with people by giving them
some information. Also I improved my skills in marketing what was too important for me.

28
Zainab
What went well?
Overall, the team worked hard together to create the PowerPoint, workshop and research report.
The team communicated clearly and everyone was motivated.

What didn’t go so well?

The tasks for the research report should have been more clear and internal deadlines as well. There
was little communication in terms of the division.

What did I learn?

I worked together with Farah on the web page trends of today and in the future. I learned that it is of
great importance to stay ahead of the trends and to adjust the current or upcoming trends to your
audience. Due to the presentation and research report I also learned a lot about the other topics.

Farah
What went well?
The teamwork with the team members and the interaction with the student went quite well. When
asking questions to the students they were not immediately responsive, however I started picking
out people to answer, which made the students pay more attention and interact.

What didn’t go so well?

There were some technical difficulties and I was standing during the presentation on the wrong side
of the screen. Because of this the teacher did not see that I put sources in the PowerPoint for the
statistics I mentioned. Also the internal deadlines could be more clear next time.

What did I learn?

For the next time I will definitely pay more attention to where I have to stand while giving the
presentation and just in case the teacher doesn’t see my sources, to mention these.

Furthermore, I learned all about the web design trends and upcoming, which are quite interesting to
stay ahead with if you would like to keep your customer satisfied.
Damy
What went well?
We had some good co-operation in the group when it came to ideas and everyone helped each other
to work out the best workshop for the class. The communication in the group went rather good too,
the fact that we have a Whatsapp group chat, to stay connected with each other and bond during the
process has been an interesting development.

What didn’t go so well?

The division for the report task hasn’t been very clear to everybody and should be worked on next
time to make sure that everyone knows what they have to do.

What did I learn?

I learned a lot about website mistakes, what would be points of interests to focus on when building
my own website. The different tips that we delivered in the workshop were very interesting to me
and showed me what I should pay attention to.

29
Logbook
Onur

30
Rafik

31
Shahmar

32
Vladimir

33
Zainab

34
Farah

35
Damy

36
Lynn

37
PowerPoint Slides

Dia 1

Web Design

Digital Marketing

Dia 2
TABLE OF CONTENT

⮚ Current and Future Web Design Trends

⮚ Common Website Mistakes

⮚ Psychology of Web Design

⮚ Marketing Colours

Dia 3
GOALS

❑To understand the importance of the trends and which trends to look out for.

❑Create awareness for possible website mistakes and how to regulate them

❑Understand different types of psychological strategies

❑Understand the influence of colors in digital marketing

38
Dia 4

TOP 5 CURRENT TRENDS

Dia 5 WHY ARE WEBDESIGN TRENDS

IMPORTANT TO APPLY TO A WEBSITE?

• Impress consumer
• Keep interest of consumer
• Interaction with consumer
• Create positive experience

• GENERATE LEADS AND CONVERT INTO PROFIT

Dia 6
PUSH NOTIFICATIONS

• Disadvantage:
• It is unpleasant to see while
working or watching movies.

• Advantage:
• Getting the newest news
first, f.e. tickets to the
concert of your favorite artist

39
Dia 7
MOTION DESIGN

Benefit:
Instant exposure for impatient
consumers

GIF or Video?

• GIFs
• Fast loading
• Video’s
• More time for message
“79% convinced to buy the product by
the video” (Video Marketing Statistics,
2019)

Dia 8
MICRO ANIMATION

Advantage:
• Enhance the user
experience
• Give shoppers a
taste of their
products
Disatvantage:
• Slows down website

Dia 9
ASYMMETRIC LAYOUTS

• Positive:
Specifically broken-grid layouts; distinguished, distinctive and
stubborn assertive

• Negative:
Visitors might find the content chaotic and unreadable

40
Dia 10
MINIMALISM

“Less is more”
A trend for the rich?

• hidden navigation bar

• minimum of colors
• lack of additional details of
graphic design (shadows,
font variety)
• minimum of buttons

Dia 11

TOP 5 FUTURE TRENDS

Dia 12
VLOGS

• Substitute for blogs

• “68% prefer watching

videos, rather than reading
texts”

• “84% of managers are

convinced that thanks to the
video they managed to
increase traffic on the site.”
(Video Marketing Statistics,
2019)

41
Dia 13
3D

• In 5 years

• not enough available 3D

monitors

• Financially not doable atm

Dia 14
VUI (VOICE USER
INTERFACE)

• AI assistants such as Siri

and Alexa

• F.e. Voice ID Logins

which helps in
recognizing individual
voice and faces.

Dia 15
SYNCHRONISED SOCIAL MEDIA

• Synchronize all the social media

platforms in the design to increase the
online presence and traffic

• Share your content across all accounts

with just one post

• Maintain consistent branding and more

time on greater content

42
Dia 16
AI AND ENHANCED MACHINE
LEARNING INTEGRATION

• Enhanced machine learning

will help designers and
developers to capture user
detail based on location and
browsing history

• Landing pages can be

personalized through this
(F.e. Netflix)

Dia 17 Common Web

Design Mistakes

Dia 18 Speed of the Website

43
Dia 19 Poor Image Choice

Dia 20 Mobile Access

Dia 21 Buttons that

Blend

44
Dia 22 Long Paragraphs

Dia 23 No Favicon

Dia 24 Too Many Call

to Actions

45
Dia 25 Tracking

Dia 26 Spacing

Dia 27 Poor or Overly

Complicated Writing

46
 Common Website
Dia 28 Mistakes
Assignment

Common Website
Dia 29 Mistakes
Assignment

Common Website
Dia 30 Mistakes
Assignment

47
Dia 31 Assignment
Version A

Dia 32 Assignment
Version A

Dia 33 Assignment
Version A

48
Dia 34 Assignment
Version A

Dia 35 Assignment
Version B

Dia 36 Assignment
Version B

49
Dia 37 Assignment
Version B

Dia 38 Assignment
Version B

Dia 39 Assignment
Version C

50
Dia 40 Assignment
Version C

Dia 41 Assignment
Version C

Dia 42 Assignment
Version C

51
Dia 43 10 Min Break

Dia 44 Psychology of
Web Design
Serial Position Effect Von Restorff Effect Zeigarnik Effect

Dia 45 Serial Position Effect

52
Dia 46 Serial Position
Effect
○ Users recall the first and last items the
most
○ Most important links first or last
○ Importance based on:
➥ Fulfilling needs
➥ Value

Dia 47

Dia 48

53
Dia 49

Dia 50 Von Restorff

Effect
Highlight CTA Draw
buttons attention

Increase Minimize
conversion choices

Dia 51

54
Dia 52

Dia 53 The Zeigarnik

Effect

○ Incompleted tasks stick in people’s

minds
○ Keep visitor motivated
○ Encourage to act
○ Used in:
➥ Online purchase steps
➥ Account creation
➥ (Forum) rankings etc.

Dia 54 Faber Birren

★ Red, Orange, Yellow
● Colors related to our: ○ warm
○ senses ○ active colors
○ language ○ Joy---excitement---violence
○ surroundings
○ personal features
★ Blue, Green, Purple
● Perception of color X ○ cool
emotions ○ passive colors
○ Calmness, tranquility,
coldness, depression

55
Dia 55 Marketing colors and their role
Green
Purple Black
Health, power,
Royalty,wisdom, Authority, power,
nature,
respect, problem- stability, strength
relaxation,
solving, creativity
environment

Red Blue Orange

Sense of urgency, Peace, water, Promotes
encourages tranquility, optimism, sense of
appetite, reliability, sense of caution, impulsive
physically security, promotes buyers and
stimulates body trust window shoppers

Yellow
Promotes Grey White
optimism, Practicality, Purity, cleanliness,
energetic, warm, solidarity safety, creativity
creative

Dia 56
Marketing colors and their role

Dia 57 Mcdonalds

● Use contrasts

Color palette:

Encourages Optimism
appetite

56
Dia 58 Starbucks

❏ Promotes relaxation

Dia 59 Blue logos

● Helps to relax
● Trust
● Helps to be creative
● Reliability

Dia 60 Orange and Yellow logos

● Standing out as:

○ Beacon
○ Youthful enthusiasm
● Vibrant

57
Dia 61 Black logos

● Timeless
● Elegant
● Exclusive
● High-end experience

Dia 62
Assignment 2

• 4 people in a group
• 20 min
• Create a web page for your
DMP organization
• Utilize all the information
you have learned today

Dia 63
Goals

✔ To understand the importance of the trends and which trends to look out for

✔ Create awareness for possible website mistakes and how to regulate them

✔ Understand different types of psychological strategies

✔ Understand the influence of colors in digital marketing

58