Design is the art to create a visualization or an object from an idea, in a way the viewer is inspired and the idea perfectly “realized” – in the sense of turned into reality.

Product design is the art to create an object from an idea, that is not only inspiring the viewer or user, but on top of that, making it functional in a way it fulfills its designation, reproducable in numbers, while economically and ecologically relevant and meaningful.

webdesign

Webdesign contains the words “web” and “design”.

“Web” refers to the use case or destination, the web or the internet.

“Design” refers to the visual appearance, the rendered imagery, the shapings, the proportions, the composition, the colors. It is about the visual appearance on the internet, the design for the web – more precisely of your webpage or web-shop.

On the internet, not only visual aspects play a role but also function aspects, the latter have to be considered as well.

dimension

Decisive for the design is the medium, on which it is presented. Normally it is presented on screens. These are 2-dimensional surfaces, for the representation of 2 dimensional graphics, images and texts. Thanks to evolution of technology 2.5D and 3D images can be rendered on such devices.

One basic decision for the design of a website or webshop is the dimension. For example, if products should be displayed as images or videos or three dimensional objects in virtual rooms, or more the conventional way ?

Especially with technologies as AR/VR, Web3D and WebGL 3D renderings are increasingly easier to achieve – but still production cost and complexities are so high, that these technologies only slowly develop to be scalable for mass audiences.

Video is different. You may have a hard time to a website today, that does not use some form of motion picture.

With the upcoming of AI image- and video-generators a new era of limitless possibilities arises.

Coming from print-design, many lessons learned apply for webdesign as well, as line routing, golden rule, thicknesses, shapes, and colors are directly applicable in 2D-webdesigns.

The decision on the dimensions also touches another component: the resolution. Contents are produced for maximum resolution of the screens. For optical reasons, this should be as high as possible, as the eye should not be able to detect raster points. With 2D images already, this can be relatively resource consuming, especially for the storage. With 3D images, this is even worse. And when it comes to video it can be very, very challenging. Storage space always means transmission time and reaction time of the website. This is why it is important to balance between the advantages a high resolution image provides and how much loading time it costs.

With small servers this can be a serious challenge. If the website then should present 50 products, the challenge will be 50 times more serious.

Corporate identity

Your webdesign should go hand in hand with your corporate identity and fully adapted to it.

brand

You probably have your brand already. The brand is about a name with a meaning and a logo that makes it unique and outstanding.

The brand may also have a slogan, to make it even more obvious.

Farben

In the CI your company-colors are defined – or should be. If not, then you have to define them.

It is important that they fit with your logo and that they generate a positive mood and feelings. It doesn’t need to be flower-power-happiness, it can be seriosity or business-style, depending on what is best supporting your brand.

The colors should be the basis for the design as well, or at least the design should be in harmony with them.

For the coloring it should be reminded, that it may look totally different on different screens and the colors also need to work on paper. Contrasts should be selected in a way they allow and highlight clear and sharp edges.

Color palettes are also available as models or displayed on specialized websites, you can use to easily derive perfect compositions.

shapes

With shapes and outlines you should always consider, what messages they should underline.

Is your appearance bold and wide ? Or smaller ? More elegant ? More stormy ?

Bold and wide could be supported by rectangular shapes and large surfaces.

Smaller could as well be supported by rectangular shapes, but with smaller surfaces.

Elegant is mostly flat, rounded shapes.

Stormy could be supported by a distortion effect, distorting the contours of shapes in a non linear but highly dynamic way.

And then, as described for the surfaces, also the proportions used for shapes are decisive.

Repeating, slightly inclined, thin surfaces for example can support an image with lightness, and create more a feeling of a floating object for the viewer.

text

A very important part of webdesign is the selection of the fonts and typography.

If you have a corporate identity, it may well be that these parameters are already set in there. In such case I would suggest to check those – and if possible – use those.

If you do not have any specifications, there are a number of references in the internet and specialized sites, where you can buy fonts, or where they are offered for commercial usage only.

For smaller projects, first suggestion is to either use standard fonts as Arial or Time New Roman, or for example Adobe or Google fonts.

layout

The layout is slightly different from the webdesign, but more an element of it.

Layout is about what content is where on the pages and how large is it and what are the proportions of the fonts in titles, subtitles of different orders, normal text, descriptions and annotations.

This frequently starts with a wire frame. The wire frame is a well designed toolset, for structuring a draft and to test proportions and positions.

To place the contents, it is always a good idea to split in header, body and footer.

Between header and body you may want to insert a navigation menue.

You may add left and right sidebars.

When the raw structure is done, more detail areas in the body can be finetuned. Exact font sizes and distances can be defined, as well as number and sizes of images and videos, etc…