What will my website look like?

Before doing any coding, one needs to know what exactly the site will be doing, what colors will be there, images and what information will it be displaying before anything else. It’s best to have the content written up before anything else.


Here we will make it simple with just getting a heading, paragraphs and an image. You need have answers for the following

  • What is your website about?
  • Do you like dogs, Nairobi, or Cooking?
  • What information are you presenting on the subject?
  • Write a title and a few paragraphs and think of an image you’d like to show on your page.
  • What does your website look like, in simple high-level terms?
  • What’s the background color?
  • What kind of font is appropriate: formal, cartoony, bold and loud, subtle?

Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide, design system, or brand book, and you can see an example at the Firefox Photon Design System.


Sketching out your design

Next, grab pen and paper and sketch out roughly how you want your site to look. For your first simple webpage, there’s not much to sketch out, but you should get in the habit of doing this now.

Web teams often include both a graphic designer and a user experience (UX) designer. Graphic designers put together the visuals of the website. UX designers have a somewhat more abstract role in addressing how users will experience and interact with the website.

Choosing your assets

Here we go:


You should still have your paragraphs and title from earlier. Keep these close by.

Theme color

To choose a color, go to the Color Picker and find a color you like. When you click on a color, you’ll see a strange six-character code like #660066. That’s called a hex code (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now.


To choose an image, go to Google Images and search for something suitable. When you find the image you want, click on the image to get an enlarged view of it. Right-click the image (Ctrl + click on a Mac), choose Save Image As…, and choose a safe place to save your image. Alternatively, copy the image’s web address from your browser’s address bar for later use.

Note that most images on the web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google’s license filter. Click on the Tools button, then on the resulting Usage rights option that appears below. You should choose an option such as Labeled for reuse.


To choose a font:

  1. Go to Google Fonts and scroll down the list until you find one you like.
  2. Click the “plus” (Add to) icon next to the font you want.
  3. Click the “* Family Selected” button in the panel at the bottom of the page (“*” depends on how many fonts you selected).
  4. In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.

My idea is directory kinda website and not simple so I will not explain here yet.

Moving on swiftly…