Website Design für ein Albumcover Im Rahmen einer Lehrveranstaltung bestand die Aufgabe, ein gedrucktes CD-Cover in eine Onpager Website, die für Desktop- und Mobilgeräte optimiert ist zu übertragen und in diesem Stile zu erweitern. In dem nebenstehenden Video sind dann noch beigefügte Animationen und Erweiterungen zu sehen. Unterhalb die Schritte der Entstehung und zu unterst die finale Webversion.
Themensuche, Stylesheets und Wireframes
Themensuche
Themensuche
Wireframe
Wireframe
Stylesheet
Stylesheet
Projektentwicklung
Mit Sketch wurden die ersten entwürfe und Prototypen entworfen
Mit Sketch wurden die ersten entwürfe und Prototypen entworfen
Erste Version, noch mit vielen dunklen Kosten und Rahmen
Erste Version, noch mit vielen dunklen Kosten und Rahmen
Die dunklen Kästen wurden durch Begrenzungsrahmen ersetzt, was einen besseren Flow gewährleistet
Die dunklen Kästen wurden durch Begrenzungsrahmen ersetzt, was einen besseren Flow gewährleistet
Das Design wurde schlussendlich sehr minimalistisch, alle Ränder und Kanten verschwanden
Das Design wurde schlussendlich sehr minimalistisch, alle Ränder und Kanten verschwanden
1. Mit Sketch wurden die ersten Entwürfe und Prototypen entworfen.

2. Die Erste Version, noch mit vielen dunklen Kästen und Rahmen

3. Die dunklen Kästen wurden durch Begrenzungsrahmen ersetzt, was einen besseren Flow gewährleistet

4. Schlussendlich wurde das Design sehr minimalistisch, alle Ränder und Kanten verschwanden
Finale Desktop und Mobile Ansicht 
Desktop
Das Minimalistisch Design, gepaart mit einigen verspielten Animationen und übergangen stellten dann schlussendlich die Finale Version dar.
Dabei habe ich besonders auf eine einheitliche klare Linie geachtet und versucht diese Möglichst nah in die Mobile Version zu transferieren.
Mobile
Da Mobile Devices zunehmend eine immer größere Rolle spiele, ist das design eines Responsive Designs überaus wichtig.
andere Strukturen, eine Stick Menüleiste, welche erst durch aktivieren mittels eines overlays die verschiedenen Menüpunkte preis gibt und so ein geordnetes und sauberes Design darstellt.

You may also like

Back to Top