Read Later

Select Discard

Introduction

This is a designing tutorial about programming a customer interface without implementing any server side language for beginners...

Tags

CSS HTML Grid Layout Fonts Font Awesome Internal Linking Linear Gradient Mobile Version Viewpoint @media meta User Experience

Share

• Share
• Share
• Share
• Share
• Share

Introduction

This is a designing tutorial about programming a customer interface without implementing any server side language for beginners. It is hard to find a theme or a pattern to begin coding without any instruction and so is very challenging to create new ideas without a template. I wanted to explain how to design a customer interface by using html and pure css in a basic and rudimentary form and, of course, you could take this project further by implementing a server side language on the source code, such as php and python. If you know nothing about making grid layout, implementing new fonts, using liner gradient as background, implementing Font Awesome icons, internal linking and using @media query for mobile version, this tutorial and its example project might help you to understand these concepts.

For more information about the code files, please visit Source Code section below.

Demonstration

Step 1: Grid Layout

First of all, I recommend you creating a div that contain all customer interface elements to move it just one line of code, named Interface.

Now, you have a template to define its parts to create a grid layout according to the elements you want Interface to contain. In this case, I used two main section to show the customer data, named order and personal. Also, I made a header div to contain the opening message - Welcome New User - named username.

After defining all sections by using position, width and height properties, it is ready to collect the customer information.

Step 2: Fonts

To make the customer interface more stylish, you have to use a unique font design, you can find various font types on Google Fonts.

After linking the font style you want to use, in this tutorial Allerta+Stencil, as explained down below.

<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" >

Step 3: Font Awesome and Page Icon

Font Awesome is a website which allow you to implement disparate free icons and logos unless you want to use special ones by subscribing, and it is easy to implement them on any page, just using one line of code.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" >

Whatever .png, .svg or .ico file you want could be the page icon if it is in right size, defined at the source code below.

<link rel="icon" type="image/png" sizes="36x36" href="order.png">

Step 4: Buttons and Internal Linking

Using a tag and button tag combination is one of the most common ways to create internal links for panels like dashboard and customer interface.

Along with background, height, width, border and border-radius css properties, you can add button:focus{outline:none;} line on css file as I did to remove blue button border after clicking.

And, I recommend you to use css :hover selector to make a color effect astonishingly.

Step 5: Linear Gradient and Element Styling

In order to make a color shift as background, you have to css background-image property and it is very simple to define direction and colors as explained down below.

In this tutorial, I used from bottom to right white slategrey color shift and #262626 as button primary color, you can inspect other colors I implemented at customerInterface.css down below.

.Interface{position:absolute; top:0; left:0; width:100%; height:100%; background-color:#cccccc; background-image : linear-gradient(to bottom right, white, slategrey, white);}

.order button, .personal button{background-color:#262626; border:5px solid #404040; border-radius:5px; width:80%; display:block; margin:auto; font-size:30px; cursor:pointer; transition : 1s;}

Step 6: Other Pages

In order to improve the user experience, you have to create other html pages related to the customer interface, containing personal data and order information. It is not a subject of this tutorial but you might have to use server side languages to save and recall user information from the database like MySQL. You can find more information about server side languages here.

After integrating pages, you can create them at the location you choose as html files(or php).

In this tutorial, I integrated customerInterface.css file as stylesheet of the other pages I navigate but you can create different design patterns for each as practice.

Step 7: Mobile Version

It is essential to create a mobile version for the customer interface even though it is just a tutorial for designing a web customer interface as a beginner because you will probably have 60% of your customers from mobile devices according to Google Search Console.

In order to define viewport scale, use this line with meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

After that, you will be able to overwrite any property for a defined size range for mobile devices by using @media query.

@media only screen and (max-width: 800px) { ... }

Now, the mobile version of the customer interface is ready to be executed for this tutorial.

Source Code

Please sign in to download source code files below as zip folder, including index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Customer Interface</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- define icon sizes -->
	<link rel="icon" type="image/png" sizes="36x36" href="order.png">
    <link rel="icon" type="image/png" sizes="48x48" href="order.png">
    <link rel="icon" type="image/png" sizes="128x128" href="order.png">
    <link rel="icon" type="image/png" sizes="192x192" href="order.png">
	
    <!-- link to customerInterface.css file -->
    <link rel="stylesheet" type="text/css" href="customerInterface.css">
	
    <!-- link to FontAwesome-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">   
    
	<!-- link primary font -->
	<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet">
	
</head>
<body>

<div class="Interface">

<div class="username">
<h1><i class="fas fa-user-cog"></i> Welcome New User</h1>
</div>

<div class="order">
<br>
<a href="orders.html"><button>Orders</button></a>
<br>
<a href="shoppingList.html"><button>Shopping List</button></a>
<br>
<a href="wishList.html"><button>Wish List</button></a>
<br>
<a href="giftList.html"><button>Gift List</button></a>
<br>
<a href="products.html"><button>Products</button></a>
<br>
<a href="cart.html"><button>Cart</button></a>

</div>

<div class="personal"></a>
<br>
<a href="addresses.html"><button>Addresses</button></a>
<br>
<a href="email.html"><button>Email</button></a>
<br>
<a href="personalInformation.html"><button>Personal Information</button></a>
<br>
<a href="giftCards.html"><button>Gift Cards</button></a>
<br>
<a href="creditCards.html"><button>Credit Cards</button></a>
<br>
<a href="logout.html"><button>Logout</button></a>

</div>

</div>

</body>
</html> 

h1, button, p{font-family: 'Allerta Stencil', sans-serif;color:white;}

button:focus{outline:none;}

.Interface{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#cccccc;background-image:linear-gradient(to bottom right, white, slategrey, white);}

.username{position:absolute;top:0;width:100%;height:20%;background-color:transparent;}
.username h1{text-align:center;}

.order, .personal{position:absolute;top:20%;left:0;width:50%;height:80%;border:none;background-color:transparent;}
.personal{right:0;left:auto;}

.order button, .personal button{background-color:#262626;border:5px solid #404040;border-radius:5px;width:80%;display:block;margin:auto;font-size:30px;cursor:pointer;transition:1s;}
.order button:hover, .personal button:hover{background-color:#404040;}
.order a, .personal a{text-decoration:none;}

@media only screen and (max-width: 800px) {
	.Interface{height:auto;}
	.username{position:relative;height:auto;}
	.order, .personal{position:relative;top:auto;left:auto;right:auto;width:100%;height:auto;}

}