Webdesign: SC Romanshorn

Preperations 📝

Since this was a redesign, we first had to communicate with the client, which parts from the old homepage should be transferred to the new one.

Part of that was creating a site structure, which we intentionally cut down from the original, since nowadays a compact website is the way to go.

After we created the site structure we discussed which elements they want in the new design, for instance an image list for something like team members. At this point we were had enough information to continue to the design.

The Design 🖍️

For the client to choose, we created three design proposals, of which I created two myself. The new design should have a modern feel as well as an appeal to the rather young generation. With those ground elements, we were quite open with how it could look in the end, since the client didn’t really have to much expectations nor a fixed CI/CD. The only things we really had to rely on were the logo and the elements discussed during the preparations.

The usual process we have when creating a design, is to continue the preferred two design after discussing them with the client, but since this project was urgent to finish because the old homepage was going to be taken down, we went with only one selected design. One of my designs was the lucky winner 🎊 , so we started refining it.

After about six times of refining it we came up with the final design:

Final Design withing Adobe XD

Now we were in the starting holes for the actual development.

The Development 🧰

We split the development into two parts.

The static development:

At this stage, it’s all about the HTML structure and CSS. If you’re not a nerd, you probably don’t know what those to things are, you can think of them that HTML is the structure of what content and where the content should be placed on the homepage, where CSS is the styling part, which makes the HTML look fancy.

The reason it’s called static, is because at this point a non developer has no way of dynamically editing the content on the website.

The dynamic development:

You might have guessed it, now that the structure and the design were finished we had to give a user the ability to edit content.

How can you do that? We used the popular CMS WordPress. Basically we took the static page and threw it into WordPress and with some magic coding, voilà, the page was basically finished and editable for the client.

Going online 🌐

After making sure that the client was happy with the website after presenting it to him, we were finally ready to go live.

We made sure to copy some of the content into the new page, so it won’t be empty when going life.

And tadaa, you can find their homepage at scromanshorn.ch.