How to make a home page

In more than five years companies have well over 50 professional Let create homepages. On this page you will learn how web projects work and what you as a client should pay attention to, so that the relaunch of your new company website a success becomes.

If you’re in charge of marketing and the website, the following content is a good guide to get you safely through your next web project.

Table of contents

1. Have your homepage created: In 5 phases to the company homepage

Many companies that want a new Have your homepage created, access to the professional support of a Agency or one Freelancers back.

The 5 phases of creating a home page

As shown in the graphic above, the process of creating a website consists of the following stages:

  1. conception
  2. design
  3. Web development
  4. Content creation and insertion
  5. Publication of the website

How long does it take to have a homepage created??

Regardless of whether it is a new website or a relaunch: In our experience, most company website projects take between 9-12 weeks.

At first sight this seems to be quite a long time, because after all we all want our website to be ready yesterday. However, web projects include some correction loops as well as other phases, in which you are strongly challenged as a client. Most people somehow cut the time for this out of their ribs, as the day-to-day business is usually more urgent.

About the process: The phases of a web project build on each other. A competent partner guides you through these phases and points out the important topics in each case.

We create homepages usually in the above-mentioned five phases, which I describe below:

Conception of your company website

It doesn’t matter if it’s a relaunch of your existing site or a completely new homepage. We always recommend to start with a professional website conception.

Because a well thought-out concept is the foundation of a professional website, which supports the sales of your company. These are the most important stages in planning your homepage:

  1. Determining the Website goals
  2. Definition of your Target audience
  3. Optimization of the Touch points Your target audience with the website
  4. Elaboration of your unique selling proposition
  5. analysis of the websites of your Competitor
  6. Research of suitable Keywords and topic creation
  7. Planning the Page structure
  8. Planning the Contents

The design phase ends with Creating wireframes. These are also the basis for the second phase, in which the screen designs of your website are created.

Responsive Web Design – How to make your website work on the move

For the Designing your website create your Web designer the so-called screen designs. Usually a template is designed for each page type in several resolutions. The web developer Needs the screen designs in different resolutions so that he can implement the designs as accurately as possible.

Responsive web design means that the content automatically adjusts to the size of the screen

Looks at the Scope of your new home page z.B. as shown on the graphic below, at least these seven screen designs must be created:

  • Home page
  • About-us page
  • Services page
  • References page
  • Contact page
  • Simple text page
  • 404 page

Simple structure of a homepage for companies

As you can see in the picture, the services each share the same template. In the third phase, in which your website is developed, the screen designs are turned into so-called Templates.

You can use these templates as Reusable templates Introduce, with which you can create as many subpages as you want on your homepage.

The basis for a mobile website are responsive screen designs

So that the Web developer also your Create mobile website but there is still some work to be done by the webdesigner. This must be done by each screen design Several variants create.

Usually a screen is created in three variants. Here using the example of the home page:

  • Desktop (with a width of 1920px)
  • Tablet (with a width of 768px)
  • Mobile (with a width of 375px)

For more complex web designs, it may also be necessary to create intermediate resolutions. With these it is easier for the developers to implement the designs as desired.

Why do you need a mobile website at all?

When your website responsive is developed, the content automatically adapts to any screen size. A contemporary Business website should meet these requirements in any case, as the share of mobile traffic is growing steadily and the topic is also relevant for search engine optimization.

Correction loops – dealing with change requests

As a rule, a web project always contains several Correction loops. In these loops you give your web designer your change requests and he revises the designs according to your ideas.

If the number of agreed correction loops is exhausted, additional costs are usually incurred. In our experience, however, two correction loops in the design phase and another one after programming should be sufficient.

Alternatively, you can agree with your agency before the start of the project that several drafts will be delivered.

How does the programming of a corporate website work?

Once the designs are approved by you, your website is developed. What you should provide at this stage is:

  1. a webspace
  2. a domain
  3. a database (If a CMS like WordPress is used.)

You can get all three of these things from common hosting providers in so-called hosting packages. But be sure to ask your web design agency for the exact specifications. Because these can vary from project to project. Incompatibilities at this point can cost unnecessary time later and delay the go-live of your website.

What does a proper development process look like?

A professional web developer works with multiple "instances of a website. These are:

Three server environments in website development: Development, Staging and Production

  1. Development environment: This exists only locally on the developer’s computer.
  2. staging environment: This is located on a webserver, which is not publicly accessible. This is where tests are made, bugs are fixed and the correction loops are performed.
  3. Live environmentThis is the public version of your website, also called the production environment.

When developing a website, work is always done first in the development environment. Because here you don’t have to worry if something breaks. the whole thing exists only on the local computer of the developer.

Once a certain programming milestone is reached, it is uploaded to the staging environment. There you can take a look at the current state and give your feedback. The staging environment is usually password protected. This ensures that only authorized people can access the website.

