Web Hosting, Design

Patterns & Colour Theory

Sean Preston
What you’ll learn today…
1. Understand the different forms of web hosting available.

2. Understand how design patterns have developed.

3. Understand how the use of effective design patterns can improve

UI/UX.

4. Understand how to apply colour theories to support your choice of

a colour scheme.
Web Hosting
Hosting Services: Shared Hosting
• You and other websites share one servers resources.

• They are normally the cheapest form of hosting.

• Can be slow, as you’re relying on other users websites not being

resource heavy.

• If another website on the server gets hacked or experiences a DDOS

attack it could also take your website offline.
Hosting Services: Virtual Private Servers
(VPS)
• More control than shared hosting, however you are still sharing the
servers resources with other websites/VPS’s.

• Quick to launch and setup.

• More expensive than shared hosting, but less than a dedicated server.

• Rapidly becoming replaced with cloud services.

Hosting Services: Dedicated Servers
• It’s a dedicated environment. You have access to all the resources available
on the server.

• They’re normally hosted in a datacenter and you rent usage of the server.

• They’re expensive and don’t handle sudden growth very well. E.g. If your
website was to suddenly become popular, requiring a hardware upgrade
the server would need to be taken offline to upgrade (of course you could
have setup multiple servers to handle this, but this would incur further
costs).
Hosting Services: Collocated Servers
• Same as dedicated servers but you purchase your own server and
hardware and pay for a datacenter to house it.

• Can be cheaper, especially if you plan on hosting the server for a long
period of time.

• More control as you can make hardware upgrades at your convenience.

However, this would normally require you travelling to the datacenter or
paying a service fee for a technician to complete the work.
Hosting Services: Cloud Servers
• The newest form of server infrastructures.

• Very affordable, Able to run a server for a few minutes or a few years.

• Excellent if you have a resource heavy task/script that you need to run once with a
server worth £1,000+ per month, per-minute billing can make this possible without
paying £1,000+.

• Can sometimes work out more expensive if you host a LOT of websites. In which case a
dedicated or co-location service may be cheaper.

• Services such as AWS, Google Cloud, DigitalOcean, Heroku ..

Hosting Services: Local Web Servers
• Used for local development only.

• Need to ensure the local development environment matches your live

environment else when launching or releasing your website errors could
occur. E.g. you used a function which is only available in the version of
PHP on your local server but not your live server.

• Tip: Develop using Linux OS and you’ll normally have a local

environment as default.
Quiz
When developing for a large 1. Shared hosting
client, what web server is best? 2. Virtual Private Servers (VPS)
3. Dedicated Server
4. Collocated Server
5. Cloud Server
6. Local Web Server
Quiz
When developing for a large client, 1. Shared hosting
what web server is best?
2. Virtual Private Servers (VPS)
It depends!
3. Dedicated Server
4. Collocated Server
We wouldn’t use shared hosting,
because shared services share the 5. Cloud Server
server's resources among multiple 6. Local Web Server
customers. Therefore, if another
customer was to receive a peak in
resources it could affect your client's
website!
Quiz
When developing for a large 1. Shared hosting
client, what web server is best? 2. Virtual Private Servers (VPS)
3. Dedicated Server
It depends! 4. Collocated Server
Although multiple VPS’s are on 5. Cloud Server
the same server, they can be 6. Local Web Server
still be prone to downtown as a
result of peaks in activity on
other VPSs on the same server.
Quiz
When developing for a large client, 1. Shared hosting
what web server is best?
2. Virtual Private Servers (VPS)
It depends!
3. Dedicated Server
4. Collocated Server
A dedicated server or collocated
server is the most common solution, 5. Cloud Server
however can be expensive. It can 6. Local Web Server
also restrict growth! If your client
has a flash sale, can the dedicated
server handle the traffic?
Quiz
When developing for a large 1. Shared hosting
client, what web server is best? 2. Virtual Private Servers (VPS)
3. Dedicated Server
It depends! 4. Collocated Server
A local web server simply 5. Cloud Server
would not be practical. 6. Local Web Server
Quiz
Cloud hosting services are the 1. Shared hosting
perfect solution! (in most cases) 2. Virtual Private Servers (VPS)
They’re usually much cheaper
than a dedicated server. They 3. Dedicated Server
can be increased or reduced in 4. Collocated Server
size in seconds when required
(even automatically!). 5. Cloud Server
6. Local Web Server
However, they require server-
side expertise which can be
expensive to hire!
Adv Web App Dev
• If you take the Advanced Web Application Development module next
year, you will re-visit web hosting.
Design Patterns
Skeuomorphic Design
• Can be more “natural”
• Easier to learn
• Not on trend
Flat Design
• On trend

• Easier to use (if you are used to

modern UIs)

• Long Shadows are popular in flat

