Plakat für die orientalische Lounge Isfahan Dreams

Unser nächstes größeres Projekt als gestaltungstechnischer Assistent in Ausbildung geht zu ende. Als Aufgabe, galt es in den letzten Monaten ein Plakat für eine orientalische Lounge zu erstellen. Für diese fiktive Lounge haben wir bereits in Gruppenarbeit ein Moodboard erstellt. Zusätzlich zur Plakatgestaltung, welche in Adobe Indesign erfolgte, sollten wir ein Konzept für das Plakat erstellen.

Bei diesem Projekt haben sich meine Partnerin und ich sehr schwer getan ein vernünftiges Plakat auf die Beine zu stellen. Uns fehlten einfach die zündenden Ideen. Die Stilisierte Bauchtänzerin, welche man am Bildrand sieht, habe ich mit dem Vectorprogramm Illustrator erstellt. Somit entstand kein Qualitätsverlust beim Skalieren der Bauchtänzerin.

Unser Konzept könnt ihr lesen, wenn ihr am ende des Artikels auf anzeigen klickt.

Plakat Isfahan Dreams

Anzeigen

Pixelfänger geht online

Nun ist es soweit meine Portfolio Seite Pixelfänger kann online gehen. Ich habe heute noch die letzten Veränderungen vorgenommen, allerdings bezogen die sich nur noch auf einige Farbveränderungen Insgesamt habe ich jetzt an der Seite 70 Arbeitsstunden gesessen.

Ich hoffe die Seite gefällt euch. Wenn ihr Verbesserungsvorschläge habt dann schreibt einfach einen Kommentar.

Zur Seite gelangt ihr hier.

Als gestaltungstechnischer Assistent nach einem halben Jahr Ausbildung, ist es möglich so eine Internetseite herstellen zu können. Das einzige was wir in der Ausbildung noch nicht besprochen haben sind diverse CSS Befehle wie Beispielsweise runde Kanten und das Attribut position absolut und relative. Die Einbindung der Javascripte wurde auch noch nicht besprochen, aber das ist eigentlich kein Problem. Ich möchte dass hier gerne Ansprechen das ich von vielen gehört habe, das man nichts lernt in der Ausbildung. Ich finde die Ausbildung zum gestaltungstechnischen Assistenten immer noch sehr interessant und bin gespannt, welches die nächsten Unterrichtsinhalte werden.

Die Internetseite Pixelfänger steht in den Startlöchern

Nach nun fast 65 Stunden Arbeitszeit ist meine Seite Pixelfänger fast fertig. Die letzten Seiten wurden erfolgreich gecodet, auch wenn es hier und da einige Probleme mit diversen scripts gab. Viele Fotos wurden in die Seite eingepflegt und das Layout wurde noch minimal verändert. Jetzt beginnt die lange Zeit der Fehlerüberprüfung. Ich teste zurzeit die Browserkompatibilität. Mittlerweile läuft die Seite in allen Browsern, nur der Internet Explorer 6 macht noch nicht das was er soll. Aber wer sich auch mit dem Thema Homepage Design auseinander setzt kennt ja das Problem.

Außerdem betreibe ich gerade onpage Suchmaschinenoptimierung, setze Keywords etc.

Bis auf diese “Kleinigkeiten” ist die Seite so gut wie Fertig. Ich habe für kommenden Sonntag den 04.04.2010 die Veröffentlichung der Seite geplant. Also reinschauen lohnt sich.

Ich werde mich jetzt wieder hinter die Seite klemmen und die letzten Fehler Korrigieren.

Es folgen in den nächsten Tagen wieder spannende Berichte, die mit der Ausbildung zum gestaltungstechnischen Assistenten zu tun haben, unter anderem ein kleiner Bericht zum Poetry Slam.

Pixelfänger nach 48 Stunden

2 Wochen und 48 Arbeitsstunden sind vorbei und die Seite Pixelfänger schreitet immer weiter voran. Fangen wir mal von vorne an. Als erstes habe ich noch einmal das Logo etwas überarbeitet. Wie man sieht, ist der Haken verschwunden und die einzelnen Pixel sind herausgearbeitet worden. An der Seitenstruktur hat sich nichts mehr geändert.

Kommen wir nun zu den Seiten die dazu gekommen sind. Neue Seiten die dazu gekommen sind:

• Leistungen mit Unterkategorien und Beschreibungen.
• Referenzen mit Unterpunkten
• Kontaktformular
• Impressum

Die Leistungsseite habe ich unterhalb des Headerbereiches in 2 DIV Bereiche eingeteilt. Zum einen die linke und zum anderen die rechte Spalte. In der Linken Spalte, habe ich die Leistungen hineingelegt die ich anbiete. Die einzelnen DIV Boxen mit Bildern sind ein Mix aus selbst gemachten Buttons und frei verfügbaren Buttons aus dem Internet. In der rechten Spalte findet man kleine Informationsboxen, die mit absoluten und relativen Positionen verwirklicht worden sind. Im Headerbereich, habe ich noch ein kleinen Image slider eingebunden wenn man auf einen Punkt geht öffnet sich das ganze Bild und schiebt die anderen beiseite.