Only when everything has been thoroughly checked for errors and is in order, will this status be copied to the live environment. The live or. Production environment is the one that is public on the Internet. This can be visited by everyone.

Content creation – creating the texts and images

The previous phases in the creation of the website build on each other, which is why they should take place one after the other. However, the creation of images and texts for your website is a process that can start beforehand. On the one hand, this is due to the fact that the content not only influences the layout and page structure but also SEO.

Content creation, i.e. images and texts, is an essential part of creating a website

When does it make sense to hire a photographer??

Whether it makes sense to hire a photographer, we do not want to question, because we find that it is always useful. professional photos are on a Web presence often half the battle, and that’s why we would always advise a photographer.

We would rather discuss when it makes sense to bring the photographer on board. If you already have existing texts and images, they can be taken into account during the design process. fact, this is especially good, because then the designer can emphasize key points in the text through the design.

If you don’t have any images at the beginning, the Screen designs just with dummy images from stock galleries such as unsplash.com designed. We recommend to bring the photographer on board when the screen designs have been approved by you.

This way the photographer can get a concrete impression of the scope of the job and knows exactly what image content and formats are needed. Here is an example using header images:

Header images are often displayed in the full width of the page and quite often a fancy headline is placed above the image. If the background of the image is too unstable, the font will be hard to read or even overlay a face. Such photos must be shot in such a way that the space for the text is taken into account.

If the photographer does not find out about it, he will usually not take it into account.

When it makes sense to start with the texts?

With the texts it behaves similarly as with the pictures. Ideally, you already have them before the design is started. Because this way the designer can create your content and you don’t have to adapt your content to the design.

First texting and then designing leads to a much better result. This is because the design has the basic task of presenting your content in a visually appealing and consumable way. If you design without the appropriate content, this task can only be accomplished to a limited extent.

Wireframes help you with copywriting

However, we know that many people want a graphic template for texting, so that they can orientate themselves better. Here come the Wireframes into play.

A wireframe is a first sketch of your website. Mostly they are kept in grayscale and images, texts, colors and logos are deliberately omitted. They serve the purpose of giving the content of your website an initial outline and planning the functionality.

Publication of your website

If your texts and images are ready, they will be added to the staging environment. Depending on your budget, you can do this yourself or have your internet agency do it for you.

In spite of the given number of characters, it can of course happen that the content does not fit into the design specifications in some places. That’s why it’s advisable to have Go-live of your website to make a final proofreading loop. In this phase, the last small blemishes are corrected.

In addition, the website should still be common browsers and on different devices as computer, tablet and cell phone are checked. Different browsers and devices sometimes interpret the code of a website differently in certain details, which can lead to discrepancies here.

When the final corrections and checks are done, your agency can start to work on your project new website finally go live. To do this, transfer the status from the staging environment to the production environment.

What you absolutely have to pay attention to in terms of SEO during the relaunch

With a Website relaunch it is not uncommon for the URLs of the websites to change Websites. Regarding the SEO it would be better if the old URL structure would be preserved. But often the content is structured differently during a relaunch, which does not allow to keep the old URLs.

Another reason can be Content management system change. This will also result in a change to the URL structure of your website.

If you are relaunching your website, don’t let the topic SEO fall under the table under any circumstances. Plan it early with your agency. The effort that this issue causes is much less than the damage that errors can cause.

2. Internal expenses: This is how much time you should plan for

yourself create professional homepage The development of a new website requires not only a certain budget, but also a lot of time. In order for your website to go online on the desired date, you need to free up enough time.

Time required for a web project

Your agency will do a lot of the work for you, but you’ll still have to do provide input, Make decisions and Give feedback. Especially in the conception phase you are asked. Your contribution to the definition of the buyer personas, the customer journey and the elevator pitch will ultimately determine the quality of the website.

Unless otherwise agreed, after the conception phase, it is up to you to provide content such as images and texts. In between there are always correction loops, in which your quick reaction is needed, otherwise no further work can be done. You realize: In order for the project to run without interruptions, it is important that you as the client also deliver on time.

Because major delays on your part can possibly collide with the timelines of other projects of your agency. If things go badly, the agency may not be able to start working for you again until later than you would prefer.

Time management recommendation

In any case, plan enough time for your tasks. Ask your agency to provide you with an overview of what they need from you and by when.

If possible, appoint an employee as internal project manager and make sure that he or she has sufficient capacity to do so.

3. What does a website cost? How to compare services

Many want to get their Create a website at a reasonable price. But if you ask for several offers, you can be sure that they will all be composed differently. If you simply look at the bottom line, you’re comparing apples to oranges. You are therefore well advised to take a closer look at the services and only then compare the prices.

Just think of it a bit like buying a car. They all have four wheels, five doors, a steering wheel and a gearshift and yet there are immense differences in prices.

