# Design für ein gästehaus



## Tomatenmark (23. August 2008)

Hallo Leute

Ich soll für gute Bekannte eine Homepage machen.
Leider bin ich ein guter Coder, aber kein guter Grafiker und tu mir gerade etwas hart mit dem Design.
Normalerweise erhalte ich die Designs vom Grafiker in der Firma, aber da diese Homepage eher ein Gefallen ist und kein Geld bringt muss ich mir das wohl selbst erstellen.

Ich hab jetzt bereits eines gemacht, aber es gefällt mir nicht wirklich bzw. die Headgrafik stört mich.
Ich finde sie passt einfach nicht in die Seite rein, aber alle bisherigen Versuche den Namen des Gästehauses ins Design zu bringen gefielen mir noch weniger.

Ich denke es wäre schon wichtig, dass im Design selbst das Gästehaus verankert ist, deshalb hab ich mich auch für so einen Header mit Bild entschieden nur wie und wo den Gästehausnamen einbauen ?

Ich weiß hier gibt es richtig gute Designer, die sofort sehen wo das gut aussehen würde. 
Ich persönlich tu das nicht.

Für alle anderen Arten von Kritik und Vorschläge bin ich jederzeit dankbar.

Danke im Vorraus.

Hier mal mein Design:







Lg Mark


----------



## ink (23. August 2008)

Des Bild ist zu klein!

mfg


----------



## Chumper (23. August 2008)

Hier ist es größer


----------



## Tomatenmark (23. August 2008)

Oh sorry.
Danke Chumper


----------



## ink (23. August 2008)

Schaut nicht verkehrt aus, vielleicht den brauen Hintergrund nicht so dominieren lassen.
Die Farbkombi (grün, braun, blau) sollte nochmal überdacht werden.
Hat des "Haus Diana" n CD mit eigener Typo?

mfg


----------



## Tomatenmark (23. August 2008)

Hallo @nesk

Danke erstmal für deine Antwort.

Das Gästehaus hat eine Broschüre auf der dieses "Logo" zu finden ist (im Anhang).
Wobei dieses schon sehr alt und ich leider nur dieses sehr schlechte Bild davon habe.

Ich hab es mit Gimp bereits vergrößert und dann nochmals nachgefahren.
Wenn es möglich ist, es ein zu bauen, dann sehr gut. Ich habe es bis jetzt leider noch nicht wirklich geschafft es so einzubinden, dass es gut aussieht.


Bzw. Farbkombi 
Ja leider bin ich in dieser Hinsicht nicht so gut, da ich eher ein farbliches Ferkel bin 
Ich wollte eigentlich ein helleres braun/beige als Hintergrund.
Hab dann aber durch Zufall diesen hier gemacht und anschließend die Buttons eingefügt.
Hat mir dann eigentlich recht gut gefallen, aber du hast recht: Das braun ist wirklich sehr dominant.

Bin für jeden Farbtipp dankbar


----------



## ink (24. August 2008)

Du solltest auf jeden Fall des CD vom Haus bewahren (es sei denn die wollen n Neues)
Das Logo an sich lässt sich sicher gut einbauen.
Für die Farbharmonie besuch mal: http://kuler.adobe.com/.
Dort kannst dich n bissl autoben und n bissl schnuppern 

mfg


----------



## Tomatenmark (24. August 2008)

Hallo @nesk

Ich hab jetzt mal mit Kuler herumgespielt, was angesehen und auch verschiedenste Farben von meinem Design herumprobiert.
Aber irgendwie bekomm ich da kein zufriedenstellendes Ergebnis.
Gibt es da irgendwelche Tricks oder Einstellungen (Dark, Deep, Colorful, ...), die da empfehlenswert sind.
Bekomme wenn ich es mit Blau mache immer nur so einen matten braunton, der das Design irgendwie so langweilig wirken lässt.
Nehme ich den braunton, bekomme ich nur ein mattes türkis, welches auch nicht gerade gut aussieht.

Hat jemand villeicht eine idee für einen Farbcode, der etwas heller ist, aber trotzdem gut wirken würde.
Hab jetzt wirklich viel herumversucht.
ich wollte es mit einem beige als Hintergrund  versuchen, aber bekomme da auch nicht den geeigneten Ton hin.

Grüße Mark


----------



## ink (24. August 2008)

Das klingt irgendwie als ob du das falsche Farbprofil genommen hast.
Wie hast du dein Design angelegt: In CMYK oder in RGB?
Oder machst du des direkt im Editor?