Unter dem Menüpunkt Referenzen findet man einiges was ich in der Vergangenheit schon gemacht habe. Auch hier ist die Seite wieder in zwei DIV Bereiche eingeteilt worden. In der Linken Spalte habe ich Tabs eingebunden um schnell und einfach zwischen den einzelnen Unterpunkten hin und her switchen kann. Diese Tabs habe ich mit jquery gemacht. In der rechten Spalte habe ich Buttons angelegt, damit man immer leicht sehen kann welche Leistungen ich erbracht habe für das Produkt. Außerdem habe ich noch ein  Fanzybox Plugin eingebunden, wenn man nun auf ein Bild in den Referenzen klickt, erscheint eine kleine Vorschau des Bildes in der Mitte des Bildschirmes.

Das Kontaktformular ist mir Ajax verwirklicht worden. Hierbei habe ich auf ein frei verfügbares Ajax plugin zurückgegriffen.

Das Impressum ist eher uninteressant.

Ich denke, dass ich bis Ende der Osterferien mit der Seite fertig sein werde und dann fängt ja auch wieder die Ausbildung zum gestaltungstechnischen Assistenten an und man muss wieder etwas für die Schule tun.

 

Die Seite Pixelfänger nach einer Woche Arbeit

So eine Woche ist nun rum und ich habe einiges an der Pixelfänger Seite gemacht.

Als ersten Schritt habe ich meine Skizze in Photoshop umgesetzt und habe mir überlegt welche Farbgebung ich der Seite gerne geben möchte. Ich habe mich dazu entschlossen die Farben Rot und Hellgrau zu nehmen. Das Rot habe ich zum einen genommen, da es eine sehr kräftige Farbe ist, und zum einen eine Signalwirkung hat. So konnte ich die wichtigeren Dinge der Seite in den Vordergrund heben, wie beispielsweise Links. Für die Hintergrundfarbe, habe ich mich für ein sehr helles grau entschieden. Ich habe mich gegen ein Weiß entschieden, da ansonsten der Kontrast für die Augen zu stark gewesen wäre.

Für das Schriftbild, habe ich mich für eine serifenlose Schrift entschieden. Auf der gesamten Seite werde ich nur 2 Schriftarten verwenden, zum einen Verdana für Fließtext und Tahoma für Überschriften. Auch bei einer sehr kleinen Schriftgröße, ist die Schrift noch sehr gut zu erkennen.

Für meinen (X)HTML Code, habe ich zuerst die Site Navigation eingerichtet, ein Stylesheet erstellt und die einzelnen DIV Bereiche angelegt.

Der Headerbereich besteht aus 2 DIV Boxen. Im ersten Teil liegt das Logo drin und im zweiten Bereich die Slideshow. Die Slideshow ist kostenlos und für alle Anwendungsgebiete frei erhältlich. Ich habe sie auf meine Bedürfnisse via CSS eingerichtet, und habe eigene Bilder und Texte eingebunden, sowie einen Mehr Button designt. In der Slideshow werden einige meiner Letzten Referenzen angezeigt, sie wechseln im 11 Sekunden Takt.

Im nächsten DIV Bereich liegt nun die Navigation, welche einfach mit Hilfe von Listenelementen und Css angepasst wurde. Als einzige Besonderheit, habe ich noch die Subnavigation mit einem CSS3 Befehlt ausgestattet. Schaut man sich die Navigation mit einem neueren Browser an, werden die Menüunterpunkte in abgerundeten Boxen angezeigt. Zuerst hatte ich vor noch Schatten einzubinden, habe mich dann wegen der Lesbarkeit dagegen entschieden.

Der Content Bereich, besteht aus 3 DIV Boxen. Für jede einzelne DIV Box habe ich unterschiedliche Bilder mit Photoshop designt. Beim Content Bereich habe ich mich für 3 Bereiche entschieden, da ich gerne den Schwerpunkt meiner Arbeit verdeutlichen wollte, bzw. wo meine Stärken liegen.

Im Footer Bereich, habe ich auch 3 DIV Bereiche erstellt. Hier wollte ich ein wenig auf mich und meine bisherigen Referenzen eingehen. Der kleine Footer ganz unten rechts ist auch wieder eine kleine Liste die gefloatet worden ist damit sie waagerecht angezeigt wird.

Ich lege sehr großen Wert darauf, dass die Homepage Barrierefrei ist, aus diesem Grund überprüfe ich sie ständig mit dem HTML Validator einem Plugin für Firefox. Ich werde darauf auch beim weiteren erstellen meiner Seite großen Wert legen. Falls ihr euch fragen sollten, warum ein anderes Logo auf der Seite zu sehen ist, als auf der Prepage. Ich habe mich dazu entschlossen ein seriöseres Logo zu gestalten, da mir das jetzige zu verspielt war.

Jetzt mein Ergebnis. Ich werde bis die Homepage fertig gestellt ist von meinen Ergebnissen erst einmal nur Bilder veröffentlichen. Wenn die Seite dann komplett fertig gestellt ist, werde ich die Seite online stellen. Ich nehme an, dass die Seite noch innerhalb meiner Ausbildung als gestaltungstechnischer Assistent fertig gestellt ist. Nein kleiner Spaß am Rande, ich denke das ich die Seite bis zu den Sommerferien spätestens fertig haben sollte.

klick