The costs for a website are divided into the following parts unique and ongoing costs. In the following, we will address both types:

The cost of a website cannot necessarily be determined immediately. Some requirements often emerge only in the course of the project

One-time costs of a homepage

The one-time costs of a website include:

  • Consultation& Concept
  • web design
  • development

As well as possibly:

  • Texts
  • Images
  • Videos
  • Graphics

Ongoing costs of a website

The ongoing costs of a website include:

  • Hosting and domain
  • Licenses for fonts, plugins, CMS and extensions
  • Maintenance and care of your website
  • possible further developments of your website

What does a homepage cost? – This is why it is difficult to compare prices

The cost of a website depends on very many factors and that’s why the correct answer to the question in the headline is strictly speaking: "It depends." We know this is not the answer you were hoping for now. But it is basically the only serious one that you can give without further information.

The following factors have the biggest influence on the price:

  • hourly rates
  • Estimated time required
  • Scope of the design
  • Programming of a custom solution or use of a purchasable theme

How to compare the services of different providers

If you simply compare the sums of the offers, you get a very distorted picture.

In our opinion, price is one of the most important criteria, but one offer is hardly comparable with another if it is not based on exactly the same criteria and services.

So before you compare the costs, start by comparing the services. What services are important and relatively easy to compare with each other, we have compiled for you below.

Is there a design phase and what does this include?

An important aspect of successful websites is a digital strategy and a comprehensive conceptual design phase. Find out if your requested providers offer a conception phase and what it includes.

A proper conception should include approximately the following topics:

  1. Determining the Website goals
  2. Definition of your Target audience
  3. Optimization Touch points Your target audience with the website
  4. clarification of your Unique selling proposition
  5. Analysis of the websites of your Competitors
  6. Research of suitable Keywords and theme creation
  7. Planning the Page structure
  8. planning the Content

The development of such a concept takes some time, but it builds a solid foundation for your digital success. Since this is a comprehensive consulting services is, count here quite with costs. If the design is free, ask what it includes.

How detailed are the screen designs?

Find out Screen designs of your new website. Important quality features are:

  1. How many resolutions will be created per page type? Desktop, tablet and mobile are mandatory nowadays for responsive websites.
  2. Are intermediate resolutions also designed for more complex sections in the design?
  3. Will be created a design system? (This simplifies the further development later on.)

What would further designs cost, if any?

It may happen that the first draft does not meet your expectations. Inquire therefore, how high the costs of a additional design would be.

How many proofing loops are included in the project?

The correction loops are there to adjust the designs according to your ideas. So ask for, how many correction loops included and how to deal with additional correction loops.

What does the programming include?

Let’s assume you would have a WordPress website built for you. In this case you should find out, on what the planned WordPress Theme Is based.

For this you should know that individually programmed WordPress themes are more expensive, but also include only what you need. So-called Multipurpose themes can be had for a few Euros, but they contain a lot of functions and codes you won’t need. This is then like driving around with your summer tires in the trunk all winter long.

In addition, many functions are implemented with additional plugins (extensions), which often make the website slower, more unstable and insecure – from our point of view, not a good basis for a Business website.

These are the questions you should ask regarding programming:

  1. Will the site be Custom- or a Multipurpose theme implemented?
  2. Are functions like Image galleries and Slider implemented with plugins or integrated into the theme?
  3. If modular content is created with a Themebuilder or with Gutenberg blocks realized?
  4. Does the WordPress programming generally the WordPress Codex?

What about maintenance and further development of the website?

Websites must nowadays Maintained regularly become. It’s kind of like your smart phone. Continuously there is Updates, Which bring new features, fix bugs or close security holes. It’s basically the same with a website.

Regarding the maintenance of your website, ask yourself the following questions:

  1. Is regular maintenance and support offered?
  2. How often are the updates?
  3. If regular backups are made, which are stored on an external server?
  4. Is there an uptime monitoring, which monitors the availability of your website?
  5. Is there a system that detects security gaps?
  6. What is done when security breaches occur?
  7. How to charge for services that go beyond actual maintenance?

Regarding the further development of your website, ask the following questions:

  1. How are future developments of your website calculated?
  2. Do you have to buy a quota of hours?
  3. Is there a minimum turnover per adaptation?
  4. What is the hourly or daily rate??
  5. How quickly can further developments be implemented?

Final words on the comparison of prices and services

If you read the section carefully, you will have noticed that at no point were sums mentioned. This is because it is really difficult to deal with costs in a blanket way. Because the price you pay for a website depends on too many factors.

Even comparing hourly rates is difficult. A very experienced developer can per hour 100 € or more demand, but is definitely faster than a developer with less experience, who perhaps only charges 60 € per hour.

Ready for a web design project?

Then we look forward to seeing you and your project in a non-binding video call or in our office in Munich get to know.

Like this post? Please share to your friends:
Leave a Reply

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: