KONZEPTION. zur Website der Friseurkette. Stefan Beil 2-MD 05.01

Transkript

1 KONZEPTION zur Website der Friseurkette Stefan Beil 2-MD 05.01

2 BRIEFING Zu konzipieren ist hier eine Website für den fiktiven Friseursalon HAIRYTRENDS im. Dieses geben die schon gestalteten Printmedien aus der Geschäftsausstattung wie Briefbogen und Visitenkarte vor. Die Seite soll für eine Bildschirmauflösung von 1024 x 768 Pixel mit 24 Bit Farbtiefe optimiert werden. Die Anzahl und Auswahl der vorgegebenen Bilder ist frei wählbar, ebenso Ausschnitte und Modifikationen der Bilder. Es sollen alle im überlieferten Manuskript vorgegebenen Texte verwendet werden. Die Anzahl der zu entwerfenden Screens liegt bei mindestens drei Stück. Dafür war außerdem das Gestaltungskonzept für die Menüführung/ zu entwickeln. Ziel des Redesign Die bereits existente Friseurkette soll sich als junge Marke positionieren, neue Filialen etablieren und den Bekanntheitsgrad der bereits Bestehenden steigern.

3 corporate design Durch die Gestaltung der hier ausführlich beschriebenen Website, hebt sich der Salon in seiner Identität noch einmal mehr von der Konkurrenz ab. Das funktioniert vor allem durch die Einhaltung und den Ausbau des schon vorhandenen s. Dieses wird durch die zum Teil schon bestehende Geschäftsausstattung definiert. Geschäftsausstattung navigation Briefpapier Visitenkarte Es gibt eine Haupt- und Unternavigation die nach den jeweiligen Themen logisch strukturiert ist. Somit kann der User intuitiv navigieren und wird somit geistig entlastet. Er kann sich mehr auf die Seite einlassen, was automatisch zu einer postiven Erfahrung mit dieser Seite beiträgt. Außerdem bewirkt eine Unternavigation eine gewisse Neugier, da sie nicht gleich in Erscheinung tritt bzw. man nicht weiß, was auf einen zukommt. Hairytrends München Figaro-Allee München Francis Figaro Figaro-Allee München Telefon: (089) Fax: (089) figaro@hairytrends.de Signet navigationsplan Home CMYK IMPRESSUM Cut & Style schwarz/weiß KONTAKT events Frisurentrends Hairytrends München Bayerische Hypo- und Vereinsbank AG Figaro-Allee München BLZ: Telefon: (089) Konto-Nr.: Fax: (089) muenchen@hairytrends.de Registergericht: Amtsgericht München Inhaber: Francis Figaro Registernummer: HRA 8457 Geschäftsführerin: Franca Figaro Umsatzsteuer-Identifikationsnummer gemäß 27 a Umsatzsteuergesetz: 22/92/2317 Öffnungszeiten Typberatung FARBEN Standorte Termine Online Coloration Kosmetik Der für das Firmenlogo definierte Farbton (ein dunkles Magenta) wurde als Prägnantester in die Geschäftsausstattung aufgenommen. Da diese Farbe allein schon sehr belebend wirkt, wurde im Gegensatz ein abgeschwächtes Schwarz in Kombination für den Content verwendet. Hairytrends for Friends Preise CMYK 0 / 100 / 0 / 52 RGB 157 / 18 / 85 CMYK 0 / 0 / 0 / 90 RGB 67 / 67 / 67 Verwendet wird die Schriftfamilie ITC Avant Garde Gothic mit Ihren verschieden Schriftschnitten.

4 storyboard Die erste Idee (Abb. 1) basierte darauf, dass man die Balken links und rechts neben dem Logo für das Menü verwendet. Dann wäre der aktive Menüpunkt ausgespart gewesen. Dies schien jedoch dem nicht gerecht zu werden. Der zweite Ansatz (Abb. 2) bezog sich eher auf ein Modelfoto, welches sich später als geeignetes Hintergrundbild bewehrte und somit durchsetzte. Weiterentwickelt wurde dieser Ansatz in der letzten Skizze (Abb. 3), in welcher auch die abgerundeten Ecken aus dem wieder zu finden sind. skizzen Da hier eine relativ junge Zielgruppe angesprochen werden soll, wurde sich für eine animierte und dadurch zeitgemäße Umsetzung der Internetseite entschieden. Dies wird schon beim Öffnen der Website deutlich, da sich der Inhalt jeder Seite zügig aufbaut. Auf der Startseite findet man eine kurze Slideshow, in der sich drei Fotos von frisierten Models wechseln. verwendete Hard- und Software Es wurde an verschiedenen PCs mit den Betriebssystemen Windows Vista und XP gearbeitet. Folgende Programme aus der Creative Suite CS3 Reihe wurden zur Realisierung des Projektes verwendet: Photoshop, Flash, Dreamweaver und InDesign. Die Lauffähigkeit im Internet wurde mit den Browsern: Internet Explorer 7 und dem Mozilla Firefox 2 getestet.

5 Da auf dieser Seite beide Geschlechter angesprochen werden, wurde dafür gesorgt, dass schon auf der Startseite Frauen als auch Männer vertreten sind. Alle Bilder ob mit Personen oder Gegenstände wurden für sämtliche Seiten freigestellt. Sie sind dadurch besser integriert und verhelfen außerdem zu einer räumlicheren Warnehmung. Es wird eine größere Spannung erzeugt. Damit das gesamte Farbschema der Seite harmoniert, wurden zusätzlich die der einzelnen Bilder um die Hälfte reduziert, da sie sonst zu aufdringlich dargestellt würden. Im Bereich KOSMETIK wurden mehrere Pflegeprodukte zusammengefügt, da der User sonst auf den Gedanken kommen könnte, dass diese Produkte einzeln zu erwerben wären. Auch im Bereich HAIRYTRENDS FOR FRIENDS wurde aus der Sicht des Users gedacht. Hier sind alle drei Fotomodels der Startseite vereint, um ein fiktiven Freundeskreis zu versinnbildlichen. verwendete Bilder Ausschnitte der Website um 50% vergrößert HOME erstes Bild der Slideshow zweites Bild der Slideshow drittes Bild der Slideshow Zur Unterschützung des s wird die dafür definierte Schriftart AvantGarde für das Menü und sämtliche Überschriften verwendet. Der Schriftschnitt Book Condensed eignet sich gut, da er dem Logo folgt jedoch keine allzugroße Ähnlichkeit zulässt. Das Logo bleibt somit ein eigenständiges Designelement. Als passende Schrift für den Fließ- bzw. Maintext wurde die Lucida Sans eingebettet. Was mehr Individualität, im Gegensatz zu vielen anderen Websiten mit wenig zur Auswahl stehenden Systemschrift-/en durch die meist verwendete Scriptsprache HTML, mit sich führt. Die Lucida Sans ist serifenlos und lässt sich dadurch auch in kleineren Größen optimal im Internet darstellen. KOSMETK HAIRYTRENDS FOR FRIENDS verwendete Schriften ITC Avant Garde Book Condensed ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ! $%&/)=?` *#+@ Lucida Sans Regular ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ! $%&/)=?` *#+@

6 Darstellung in 1024 x 768 Pixel Website um 50% vergrößert farben Wie man unschwer erkennen kann will diese Seite, passend zu Ihren gewagten Frisurenkreationen auffallen. Dies gelingt hier vor allem durch die Farbauf- und einteilung der prägnanten Hausfarbe Magenta in Kombination mit dem passenden Grauwert der Farbe. Um nicht zu sehr vom Inhalt der Seite abzulenken, wurde im Content Bereich mehr mit klaren hell/dunkel Kontrasten gearbeitet. Dies garantiert zusätzlich angenehmen Lesefluss. verwendete FARBEN #9D1255 RGB 157 / 18 / 85 #C6C6C6 RGB 198 / 198 / 198 # RGB 67 / 67 / 67

7 Darstellung in 1280 x 960 Pixel Website um 50% vergrößert

8 Darstellung in 1280 x 960 Pixel Website um 50% vergrößert