Web Design

Basics of Web Design

The trend of the times now leans heavily on the use of technology. Being tech-savvy is now a very
important skill that people need to have. This isn’t so hard for Millennials and even the Gen X, but for
Baby Boomers, technology can be highly uncomfortable and unfamiliar.

A lot of industries use and need technology. Anywhere from businesses, politics, education, and even
religion, among others, make use of technology in their transactions. Gone are the very traditional ways,
and we are now in the middle of the developing tech era.


Businesses use technology to further their business agenda like selling online, marketing on social media sites, and even going so far as to interact with customers and troubleshoot basic problems on their websites using a chat bot. Schools use technology when it comes to making enrollments easy, helping students keep track of their grades and their classes, and some even do online classes when the teacher is far away.

The internet

The internet – or the web – is the most used product of technology, and nowadays, it’s hard to find someone who can’t navigate the web! The internet is so convenient because of the fact that you can find almost everything on it. There’s Google for your questions, Facebook to keep in touch with friends and family, and there are a lot of choices in receiving and sending electronic mail. And the newest trend online are blogs – fashion, travel, cooking, and more. Anyone can start a blog, and most certainly, anyone can build a website.


creating a website

Before creating a website, decide on your content. Are you making a blog? A website for your business? A page for games?

Once you’ve determined why you’re making a website, it’s time to choose the service that will help you start one. There many options to choose from – WordPress, Wix, Blogger, Medium, etc., the list goes on. All you need to do is pick a site, sign up, choose a Site Name, then design your very own website.


The basics of web design are very similar to design on print. The most important elements to remember and understand are navigation, layout, fonts, colors, and content. And what matters most is that you know how handle and put these all together to convey your message effectively.

If you know the basics of print design, then you won’t have a hard time shifting to web design, because the key to creating a good web design lies in being a good designer. But if you don’t have even the basic knowledge or skill on design, then this article is for you.


1. Layout

Web layout design is very important in terms of visual communication. The overall look of your site is one of the crucial components of web design. It’s the first thing your visitors see, and first impressions last, so you need to be careful about how you’re presenting your site. Your site’s first look will determine if the users who visit it will stay or leave.

Your design doesn’t have to be complicated or crowded. A simple and accessible site is better over a site that’s full of images, a mix of colors, and too many words. Whitespace, padding, or margins will greatly help give the elements on your site room to breathe, and following a grid on your content will keep it neat and orderly. Each piece of your website should be arranged according to what you want your visitors to see first. Using your design, you can direct visitors’ eyes and influence user interaction on your site.

It’s nice to have photographs or other graphics supplement your text, but make sure that they don’t clash with each other and conveniently portray the brand that you want your site to represent.

2. Colors

Colors add to the brand identity of your site, it flows through all pages of the site, and even goes into both print and digital marketing materials. When you start designing your site and you click on a color palette, make sure you don’t mix and match then end up with colors that don’t work well with each other.

First, choose a dominant color that you would like your site to showcase. This color, or two dominant colors, will build the identity of your site. Next, consider the color palette you would like to use. You can consult a color wheel to help you out with your decisions at this point. The different kinds of colors you can use for your site are:

1. Complementary colors – balance and harmony
2. Vibrant colors – creates emotions; best for icons and badges
3. Contrasting colors – best for text and background to make it easier for reading
4. White spaces – will give your site a modern and breathable look

Test your color palette on the preview panel of your site before applying all the changes. This is important when you’ve already established your site, there are a lot of visitors, and the link is public on the internet.

3. Fonts or Typography

There are a lot of new fonts that look fun and cute, but if you want something that’s functional, practical, readable, and professional, choose a font that’s the most appropriate. The two font families that will help you create the perfect site are Serif and Sans Serif. It may sound like mumbo-jumbo, but these two are very different from each other.

Serif fonts have the bits hanging off the edge of the letters, and a prime example for this font family is the Times New Roman font. This family is best for sites whose audience is made up of more formal roles like lawyers, accountants, or teachers.

Sans Serif fonts, on the other hand, are very simple fonts without the edges. An example for this font family is the Arial or the Calibri font. This typeface is best suited for photographers, students, or people who prefer a clean and minimalist page.