----------



## Tomatenmark (24. August 2008)

Ich machs zur Zeit in The Gimp.
Farbmodus ist RGB.

Das problem ist, dass ich eigentlich nicht weiß auf was ich die Farben abgleichen sollte.
Ich bin grad dabei herumzuversuchen mit der Headgrafik (also den farben), da diese ja eigentlich das Kernstück sein sollte, aber da gibt es leider so viele Farben. 
Oder auf was achtet man, wenn man so ein Tool verwendet ? 
Danke für deine Mühe. 

Ich hab hier mal ein neues Bild angeführ.
So hab ich es zur Zeit geändert.

>> Klick <<


----------



## ink (24. August 2008)

Wenn du auf der Seite auf "Create" gehst, hast du direkt auch die Farbcodes (Hex, RGB CMYK usw), diese kannst du eigentlich ganz locker kopieren (dann brauchst du net fummeln )

Da es ja heimelich sein soll, verwende warme Farben (Rot-, Braun-, Orange- und Gelbtöne (dunkleres)).
Grün würde ich dort einsetzen um Akzente zu setzen (das Auge reagiert auf Grün mehr als die anderen Farben), hierbei sollte es nicht zu grell sein.

Komplimentärkontraste sollten völlig aussen vor bleiben (Farben die sich in der Farbskala gegebenüber liegen).
Darum würde ich zu nem Bordeux-Ton bei Rot tendieren (beisst sich net so mit dem Grün)

Desweiteren arbeitest du bei deinem Layout mit Quantitätskontrasten (Mengenkontrast der Farben).
Hierzu solltest du vllt mit dem goldenem Schnitt arbeiten, das macht es für den Betrachter interessant und macht das Konzept angenehm.

Jetzt liegt es an dir. 
Bei Fragen, frag.

mfg


----------



## Tomatenmark (24. August 2008)

@nesk danke dir. Wirklich  Erinner mich, wenn das durchgestanden ist, dass ich dir eine fette positive Bewertung geb 

Doch wo soll ich das Bordeauxrot einbauen ? 
Anstatt dem Blau bei der navigation ? Als Hintergrund ?

Ich muss sagen mir gefällt das eigentlich schon recht gut, aber nicht gut genug:
http://img73.imageshack.us/img73/5898/dianafr2.jpg
Irgendwas muss noch verbessert werden. Nur weiß ich nicht was.


Bzgl. des goldenen Schnittes. Meinst du bei der Form (den kenn ich) oder gibt es den bei Farben/Design auch ?

Ich hab es jetzt mal mit den Bannermaßen versucht.
Will ich die in das Verhältnis des goldenen Schnittes bringen, bekomme ich (meinen Berechnungen zufolge  ) 491 px Höhe, was ja für ein Header schon sehr groß ist.


----------



## Tomatenmark (26. August 2008)

So ich hab jetzt nochmal ein bisschen herumgespielt, aber naja es gefällt mir noch nicht so richtig.
Ich finde es fehlt einfach irgendwie etwas.
Der Header (Also das Bild) passt irgendwie einfach überhaupt nicht rein.

Die Farben sind jetzt alle aufeinander abgestimmt bzw. ich hab sie von dem Colormatchtool auf hirnet. (Bis auf das Bordeaux, welches aber auch nicht so passt. oder ?)

Ausgangsfarbe ist das braun, welches ihr als Hintergrund seht.


Hat irgendjemand noch einen Tipp, wie ich es schaffe, dass der banner nicht so "reingesetzt" und "fehl am platz" aussieht ?
Bin für jede Hilfe dankbar 


>> So sieht es derzeit aus<<


Grüße Mark


----------



## Tomatenmark (26. August 2008)

Hat denn niemand ein paar Verbesserungsvorschläge.
Wie gesagt wirklich jegliche Kritik ist willkommen. 
Möchte wirklich etwas mehr im Grafikbereich hinzulernen und die Seite sollte auch schön werden


----------



## ink (26. August 2008)

Also des Design ist schon ganz ordentlich.
Das Logo noch rein und die Hintergrundfarbe find ich irgendwie komisch.

Ich finde des Rot als Highlight recht schibbi.

mfg


----------



## Tomatenmark (27. August 2008)

Hallo nesk

