CheAtsheet

What is a design interface?

Design interface are the way that elements such as UI

Design

components are positions for different parts of the website,

similar to a wireframe. You can change their position and
layout to create common interfaces such as headers, heroes,
sections and footers in many different ways.

Interfaces
By Enhance UI
How to use a design interface?

You can copy the design interface layout to your own web
page, and then code or update the colors, images and text to
represent the product or service you provide. This makes the
This cheatsheet is a compilation of design interfaces that
design process quick and easy without having to consider
can be used for creating a user interface for a website or
layout options.
application.

1. Headers
Combine a logo, navigation menu and contact info to create a header

contact inform... info

navigation menu navigation menu navigation menu

Traditional Header
Centered Header
Empty Header

Left side logo with a navigation bar that spans Logo is center aligned, allowing half the nav-
Less is more, by hiding the menu, we have no
across, with contact information on the top right. menu to be on both the left and right sides. distractions and more focus on the content.

2. Heroes
Your hero appears after the header, is loud and proud, declaring who or what they are and what they do

Hero Text One Hero Text Three

A small hero description no more Hero Text Two
than a line or two
call to action
A brief example where the user can try
call to action secondary the service out.

try now

Traditional Hero
Video Hero Product Demo Hero
A title, description and image introduce a Full screen video works to introduce the product Let users try a demo example of the service
product or service, with a bright call to action or service, requiring only a title or call to action straight away, helping them get a clear vision of
button, or secondary to provide more info. to act as the conversion. how it works.

3. Sections
Your hero appears after the header, is loud and proud, declaring who or what they are and what they do

Section A Alternating Sections

The first section stars with a title and description on the left hand side, and an
image on the right hand side that provides context for the section. It ’s simple and
As the name suggests, alternating sections is a simple way to display the body
easy to execute. Most sites use this effective type of section design. of your website repetitively while keeping the look dynamic.

This type of interface design is used to often display features for a produce or
service on a website, as often many features might exist.

Be careful to to overuse the alternating sections too often, as any more than 3-5
Section B can cause the user to tune out. Instead adapt different section designs after
The second section is a mirror of the first, however the image starts the section, using this type of section.
and the text for the header and description alternates to the other side. This
allows it to feel dynamic while similar to the previous section.
 Desktop Example Mobile Example

Column Sections
The column section interface shows 3-6 items in
a single row. It can be used with an image, title Section A
and description.

Mobiles should have less text

Section A Section B Section C Features are a good place to use column

that is straight to the point.

Sections can be seperated by Each section should have a A column section is useful to
sections, where the image could be a preview of
columns that help to quickly single line for the title, and a be placed near the start of the
showcase more features on a similar length for it’s short page, or near the bottom the feature or an icon that represents it.

single screen viewing.

description.

before a footer.

For a mobile view, this section can collapse and

A good image and title is used
to showcase the feature, with
Having varied sizes such as
two lines for the title may
Create a column section
showcasing features, services be easily scrollable. Section B
a short description. cause it to look aloof. or products for your site. Text can be left align but
sometimes also centered.

Grid Sections
Section A A grid section allows you to showcase many services and features. It can be a
When trying to showcase many sevices, it’s useful to break them down grid of 2x2, o 4x4, or 2x4 etc.

into smaller form, where you have sub-sections with images and short
descriptions of what they are.
Such a grid is useful however it will mean less information is showcased. Ideally
Sub-Section 1 Sub-Section 2 a small image, title and one line description is enough.

This is a small subsection that has a brief This is a small subsection that has a brief
about a service or feature. about a service or feature. Similar to column sections, these grids can collapse for the mobile version to a
Sub-Section 3 single column making for easier reading.
Sub-Section 4
This is a small subsection that has a brief This is a small subsection that has a brief
about a service or feature. about a service or feature.

4. Footers
Your hero appears after the header, is loud and proud, declaring who or what they are and what they do

Company Name Sub-menu 1 Sub-menu 2

A small company description Home
Support

no more than a line or two

About
Documentation

contact button
Services
Guides

1 Address Street 12345

Features
Blog
Company Name
1300 300 300 Phone
Team
Terms
A small company description no more than a line or two
email@[Link]
Contact Us Privacy
Support Line Home About Services Features Team Contact Us

Copyright Information

Copyright Information

Traditional Footer
Centered Footer

Simple footers include company details on the left, with contact information, When dealing with a smaller website, a centered footer which has less menu
and a repeat of the menu on the right two columns to help in case a user items can be used. It offers the basic menu from the navigation once more
missed the information they were looking for. but without all the extra information such as contact details.

Contact Form Did you not find your answer,

Bonus: Contact Form & Newsletter
Newsletter Signup
submit this form

Sign up to the newsletter, we promise not to spam you full name message... Add a contact form and newsletter in the footer
sections to help users better navigate.

email address submit email address

Often fif someone reaches the end of the pages,
submit they will be likely to want more information.