A lot of people recognize Times New Roman and Arial right away, so it would be a good idea to use the new fonts that usually come pre-installed in the various programs used to create websites to give your own site a fresh, new feel. Your text should be easily readable, and it’s nice to use more than one font to avoid the page looking drab and boring. However, the rule of thumb is usually this: don’t go beyond three typefaces or having unnecessary font sizes.

4. Navigation

This element is technically defined as how users get from one page to another. It provides users movement and gives visitors a chance to explore your site well. Good navigation helps people take action, move around your site, and stay longer as they browse through its content.

Although we’re talking about design, and design is usually paired with being creative, the navigation element is generally not where you should express your creativity. Avoid the tempting call of animations, hover effects, and complex sub-levels. Navigational elements include a site’s header, body, menu, and footer. These all exist as directions for your site visitors to the content they are looking for, and a great navigational set means taking them there as quickly as possible.

Often times, sites with long articles put a [Back to Top] link at the bottom of the page to help users get back to the header and the beginning of the article with just one click. Another tip is to never forget about the footer navigation menu. Your site should have a main menu at the top of the page, but users also scroll further than one might think, and a footer at the end of the page can help visitors click on other site content. If you have a blog, the footer is one of the best places to put a [Subscribe Now] button so they can receive e-mail updates whenever you post something new. And if you’re a business, then the longer your visitors stay on the site, the higher the likelihood that you can sell something to them.

5. Content

This may be the last element of basic web design, but it is not the least important. A great design with all the right colors, menus, fonts, and layout will not matter if there is nothing on the site. There is no use to having a perfect website design if you have nothing to put in your site or if your content is confusing, uninteresting, or unrelated to each other.

Your content must interact well with your design. The message that you want your reader to know and understand is capped off with what your site has. Site visitors or potential customers want to see the information that they need to know quickly and clearly. What matters to them is the reputability of your brand, its experience, quality, and more. People live in a fast-paced environment, and if you want them to stay for a long time on your site, you need to capture their attention in the first minute that they’re on the home page.

Communicating your message is critical, and if done wrong, could cost you thousands in terms of viewership, subscribers, customers, or even money. Which is why it is important that the information you have on your site is easy to find and read.

There’s no need to fill your home page with a series of paragraphs. Keep your sentences short and sweet. No extra words need to be inserted in every phrase, as this could dull the strong points of your page. Lists are even okay, as long as they are engaging and fun.

Apart from your home page, don’t forget about the Contact and About pages that you can put on your site. Although your home page should already show the general purpose of your site, the About page provides a thorough and detailed background of who you are (if you’re a blogger), how the business came about (if you’re a company), and any other information vital to keeping your site visitors on your site. The Contact page is also very important because this is where people can send a message if they have questions, report unsatisfied transactions, or know where to find your business.

These five elements make up the fool-proof package to designing your own website. Once you’ve got the hang of these, you can explore more about design by looking for tutorials on how to use Adobe Photoshop, Adobe InDesign, and Dreamweaver. If you would like to learn the basics of HTML and CSS coding, sites like W3Schools, Google Code University, and Code Avengers are your best options.


Koi Princess Slot is an example of a website that uses the different design elements. The site is an avenue for casino gaming wherein slot machines are made more interesting because it has an anime vibe to it. The home page of the site tells you what the game does, the bonuses and features that makes it better than your average slot machines, and the large payout that you could get if you played.

If users have any questions, the menu bar at the top of the page allows them to read a guide on how to play Koi Princess. It also shows how online video slots work. Based on the site, there are a lot of ways to play Koi Princess, but if you want to take the most advantage of it, playing the Special Bonus Bet will trigger the bonus features. It is important to remember, however, that if you play below the bonus or the max bet, you won’t be able to have the best playing experience, and you will miss the chance to have a big payout with extra bonuses.

If you want to relax while playing, there is an autoplay feature that you can enable in the game. Doing so will give you more time to enjoy the graphics and the scenery that makes Koi Princess unique. It is the fact that you do not need to travel far to enjoy East Asia that gives their slot machine games an extra kick.

There is a lot of fun on the internet, so if you want to try building your own site, look for websites that follow the five elements of design and get some inspiration from it.