By: Lany Lyn B. Magdaraog
Colegio de San Lorenzo Ruiz de Manila of Northern Samar, Inc.

Good web design always caters to the
needs of the user. Are your web visitors
looking for information, entertainment,
some type of interaction, or to transact
with your business? Each page of your
website needs to have a clear purpose, and
to fulfill a specific need for your website
users in the most effective way possible.

People on the web tend to want information
quickly, so it is important to communicate
clearly, and make your information easy to read
and digest.
Some effective tactics to include in your web
design include: organizing information using
headlines and sub headlines, using bullet points
instead of long windy sentences, and cutting
the waffle.

In general, Sans Serif fonts such as Arial and
Verdana are easier to read online (Sans
Serif fonts are contemporary looking fonts
without decorative finishes). The ideal font
size for reading easily online is 16px and
stick to a maximum of 3 typefaces in a
maximum of 3 point sizes to keep your
design streamlined.

A well thought out color palette can go a long way
to enhance the user experience. Complementary
colors create balance and harmony. Using
contrasting colors for the text and background
will make reading easier on the eye.
Vibrant colors create emotion and should be used
sparingly (e.g. for buttons and call to actions).
Last but not least, white space/ negative space is
very effective at giving your website a modern
and uncluttered look.

A picture can speak a thousand words, and choosing
the right images for your website can help with
brand positioning and connecting with your target
audience. If you don’t have high quality
professional photos on hand, consider purchasing
stock photos to lift the look of your website.
Also consider using infographics, videos and
graphics as these can be much more effective at
communicating than even the most well written
piece of text.

Navigation is about how easy it is for people
to take action and move around your
website. Some tactics for effective
navigation include a logical page hierarchy,
using bread crumbs, designing clickable
buttons, and following the ‘three click rule’
which means users will be able to find the
information they are looking for within
three clicks.

Placing content randomly on your web page can end
up with a haphazard appearance that is messy.
Grid based layouts arrange content into sections,
columns and boxes that line up and feel balanced,
which leads to a better looking website design.

Eye tracking studies have identified that people
scan computer screens in an “F” pattern. Most of
what people see is in the top and left of the
screen and the right side of the screen is rarely
seen. Rather than trying to force the viewer’s
visual flow, effectively designed websites will
work with a reader’s natural behaviour and
display information in order of importance (left
to right, and top to bottom).

Everybody hates a website that takes ages to
load. Tips to make page load times more
effective include optimizing image sizes
(size and scale), combining code into a
central CSS or JavaScript file (this reduces
HTTP requests) and minify HTML, CSS,
JavaScript (compressed to speed up their
load time).

It is now commonplace to access
websites from multiple devices
with multiple screen sizes, so it
is important to consider if your
website is mobile friendly. If
your website is not mobile
friendly, you can either rebuild
it in a responsive layout (this
means your website will adjust
to different screen widths) or
you can build a dedicated
mobile site (a separate website
optimised specifically for mobile
users).

WEB DESIGN PRINCIPLES
AND ELEMENTS
Enhance the experience
of visitors of the website
o color
Facility that the audience
can use to go through the
web site and its sub pages.
o navigation
Basic for the focuses of the
web site in the time that the
website will load or appear
into the viewer display device.
o load time
A website can be categorized
primarily in terms of the goal
it aims to fulfill.
o purpose
The arrangement of the text
should be concise and direct
to the point.
o communication
Physical arrangement of the
concept and elements on a
web.
o layouts
Is an essential factor in web
design, this is the most
dominant and noticeable in
terms of visual.
o typefaces

This might sound rudimentary, but color schemes and color
choices are very important when it comes to modern web
design. The number of colors you incorporate in your
modern design is a very important aspect. Too many colors
become visually distracting, so most modern Website
designs opt for only 2, or at the most 3 in their major
design elements.
Simplifying the color scheme of your Site makes it easier to
focus and this is why there are only minimal color
combinations in modern Website designs.

This goes along with the last modern website
Design element, but something called "white
space," is also very attractive. It doesn't
necessarily even have to be white, instead, white
space is a term used for the amount of "empty"
space - i.e. margins between your content and the
edge of your screen, and buffers between the
elements on your page. Things should have room
to breathe, if your Website is crowded, it is very
hard to direct the attention of your visitor's eye.

This modern website design element is one
that you might not notice visually, but one
that is probably the most important when it
comes to the functionality of your Site.
Behind every Website there is a great deal of
coding in the backend that will dictate how
your Website performs.

There are modern Website design elements that
can greatly improve the Search Engine
Optimization (SEO) of your Site. A lot of these are
invisible to the naked eye, and also appear in the
backend coding of your pages and posts. There are
design tricks like meta tags, title tags, heading
tags and other HTML code that can go a long way
in helping your Site climb the ranks of Google's
search engine.

As we hinted earlier, converting visitors into
leads and customers is also very important
to modern website design - and here's why:
Websites are meant to connect you with the
people who are interested in your content,
products and services. Once this connection is
made, you want to retain some sort of
relationship with these visitors.
Things like email subscription forms, free downloadable ebooks or
whitepapers, free product forms, free consultations or other invites are
great calls-to-action. These should be incorporated into your modern
Website design and are very important for gathering the contact
information (typically just an email address) of your visitors so that you
can continue conversations with them as leads and convert them into
customers.

UNIQUE AND LARGE
TYPOGRAPHY
Most companies have a particular font or typography that
they use to help their customers immediately identify them
versus their competitors. In recent years, designers have
received a larger selection of fonts to choose from, making
it easier for brands to more accurately express themselves
through typography.
For example, The New Yorker is recognized instantly
through their use of unique font, Adobe Caslon Pro. While
more unique fonts, such as Blokletters-Balpen, have begun
to be used by startups and technology companies like Zero.