Enhance UI
Design for Developers
Learn the fundementals of web design, which will help you create
better looking websites, user interfaces and experiences. Doing so
has an impact on your work, freelancing, which leads to earning more
money and a better job.
Website: [Link]
Twitter: [Link] I hope you enjoyed this cheatsheet, check out the full edition of
Enhance UI book, Design for Developers which will go into detail
Youtube: [Link] about design, ui, ux and much more!
5. Cards
Containers that hold information

Heading Three
A small description about the
content no more than a line or two
call to action
Label

Heading One Heading Two

A small description about the content no
Description. Lorem ipsum dolor sit amet, more than a line or two
consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibu

call to action

Traditional Card
Clickable Card Mobile Card
A title, description and image to introduce a Button can be omitted, and the whole card can Layout of the card can be adjusted to fit
product or a service, with a bright call to action be clickable instead. different viewport sizes. On mobile or list view
button, usually left align. this format is the most common.

6. Sidebars
Vertical navigation menu

Company Logo

Home User Name

Projects Home

Calendar Projects

Settings Calendar
Settings

User Name

Traditional Sidebar User Sidebar Collapsed sidebar

Vertical navigation menu with company logo and Usually used on social media. You can add the This layout is usually used to allow the user to
user information. Usually sitting on the left side user photo and name instead of the company get more space on the viewport for he main
of the viewport. logo to make the sidebar hold the user content, useful on smaller screens.
information.

7. Carousel
Show collections of items

Traditional Carousel
Scaled Carousel
Items, navigation controls and dot indicators that display the number of Another option, without the dot indicators, and fade in/out effect that
items in the carousel, with the current item highlighted. The dots can also highlights the selected item. This makes use of visual hirerchy to create a
be used to navigate. focal point on the main, selected image.
8. Navigation Bar
Links to sections or pages in the website

Traditional navigation bar

Home Store About Link with the name of the different sections/pages. The name of the selected section is highlighted
with color to indicate the user’s location at the moment.

U nderlined navigation bar

Home Store About Similar to the traditional navigation bar, with another type of highlighting. In this case the current
section is accentuated with a color line.

Ic on navigation bar
Commonly used in mobile layouts, but it can be used in web design as well. You can add the
name of the section below if you want too.

9. Testimonials
People’s opinion about experience with the product

Full Name
Full Name
Who is this person

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. consectetuer adipiscing elit.
Aenean commodo ligula eget Aenean commodo ligula
dolor. Aenean massa. Cum eget dolor. Aenean massa.
sociis natoque penatibu Cum sociis natoque
penatibu

Traditional testimonial layout Overlapping image testimonial

Card with photo and user’s information. Full name is mandatory, and if you Similar to the traditional testimonial but there is an overlap between the
have additional information abou how this person is (like his job) you can user image and the testimonial card.
add it too. Comments, opinions and everything the user wrtote goes
below.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt. Cras dapibus.
ser
-- Uho Name
is this
W person

Testimonial without image and with watermark quote

You can ommit the image if you want. A good alternative to this is adding a watermark image like a quote, so the card does not look too plain. Don’t
forget to add the name of the user below, so it can be identified somehow.
10. Login
Credentials required to authenticate a user

Welcome! Welcome!
Username Username
example@[Link] example@[Link]

Password Password
******** ********

Sign In Sign In

Login with image

Login without image
Login form with user and password inputs, and a link to restore password If you don’t want to add an image to the login, consider to wrap it inside a
in case the user’s forgot it. You can add an image related to the application container and adding some contrast between the wrapper and the
or the company to have a more personalized look, this can be next to the background, so that it won’t look so plain.
form or as a background image.

11. Stats
Display the statistics you want the user to know

Delivering our services

Delivering our services around the world around the world
Lorem ipsum dolor sit amet, consectetuer adipiscing Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibu
20k 95% 24/7
Something Something Something
95% 24/7 20k
Something Something Something

Simple stats Stats with image

If you don’t want to add an image to the login, consider to wrap it inside a Login form with user and password inputs, and a link to restore password
container and adding some contrast between the wrapper and the in case the user’s forgot it. You can add an image related to the application
background, so that it won’t look so plain. or the company to have a more personalized look, this can be next to the
form or as a background image.

12. FAQs
A section with the most frequently asked questions

Frequently Asked Questions Frequently Asked Is cereal soup?

Questions Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Is cereal soup? If you can't find the answers
Is a hotdog a sandwich?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo you're looking for,

ligula eget dolor. Aenean massa. Cum sociis natoque penatibu contact us!
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.

Is a hotdog a sandwich? What's the best type of cheese?

Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
What's the best type of cheese?

Accordion FAQs FAQs with supporting text

If you don’t want to add an image to the login, consider to wrap it inside a Login form with user and password inputs, and a link to restore password
container and adding some contrast between the wrapper and the in case the user’s forgot it. You can add an image related to the application
background, so that it won’t look so plain. or the company to have a more personalized look, this can be next to the
form or as a background image.