So ich hab das Logo mal reingemacht und die Hintergrundfarbe geändert.
Aber irgendwie gefällt mir das mit dem header noch nicht ganz.
Gibt es da villeicht ein zwei Tricks, wie man ein Foto am besten in ein Design einbaut, damit es nicht so "unecht" aussieht ?
Es ist irgendwie nicht Teil des Designs bzw. es wirkt nicht so, hab ich das Gefühl 

Grüße Mark

Design Update


----------



## Klein0r (27. August 2008)

Tomatenmark hat gesagt.:


> Hallo nesk
> 
> So ich hab das Logo mal reingemacht und die Hintergrundfarbe geändert.
> Aber irgendwie gefällt mir das mit dem header noch nicht ganz.
> ...



Ich finde es wirklich gelungen!
Gerade die Farbwahl der Navi ist der Hammer 

Gute Arbeit in meinen Augen!

lg


----------



## Tomatenmark (27. August 2008)

Danke 
Die Idee kommt ja auch von nesk 

Und dir kommt es nicht so vor, als würde der Header nicht reinpassen ?


----------



## Klein0r (27. August 2008)

Nein ich finde der passt.

Was mich ein wenig stört ist das unsauber gearbeitete Logo.
Da könnte man sicher noch was machen 

lg


----------



## ink (27. August 2008)

Hmm, irgendwie find ich es seltsam persönlich angesprochen zu werden 

So erstmal: Womit hast du das Logo nachgezeichnet?
Sieht eher suboptimal aus (sehr unsauber), mach es am Besten als Vektorzeichnung.

@Bild:
Es liegt daran daran dass es drumherum reine Flächenfarben sind.
Du könntest mit Transparenz arbeiten (mit Verlauf) oder halt noch was Grafisches einbauen.

mfg

edit: Mein Reden. Aber du hast des selber umgesetzt und des gut!


----------



## Tomatenmark (29. August 2008)

@Vektorgrafik
Hmm ich hab mich jetzt da ein paar Stunden rumgeplagt mit Inkscape, aber ich schaff es irgendwie nicht das Logo so her zu bekommen.
1.) ist der Strich den ich mache weitaus dünner bzw. wie mach ich das, dass diese Linie diese schönen Schwingungen und spitzen Enden erhält ? 
2.) Ruckel ich mit meiner Maus immer so blöd rum, dass es nicht mehr gut aussieht 


@Header
Wie meinst einen Verlauf und Transparenz ?
Über dem Bild, also dass das Bild dann z.Bsp: ins rein schwarze übergeht oder das weiß hinter dem Bild von hellgrau ins weiß verlaufen lassen oder so ? 

Grüße Mark


----------



## ink (29. August 2008)

