Design is a plan for arranging elements to best achieve a particular purpose. - Charles Eames
Tools such as Photoshop or PowerPoint can be used to position elements anywhere in a given document. These documents are not responsive - the content is only created for a specific resolution.
Web content is not comparable to this, it behaves more like a Word document. The content flows naturally from top left to bottom right and wraps around the edge, it is responsive. To structure the content, you divide the web page into elements that are arranged with the layout and position. The whole thing is designed with typography, frames and effects.
The box model illuminates how elements are arranged on a page. Each element has a parent and potentially children. Most of these elements have a role with predefined styles that can be added to. The block "section" divides the page into different chapters and uses the whole width of the page. The block"container" centers the content, the element"heading" defines a title, a "paragraph" allows for text blocks, etc. Only the element"div" has no predefined styles and can be used for everything.
I divide the page into sections and containers. For layouts below this level I use the element "div".
With the properties of the layout (Block, Grid, Flex, Inline, None) you define the appearance of the element and thus the arrangement of the underlying elements. If you add an element to a container, for example, it is positioned relative to its sibling elements. If the container has the setting "block", the underlying elements appear one after the other, as in a Word document, and are wrapped at the end. If you want to arrange the elements next to each other, select either "flex" or "grid" for the layout of the container.
With the properties for the position (Static, Relative, Absolute, Sticky, Fixed) you define the arrangement of the corresponding element. The standard setting "static" leaves the element untouched in the document flow. If you want to change the element relative to the document flow, use the value "relative". The properties "sticky" or "fixed" detach the element from the element hierarchy and position it relative to the screen.
By default, the size of the element automatically increases with the content. This means that it is usually not necessary to define the height of the elements. It is best to let the content define the height of the element. The width , on the other hand, I often use. For example, to limit the "container" to a maximum size or to limit elements in a flexbox to a percentage width.
The elegance and clarity of the elements is achieved by defining the space between them. This is where margin and padding come into play. Margin creates space outside an element and displaces other elements. Padding creates space within the element. With the units (px, em, rem, %, vh, vw,ch), you define the size and arrangement of the content within the element. The pixel unit is an absolute value, the rest are relative values.
A website is a piece of software that tells a story. Use frames and effects to give the reader the feeling of interactivity when using your website. In my case, transforming a text (link) or a box (link box) during mouseover shows that something will happen when pressed.
Typography is a science in itself. But there are rules that have nothing to do with personal taste. Contrast, clarity and consistency are half the battle. Do not use more than two different fonts. One for titles and one for text. A website is not a law book, don't define too many hierarchies of headings. Save the headings as a class and use the same class for each same heading.
A container that centers the content and has a fixed maximum size should be reused. The same applies to a title with a certain size and a defined space below it as well as to all other elements. This creates consistency across all pages and design stability when using the page. This is achieved by assigning a "class" to a styled element. For style, one change = one class. Name the style changes you apply to an element so that you can reuse them later.
For Responsive Design, the rule is simple. The style of the desktop is cascaded to all other breakpoints, both downwards (tablet, mobile) and upwards (e.g. monitor with 1920px). If the style is changed on the tablet breakpoint, it also applies to the mobile. Style your page on the desktop, go down to the tablet format, validate your page and then go down to the mobile format.
