Ähnlich, wie ein Haus nach Bauplan – so wird anhand des Screendesigns eine Internetpräsenz erstellt. Es gibt viele Möglichkeiten Entwürfe zu erstellen – man kann sie auf Papier skizzieren, im Grafikprogramm wie Photoshop oder Illustrator gestalten oder mit interaktivem Software bauen.

Heutzutage gibt es zahlreiche Endgeräte welche unterschiedliche Breiten haben: Smartphones (ab 320px), Tablets (ab 768px, quer gehalten z. B. ab 1024px), Notebooks (z. B. 1280px), Desktop Monitore (z. B. 1920×1080px HD, 3840×2160 4K). Seitenverhältnisse zwischen Breite und Höhe können unterschiedlich sein, die Geräte können auch hoch oder quer gehalten werden (siehe RWD testen).

Die Nutzung von Mobilgeräten wie Smartphones und Tablets steigt. Viele Smartphone Nutzer besitzen kein Desktop Computer bzw. benutzen ihn nicht mehr. Über die Hälfte von Internetverkehr erfolgt über Smartphones. Deswegen ist Responsive Web Design (RWD) mit Mobile First heute der Standard.

Ein Entwurf nur für Desktop reicht nicht mehr aus.

Für die Erstellung einer Website werden daher Entwürfe für mindestens zwei Ansichten benötigt: Smartphone und Desktop. Auf den beiden Entwürfen sind die größten Unterschiede in Darstellung von wichtigen Elementen zu sehen (Header, Navigation/Hauptmenü, Footer, Slider, Karussell, Bildergalerien etc.).

Falls die Darstellung auf dem Tablet und Notebook auch abweichen soll, sollten auch diese entworfen werden.

Auch wenn für eine bestehende Website ein komplett neues Element erstellt werden soll, muss man sich zuerst die Darstellung wenigstens auf dem Smartphone Display und Desktop Monitor überlegen.

Rastersystem

Bei Erstellung von Internetauftritten wird oft ein CSS-Frontend-Framework mit vorgefertigten Breakpoints verwendet. CSS-Frontend-Framework steht für Rahmenstruktur und ist ein Programmiergerüst mit responsivem Rastersystem. Breakpoints sind die Punkte ab denen das Layout sich ändert. Bootstrap ist ein Rastersystem, dass folgende Breakpoints – in dem Fall Display Breiten – bietet: Unter 576px, ab 576px, ab 768px, ab 992px, ab 1200px. Es müssen jedoch nicht immer alle Breakpoints verwendet werden.

Falls es fixierte Elemente geben soll, welche beim Runterscrollen immer an derselben Position im Browserfenster bleiben („Nach-oben-Pfeil“, Sticky-Header, andere Buttons/Icons), muss das auch entworfen werden.