Moin
Ich denke du zeichnest es einfach mit dem Malwerkzeug nach, das ist aber leider nicht das Optimum.
Du musst des mit dem Zeichenwerkzeug machen, damit setzt du die Knotenpunkte einzeln.
Und du musst es umzeichnen, d.h. um die weisse Fläche herum.
(Als Tipp: http://de.wikibooks.org/wiki/Inkscape)

Zum Header:
Ich meine damit unten vielleicht nen kleinen Verlauf ins Weisse zu setzen.
Aber es geht auch so, ich mag des Design.

mfg


----------



## Tomatenmark (29. August 2008)

So 

Das mit Vektorgrafik hat super funktioniert. Logo in top qualität. Sieht sehr sauber und elegant aus. (Muss dir einfach wieder mal recht geben )
Und jetzt kenn ich mich auch ein bisschen mit Inkscape aus und werd villeicht auch noch Fan von Vektorgrafiken 

Alles eingefügt:
Wenn ihr mir villeicht nochmal kurz drüber sehen könnt und sagt, ob das so passt, oder ob ich noch etwas machen könnte. (Header font ? [ferienwohnungen haus diana] was könnte ich da für eine nehmen ? Eine Handschrift würde wohl besser zu dem geschwungenen Logo passen oder ?)

Und passt der Hintergrund so ? 

Ich hab jetzt bei dem Headerbild einen leicht transparenten Rahmen innen drin.
Denkt ihr sieht das gut aus, denn mir kommt vor, so sieht es schon ein bisschen mehr im Design integriert aus. 

Danke nochmals 

Designupdate


----------



## ink (29. August 2008)

Moin
Sehr schön.
Du müsstest, wie du richtig erkannt hast, die Typo im Header ändern.
Auch solltest du die graue Fläche noch n bissl grösser machen (ist n bissl eng da )

Haste sehr schön gemacht 

mfg


----------



## Tomatenmark (29. August 2008)

Wie meinst du die graue Fläche größer machen ?
Die transparente im header, also die Neue oder dort wo das Logo drauf ist ?

Bezüglich der Schriftart im Logo.
Ich hab da jetzt herumgesucht, aber hab nur welche gefunden, die zu unsauber für so etwas aussehen oder eben unlesbar sind.
Kennst du  villeicht eine Handwritefont, die einigermaßen lesbar ist ?


----------



## ink (29. August 2008)

Das Graue wo des Logo drauf ist (erweiter es noch n bissl nach links)
Stöber hier mal: http://www.dafont.com/theme.php?cat=603

mfg


----------



## smileyml (29. August 2008)

Hallo,

ja es ist die transparente Fläche im Header gemeint 

Und bei Schriften empfehle ich dir, dich mal hier umzusehen:

Abstract Fonts
dafont

Du findest dort auch kostenlose Schriften und mit der Suche bzw. den Kategorien kommt man auch recht schnell zum Erfolg.

Grüße Marco


----------



## Tomatenmark (29. August 2008)

Design Update


So ich werd immer zufriedener.
Passt die Schriftart dazu oder nicht ? 

Und @nesk ich glaube du hast mal geschrieben, dass der Hintergrund komisch wäre.
Hab ich ausgetauscht. Passt er so ?


----------



## ink (29. August 2008)

Joa, die Typo wirkt n bißchen "billig" (so ähnlich wie Comic Sans )
Schau nochmal ob du nicht ne andere findest.

Ich find den Rest sehr gelungen, aber ich bin ja net allein hier 

mfg


----------



## Tomatenmark (29. August 2008)

Hmmm ich find einfach nicht das passende.
Sie sollte ja ein bisschen edel aussehen (das Diademlogo tut es ja auch)
und trotzdem lesbar.
Das sind mal die, die ich gefunden hab.
Aber irgendwie passt es bei allen nicht dazu, dass sie Kursiv anfangen, also das H- kursiv ist.
Aber villeicht gibt es da einen Trick, wie man das besser aussehen lassen kann  ?  (Ich find das wunderbar. Endlich lern ich mal ein paar Tricks zum Webdesign) 
Villeicht, wenn man das Ferienwohnungen auch in einer anderen Schriftart schreibt ?
(Soll es dann die gleiche sein, oder eine andere ?)


----------



## smileyml (29. August 2008)

Hallo Mark,

trotz deiner Ungewissheit bist du auf dem richtigen Weg. Hier kannst du eventuell noch eine passende Schrift finden - ich glaube das auch eine feine Script-Typo gut passen könnte. Im Kopf habe ich aber auch keine bestimmte gerade.

Zu deinem Anordnungsproblem hab ich zwei Ideen. Bei beiden sehe ich eher das Diadem und "Haus Diana" im Zusammenhang als wiedererkennbares Logo, was sicher auch mehr Verwendung finden soll und wird bei der weiteren Entwicklung eines CD. Dabei bildet das Diadem dann ein grafisches Logo und "Haus Diana" kann man (in der richtigen Schriftart) als Wortmarke sehen.
Nun zu meinen Ideen:
1. Bilde das Logo wie oben beschrieben aus den zwei Elementen und nimm den Zusatz "Ferienwohngen" weg oder platziere ihn an anderer Stelle - eher so als ein qualitativer Zusatz (-Ferienwohnungen in den Alpen-). Er könnte im Header vielleicht auf der linken Seite stehen oder nur auf z.B. Briefpapier auftauchen. Ich glaube aber das man den Zusatz grundsätzlich nicht braucht.

2. Den Zusatz "Ferienwohnungen" könntest du vielleicht in einer filigraneren/dünneren Schrift unter "Haus Diana" platzieren. Allerdings hast du dann am Logo zwei Schriftarten, da die gleichen auch verwirrend wären. 

Das ich den Zusatz aber grundsätzlich problematisch finde, hast du ja mitbekommen. Einfach schön weitermachen. Du bist auf jeden Fall auf dm richtigen Weg.

Grüße Marco


----------



## Tomatenmark (30. August 2008)

So hier mal die neue Version 
Irgendwie wirkt das Logo jetzt zu groß für das Bild 

Design Update


----------



## ink (30. August 2008)

Macht das Ganze doch n bissl kleiner.
Was mir noch gut gefallen würde, wäre wenn du das Diadem unten in die Fläche setzt.
(Transparennz auf 20% oder so)

mfg


----------



## smileyml (30. August 2008)

nesk hat gesagt.:


> Was mir noch gut gefallen würde, wäre wenn du das Diadem unten in die Fläche setzt.(Transparennz auf 20% oder so)



...genau, als eine Art Wasserzeichen. Dadurch wird die Ecke unten auch gefüllt und der Header atmet wieder etwas auf. Das Haus wird dann nicht mehr so bedrängt durch das transparente Viereck und das Bild wirkt dadurch breiter.
Du musst jetzt mal gucken, ob du die Wortmarke dann acuh dort platzierst. Aber in der Gesamtheit als Logo kann ich mir das gut vorstellen. Wirkt dadurch nicht so aufdringlich 

Bei der Positionierung des Diadems in der unteren Ecke, solltest du dann auf ein statisches Layout zumindest des Rahmens achten, so das nur der "Inhaltsbereich" scrollbar ist, falls es notwendig wird.

Grüße Marco


----------



## Tomatenmark (30. August 2008)

Und meint ihr dann dafür das Diadem aus dem header raus ? 
Oder wo genau meint ihr das Diadem hin.
Also Hintergrund für den Inhalt  (hab ich das richtig verstanden) oder schon noch im Header ?


----------



## ink (30. August 2008)

Das Diadem unten links in die braun/orange-farbene Fläche.
Im Header könnte mensch vielleicht ne kleine Variante stehen lassen, aber das
ist dir überlassen. 

mfg


----------



## Tomatenmark (30. August 2008)

Das war eine gute Idee 
ich hab jetzt allerdings die Farben vom Diadem und der Schrift zuerst invertiert und dann auf 8,5 Transparenz gestellt. Mit dem weiß sah es so blas aus.
Finde es sieht besser aus, wenn es so dunkel draufgeprägt ist 
Irgendwie wie so eine Holzgravur 

Das Logo + Schrift im Header hab ich oben mit einem grauschenweichzeichner und schwarz etwas betont.
Ich hab den Rahmen um den Header weggetan und dann einen Verlauf auf dem Boden des Header gemacht 

Bin für jede weitere Kritik sehr dankbar 

 Design Update


----------



## ink (30. August 2008)

Moin Moin
Hmm, setz das Logo unten noch etwas weiter runter. 
(Es schaut da so "eingezwängt" aus)

Ich finds insgesamt sehr gelungen!

mfg


----------



## Tomatenmark (30. August 2008)

so ?
update


----------



## smileyml (30. August 2008)

...vielleicht machst du das untere Logo genauso groß wie das im Header und setzt die untere Kante dann mit der unteren des weißen Inhaltsfeldes gleich. Dabei ist das bereits erwähnte statisches Layout im Hinterkopf zu behalten und die untere weiße "Grenze" noch nach oben zu verschieben. Und im Header das Logo könnte den Abstand zum rechten Rand nochmal halbieren. 
Aber sonst - sehr gelungen.

Grüße Marco


----------



## Tomatenmark (30. August 2008)

Hmmm ich will jetzt eigentlich keine statische Seitenlänge haben 
Glaubst du ist das nötig, wenn ich das Logo so reinbring ?
Denn sonst lass ich es lieber weg, denn ich finde das im Header sieht eh sehr gut aus und nochmal genau das gleiche Logo + Schriftzug find ich nicht unbedingt nötig.

Und nur grad Interessehalber bzw. um etwas zu lernen.
Wieso schieb ich das Logo im Header um die Hälfte des Abstands näher an den Rand ?


----------



## smileyml (30. August 2008)

Hallo,

du kannst meines Erachtens auch das zweite untere Logo weglassen, da eine Doppelung, wie du selbst schon festgestellt hast nicht wirklich notwendig ist. Dann musst du dich auch nicht zwangsweise in ein statisches Layout begeben.

Durch das Verschieben des Logos im Header bekommt dieser eine leicht andere Gewichtung und wirkt "interessanter/schöner" (ist aber subjektiv). Und mit dem von mir beschriebenen Abstand wollt ich nur eine ungefähre Größe angeben, um nicht von "einem bissl" zu reden.

Grüße Marco


----------



## Tomatenmark (1. September 2008)

So dann hier mal das vorläufige Endresultat 
(Wobei natürlich Verbesserungsvorschläge weiterhin willkommen sind)

Design Update

Danke nochmals für eure Hilfe


----------



## ink (1. September 2008)

Ich würd sagen: Passt so!

Und: Immer gerne. 

mfg


----------

