What is your website about

What should your website look like?

»What should your website look like?«Covers the planning and design work that you do, before You start writing code. This includes questions such as "What information should my website provide?", "Which fonts and colors do I want to use?" and "What should my side do?"

First things first: plan

Before you do anything, you need an idea. What should your website actually do? A website you write could do anything you know on the internet, but keep it simple for starters. We're going to create a simple webpage with an image, a heading, and a few paragraphs.

At the beginning you should answer the following questions:

  1. What is your website about? Do you like dogs, Berlin or Pacman?
  2. What information do you show on your topic? Write a title and a few paragraphs and think about how you would like to visualize the topic, e.g. with a graphic or a picture.
  3. What should your website look like? (Keywords suffice) Which colors and color combinations would you like to use? Which font is suitable: formal, comic-like, striking or subtle?

Note: Complex projects require detailed guidelines that cover all details on color, font, spacing, writing style, etc. These guidelines are sometimes called the "Design Guide" or the "Brand Guide". For example, the Firefox OS Guidelines are such a document.

Outline your design

Use a pen and paper to roughly sketch out what you want your page to look like. Where should the picture go and where should the text content? How big should the headline be?

There isn't too much to draw on your first website, but you should get into the habit of working out the website's design before you start developing it. This helps with planning and developing ideas - you don't have to be an artist for that!

Note: Even with real, complex websites, the design team usually starts with rough sketches on paper. Later, digital mockups are implemented in a graphics program or with web technologies.

Web teams often include both a graphic designer and a user experience (UX) designer. Graphic designers design the look of the website. UX designers have a more abstract task: They shape the user experience and interaction.

Content and appearance determined

Now you can put together the content of the website, i.e. the things that will ultimately be seen on your website.

text

You probably still have the headings and paragraphs you wrote earlier - use these as the first piece of text.

Main color

To choose a color, use the color picker and choose a color. If you click on a color, you get a strange six-character code (e.g. # 660066). That is a Hex (adecimal) code and it represents a certain color. Save this color code or write it down somewhere.

images

To select an image, go to Google Images or Flickr and search for a suitable image.

Danger: Most of the images on the Internet are protected by copyright. That means you can't just use them - even if the images can be viewed on the Internet without any problems and the images can be saved.

How to find pictures that you can use:
- Select "Usage rights" / "Marked for reuse" on Google Images
- Select "" on Flickr.
In both cases you have to quote the author's name.
More about copyright on irights.com

Once you have found an image that you want to use, do the following on Google Images:

  1. Click the image.
  2. Select "View picture".
  3. Right-click on the picture and select "Save graphic as ..." or copy the Internet address of the picture and save it.

At Flickr

  1. Click on an image.
  2. Click "Download this Photo" and choose a suitable size.

font

Choose a font:

  1. Go to Google Fonts and scroll through the list until you find a font you like. You can also use the filters on the right to filter the selection.
  2. Click the "+"Button for the desired font.
  3. A popup box will appear. Click on the "* Family Selected" Button at the bottom of the page. ("*" depends on how many fonts you have selected).
  4. There are now two codes in the popup box. You can copy these and save them for later in any text editor.