Typography uses one design trend across the website to lead
readers to different parts of the page. For instance, The New
Yorker website leads visitors from one section to another
based on the typography and font sizes.
When creating your company's brand, your choice in
typography can indicate subtle hints about who you are. Are
you fun or serious? Functional or informational? Regardless of
what font you choose, be sure that your designer considers its
applicability across browsers and computers. Choosing a font
that is not supported by common browsers and computers
could mean that your website displays awkwardly on different
devices.

LARGE & RESPONSIVE
HERO IMAGES
Large images do away with the concept of above and below
the fold. By focusing on just the image with text rather than
a CTA or social buttons, Medium creates a strong visual
experience that encourages you to scroll down to read
more.
Large hero images are also often placed in the background
with text and other content overlaid on top, like on Uber's
website. Regardless of the approach you utilize, large
images can help visually tell your story without having to
rely on just text.

Your customers are coming from all over the place and
have high expectations. You may not be sure if they are
finding your website from their phone, tablet, or desktop
computer. The image that Medium uses above is
extremely powerful, but if it was only visible from desktop
computers, many people may miss it.
That said, ensuring your images are responsive makes for
a good user experience. Website visitors can look at
different images -- whether they are the background or
product images -- and be able to get the same
experience no matter what device they are coming from.

BACKGROUND
VIDEOS
Videos that automatically play in the
background can add a lot to a page. They
can be used to tell a story and significantly
reduce the amount of other content that is
needed to explain your business.

Let's take Wistia's website, for example. When you land on their
homepage a large video automatically starts playing in the background,
and by clicking on the play button, you get a deeper look at Wistia.
This background video serves as a brilliant way to get the visitor
engaged to click-through to the main video.

Background videos focus on enticing the visitor
from the moment they land on your page. The
video allows your visitor to understand the key
points about your company without ever having
to read a single line of text.
In addition, video is processed 60,000 times
faster by our brains compared to text. While
people are often hesitant to read heavy blocks of
text, videos appear effortless and can be
consumed very quickly. It also helps that
connection speeds are increasing and mobile
device sizes are growing, making for better video
experiences.

SEMI-FLAT DESIGN
Simply put, flat design is any element that
does not include or give the perception of
three dimensions, such as shadows. Not
only is flat design is easier for users to
comprehend, but it can also load more
quickly on websites without complicated
or overly-technical elements.

As you can see in the image below, the boxes have an element of depth with
shadows around them, without overdoing it. When you scroll over any of the
boxes on the Uber homepage the shadow disappears and relieves the image
behind it.

Flat design helps the visitor understand your content
more quickly, and adding some elements of depth can
bring it to life. Regardless of whether you fully design
your website using flat design or utilize shadows and
other elements, it's important to be consistent throughout
your website.
Ensure that your homepage, product pages, and any other
key sections of your website all utilize the same design
cues so that visitors can instantly understand what they're
viewing.

HAMBURGER MENU
It's likely that most websites you come in contact
with have a long menu of options to choose from.
The advantage of this is that the menu can take the
visitor directly to where they want to go. However,
the disadvantage is that they generally take up a
ton of valuable screen space.
The hidden, or hamburger menu changes this. This
menu was common in web applications before
making it's way to web design -- even in Google
Chrome you can find a hamburger menu on the
right-hand side.

Wondering why it's called a hamburger menu?
If you use your imagination, the three lines that are stacked
on top of one another look like hamburger patties. Get it?

The pages of your website should have a
clear path for the user to take. Removing a
busy navigation makes the experience
cleaner and distraction free. This improved
experiences help to improve the likelihood
that the user will find the information they
need to complete a desired action.

GIANT PRODUCT
IMAGES
You may have noticed that many B2B websites
are starting to display large product images on
their sites to highlight different features or parts
of their product. This is no coincidence.
To give you a better idea of what we're talking
about, let's take a look at the product page for
the HubSpot Website Platform:

There is a large
featured image
at the top of this
page, and as you
scroll down the
page there are
additional in-
depth product
images.
The images are
also responsive
which aims to
ensure an
optimized
experience for
viewers coming
from different
devices, as we
mentioned
earlier.

Larger product images help designers highlight different
features of a product in a more efficient and effective way.
This approach reinforces the benefits of a feature by
providing the opportunity to highlight the most valuable
pieces. For instance, in the second image, you will notice
that there are numbers on the image corresponding with
benefits of certain features.
These large images are also scan-friendly. They help
visitors generate a solid understanding of what the
different product features do by convey them through
images instead of words.

CARD DESIGN
With the rise of Pinterest, designers and
marketers alike have become fascinated with
cards. Individual cards help distribute
information in a visual way so the visitors
can easily consume bite-sized pieces of
content without being overwhelmed.

Brit + Co's homepage serves as a great example of
card design in action:
By breaking up different pieces of content into cards, users can
pick and choose which articles they want to expand. This helps to
keep the homepage feeling clean and organized, without relying
on a ton of text.

Card design is becoming more and more popular
across B2B and B2C websites because it helps
to deliver easily digestible chunks of information
for users. Using this design on your site can help
highlight multiple products or solutions side-by-
side.
Keep in mind that your cards should
be responsive. This means that as the screen size
gets smaller or larger, the number and size of
cards shown should adapt accordingly.

Short Product or
Feature Videos
In addition to background videos, companies are
also beginning to use short product or feature
videos to highlight a specific use case. These
short videos are great at bringing your solution
to life, while not overwhelming the visitor with a
long experience that they must sit through.

These short videos allow for your prospect to quickly understand value
without watching a really long, in-depth experience. Sure, both have value,
but the shorter videos allows for quick understanding that is best for top of
the funnel.