designs at the moment.
Skeuomorphic Vs Flat Design
• Flat designs are crisp and more user friendly to use.
• Skeuomorphism can look more “gloss” and realistic. - Do we need this?
• Flat designs usually result in a better UI and structured colour scheme.
• Skeuomorphism can be more natural and familiar to users.
15min Activity
• In your groups, can you think of any examples where a company has
changed it’s design/UI from being Skeuomorphism to Flat?

• Tip: Think of the big tech companies, most have gone through this
change over the past 5-6 years.
… and then there’s Material Design
• You could say Material design uses both skeuomorphism and flat design
techniques. Although it is more flat.

• Developed by Google

• Used throughout most Google

apps (especially mobile apps)
Navigational Design
Patterns
Grid Systems/Layouts
• We’ve covered grid systems
before.

• They divide the page into rows and

columns.

• Improves spacing, layout and

RWD.
Breadcrumbs
• Common on e-commerce
websites.

• They allow the user to understand

their location within a website’s
hierarchical structure.

• Can improve SEO.

• Should replicate URL structure.

Wizards
• Common on e-commerce or booking
websites.

• Used when a reasonable amount of

data input is required from the user
(i.e. shipping and billing address)

• How do you think this benefits the

user?
Progressive Disclosure
• Similar to wizards, progressive disclosure
hides unnecessary content.

• Users can then choose to view this content

if they wish.

• Common on review systems or FAQ pages.

Infinite Scrolling
• When a website is displaying a lot of,
typically paginated content, infinite
scrolling can improve the UX.

• Common on e-commerce sites and

social networks.

• How do you think we might manage

loading such a large amount of data?
Responsive Design
Patterns
Hamburger Button
• A menu/navigation trigger represented by three
horizontal lines.

• Has become commonplace due to mobile.

• Often allows the user to close the menu without

selecting an option.
Pull-to-Refresh
• Used to request updated
dynamic content.

• A loading indicator should

appear.

• Mobile only.
One-Finger Mobile Layout
• Less of a technical implementation and more
of a typical design pattern.

• A consideration for how the user grips their

mobile device.

• Ensures important navigation items aren’t at

the top of the display.

• Unfortunately, it can be difficult to

implement when the display is already small
in size.
Colour Theory
As web designers why do we study colour
theory?
• To create visually pleasing colour schemes and designs

• To understand the interaction of colours in a design through

complementation, contrast, and vibrancy.

• To understand the emotional impact colour has on our users.

Complementation
• Complementation refers to the way we see colours
in terms of their relationship with other colours.

• When colours occupy opposite ends of the colour

spectrum, they lead people to consider a design
visually appealing by establishing a happy medium
the eye can reside in.

• Colours close together on the colour wheel can

cause the user's eyes to strain to accommodate.
Contrast
• Contrast reduces eye strain

• It can be used to focus the user's attention on

areas of your website

• A lack of contrast can make your website

inaccessible for visually impaired users.

• A lack of contrast can have a negative (although minor)

effect on your Search Engine Ranking Position (SERP)
Vibrancy
• Vibrancy -> Emotion

• Bright colours will make your user feel energetic which is particularly
useful when wanting to advertise a product or brand.

• Darker colours relax the user

• Bright colours tend to be more popular in

flat designs
The meaning of colour
• Green + Red = Christmas! (Unless you’re selling tinsel this could be a
problem!)
• Blue = Sea, Sky
• Red = Warning, anger (Western), Luck (China)
• Yellow = Sun (Western), Royalty and Power (China)
• Green = Land, Nature, Eco-friendly
• Pink = Girly, Feminine
• Black = Dark, Horror, Gaming, Night etc
So, how do you choose a colour scheme?
• Also known as “Colour Harmonies”.

• There are three recommended ways to choosing a colour scheme for your
application:
• Triadic Color Scheme
• Compound Color Scheme (aka Split Complementary)
• Analogous

• You could also look into Split-Complementary, Rectangle and Square

colour schemes.
Triadic Colour Scheme
• Uses colours evenly spaces around the wheel

• Triadic colour schemes tend to be quite

vibrant

• To use a triadic harmony successfully, the

colors should be carefully balanced - let one
color dominate and use the two others for
accent.
Compound Colour Scheme
• Colours opposite on the colour wheel =
Complementary colours

• Complimentary colours are hard to use in

colourful designs

• Complementary colors are really bad for text.

Analogus
• Colours close to each other on the colour
wheel are known as Analogous Colours.

• Analogous color schemes are often found in

nature and are harmonious and pleasing to
the eye.

• Make sure you have enough contrast when

choosing an analogous color scheme.
10min Activity: Adobe Color CC
• Allows you to discover colours that work well together

• https://color.adobe.com
15min Activity
• Browse the internet for popular websites

• Find 3 that have a clear consideration towards colour theory

• E.g. http://www.globaltimes.cn/ uses red which portrays trust in

Chinese cultures
 Once you have
completed the activities
in a lesson you should
work on your assignment

Activities