Skaju Screen & Logodesign

Hallo Com,

ich habe nun ein Webdesign erstellt, welches für unsere (ich mache die Seite mit nem Kollegen) Webseite sein soll und ich wollte nun eure Meinung wissen. Wir wollten uns auf Screen- und Logodesign spezialisieren.

Design:
Die Icons und Profilbilder werden noch angepasst ^^
Die Bilder beim Portfolio sind nicht von uns. Wie gesagt, es soll nur ein Beispiel sein!
Soll nur für das erste Erscheinungsbild dienen.
[Only registered and activated users can see links. Click Here To Register...]

Unsere nächsten Werke werde ich hier auch zur Schau stellen, damit ihr mir und meinem Kollegen eure Meinung sagen und evtl. auch Tipps geben könnt.

MfG
BitC0re

Hey!

Dann will ich dir mal helfen dein Design zu verbessern :)

Für mich sieht es auf den ersten Blick nach einem One-Page-Design aus. Das war wahrscheinlich dein Ziel. Hierfür müsstest du einige Dinge aber noch unbedingt ändern, damit dir dein One-Page-Design gelingt.

Ich gehe die Seite von oben nach unten durch, nenne davor aber noch ein paar allgemein Dinge.

Typischerweise styled man seine Teile der Seite so, dass sie die volle Größe des Bildschirms ausfüllen, d.h. dass bspw. das Bild mit deinem Logo + Navigation den ganzen Bildschirm ausfüllen und man dann runterscrollt und die weiteren Teile sieht. Auch kannst du deine Ebenenstile der Texte nicht direkt so anwenden im späteren HTML/CSS coden - du kannst höchstens inneren und äußeren Schatten + Verlauf machen. Bleib aber am besten bei einfarbigem Text ohne Schatten. Allgemein finde ich die Texte in Großbuchstaben zu groß gewählt.

In Part 1 solltest du die rote Leiste weglassen und den Text der Navigation kleiner. Die Unterpunkte der Navigation sollten mit den nachfolgenden Punkten übereinstimmen und in der Reihenfolge bleiben. Eigentlich müsste deine Navigation lauten:
What we do - About Us - Portfolio
Mir fehlt dort noch der Punkt "Contact".
Auch kann man sich ein anderes Konzept einer Navigation vorstellen - z.B. dass nach dem Runterscrollen nach dem Fold die Navigation oben fixiert wird.

Part 2 ist schon besser gelöst. Hier würde ich das erstmal so lassen und dann später sehen ob es sich ins Design noch einpasst.

Bei Part 3 stört mich am meisten, dass der Teil "Our Team" in den Hintergrund/Streifen reingeht. Ich würde es davon abtrennen, den Text "Our Team" wieder mittig positionieren und darunter nebeneinander die beiden Typen. Aber neben den Bildern noch den Namen und die Funktion.

Bei Part 4 respektive dem Portfolio würde mir als Idee noch einfallen, dass man die Übersicht auf die volle Breite zieht.

"Our Clients" würde ich noch deren Rezensionen hinzufügen - also quasi deren Feedback in einem Carousel.

Wie bereits gesagt würde ich unbedingt noch darunter die Kategorie Contact erstellen und dort ein kleines Kontaktformular einbauen.

Im Footer ist der Text+Icons zu groß.


So ein Design zu erstellen ist schwierig und ich sitze bei meinem aktuellen One-Page-Projekt auch lange da und überlege was ich genau machen will - denn es gibt so viele Möglichkeiten. Alles was ich geschrieben habe, waren Vorschläge. Es gibt aber noch ganz andere Varianten.
Hierzu verlinke ich dir mal 2 Inspirationsquellen:

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Teilweise sind die Seiten sehr over-the-top, sprich sie sollten nicht unbedingt dein Ziel sein sie zu kopieren - aber damit bekommst du wohl mehr einen Eindruck wie man so etwas aufbauen kann :)

Gruß
LeKoArts

Quote:

Originally Posted by LeKoArts Hey! Dann will ich dir mal helfen dein Design zu verbessern :) Für mich sieht es auf den ersten Blick nach einem One-Page-Design aus. Das war wahrscheinlich dein Ziel. Hierfür müsstest du einige Dinge aber noch unbedingt ändern, damit dir dein One-Page-Design gelingt. Ich gehe die Seite von oben nach unten durch, nenne davor aber noch ein paar allgemein Dinge. Typischerweise styled man seine Teile der Seite so, dass sie die volle Größe des Bildschirms ausfüllen, d.h. dass bspw. das Bild mit deinem Logo + Navigation den ganzen Bildschirm ausfüllen und man dann runterscrollt und die weiteren Teile sieht. Auch kannst du deine Ebenenstile der Texte nicht direkt so anwenden im späteren HTML/CSS coden - du kannst höchstens inneren und äußeren Schatten + Verlauf machen. Bleib aber am besten bei einfarbigem Text ohne Schatten. Allgemein finde ich die Texte in Großbuchstaben zu groß gewählt. In Part 1 solltest du die rote Leiste weglassen und den Text der Navigation kleiner. Die Unterpunkte der Navigation sollten mit den nachfolgenden Punkten übereinstimmen und in der Reihenfolge bleiben. Eigentlich müsste deine Navigation lauten: What we do - About Us - Portfolio Mir fehlt dort noch der Punkt "Contact". Auch kann man sich ein anderes Konzept einer Navigation vorstellen - z.B. dass nach dem Runterscrollen nach dem Fold die Navigation oben fixiert wird. Part 2 ist schon besser gelöst. Hier würde ich das erstmal so lassen und dann später sehen ob es sich ins Design noch einpasst. Bei Part 3 stört mich am meisten, dass der Teil "Our Team" in den Hintergrund/Streifen reingeht. Ich würde es davon abtrennen, den Text "Our Team" wieder mittig positionieren und darunter nebeneinander die beiden Typen. Aber neben den Bildern noch den Namen und die Funktion. Bei Part 4 respektive dem Portfolio würde mir als Idee noch einfallen, dass man die Übersicht auf die volle Breite zieht. "Our Clients" würde ich noch deren Rezensionen hinzufügen - also quasi deren Feedback in einem Carousel. Wie bereits gesagt würde ich unbedingt noch darunter die Kategorie Contact erstellen und dort ein kleines Kontaktformular einbauen. Im Footer ist der Text+Icons zu groß. So ein Design zu erstellen ist schwierig und ich sitze bei meinem aktuellen One-Page-Projekt auch lange da und überlege was ich genau machen will - denn es gibt so viele Möglichkeiten. Alles was ich geschrieben habe, waren Vorschläge. Es gibt aber noch ganz andere Varianten. Hierzu verlinke ich dir mal 2 Inspirationsquellen: [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...] Teilweise sind die Seiten sehr over-the-top, sprich sie sollten nicht unbedingt dein Ziel sein sie zu kopieren - aber damit bekommst du wohl mehr einen Eindruck wie man so etwas aufbauen kann :) Gruß LeKoArts

Hi,

erstmal vielen Dank für deine ausführliche und gute Kritik. Werde mich dann morgen mal dransetzen und mein Designkonzept überarbeiten. Danke auch für die Inspirationsquellen. Echt nice :D

Das Problem ist hier offensichtlich.
Das Design passt farblich nicht zusammen. Man hätte sich im allgemeinen für die Farbe Rot und Schwarz eintscheiden sollen und keine Anderen Farben im Header nehmen sollen.
Der Andere Punkt: Es wirkt einfach alles sehr gross. Man sollte immer (in Photoshop) auf 100%-Ansicht arbeiten, denn sonst stimmen die Verhältnisse nicht ganz. Jetzt im Gesamtbild wirkt es zwar angenehm Gross.. jedoch sieht es der leztendliche Nutzer über den ganzen Bildschirm gezogen was das ganze noch anders erscheinen lässt.

Der Rest ist ja von @LekoArts schon erwähnt. :)

Freundliche Grüsse und viel Erfolg!

Quote:

Originally Posted by Swiftdesigns Das Problem ist hier offensichtlich. Das Design passt farblich nicht zusammen. Man hätte sich im allgemeinen für die Farbe Rot und Schwarz eintscheiden sollen und keine Anderen Farben im Header nehmen sollen. Der Andere Punkt: Es wirkt einfach alles sehr gross. Man sollte immer (in Photoshop) auf 100%-Ansicht arbeiten, denn sonst stimmen die Verhältnisse nicht ganz. Jetzt im Gesamtbild wirkt es zwar angenehm Gross.. jedoch sieht es der leztendliche Nutzer über den ganzen Bildschirm gezogen was das ganze noch anders erscheinen lässt. Der Rest ist ja von @LekoArts schon erwähnt. :) Freundliche Grüsse und viel Erfolg!

Danke für deine Kritik. Ich bin ja im Moment noch in der Findungsphase ;D

wirkt lq, wird aber wshl am imageuploader liegen.
ich würde für flatdesigns ne andere schrift nehmen und nicht unbedingt mit bordern arbeiten.
dann solltest du dem footer einen anderen hintergrund geben, ggf. den orangenen
ist vielleicht nur geschmackssache, aber ich mag den schwarzen hintergrund nicht :c

Quote:

Originally Posted by LeKoArts Hey! Dann will ich dir mal helfen dein Design zu verbessern :) Für mich sieht es auf den ersten Blick nach einem One-Page-Design aus. Das war wahrscheinlich dein Ziel. Hierfür müsstest du einige Dinge aber noch unbedingt ändern, damit dir dein One-Page-Design gelingt. Ich gehe die Seite von oben nach unten durch, nenne davor aber noch ein paar allgemein Dinge. Typischerweise styled man seine Teile der Seite so, dass sie die volle Größe des Bildschirms ausfüllen, d.h. dass bspw. das Bild mit deinem Logo + Navigation den ganzen Bildschirm ausfüllen und man dann runterscrollt und die weiteren Teile sieht. Auch kannst du deine Ebenenstile der Texte nicht direkt so anwenden im späteren HTML/CSS coden - du kannst höchstens inneren und äußeren Schatten + Verlauf machen. Bleib aber am besten bei einfarbigem Text ohne Schatten. Allgemein finde ich die Texte in Großbuchstaben zu groß gewählt. In Part 1 solltest du die rote Leiste weglassen und den Text der Navigation kleiner. Die Unterpunkte der Navigation sollten mit den nachfolgenden Punkten übereinstimmen und in der Reihenfolge bleiben. Eigentlich müsste deine Navigation lauten: What we do - About Us - Portfolio Mir fehlt dort noch der Punkt "Contact". Auch kann man sich ein anderes Konzept einer Navigation vorstellen - z.B. dass nach dem Runterscrollen nach dem Fold die Navigation oben fixiert wird. Part 2 ist schon besser gelöst. Hier würde ich das erstmal so lassen und dann später sehen ob es sich ins Design noch einpasst. Bei Part 3 stört mich am meisten, dass der Teil "Our Team" in den Hintergrund/Streifen reingeht. Ich würde es davon abtrennen, den Text "Our Team" wieder mittig positionieren und darunter nebeneinander die beiden Typen. Aber neben den Bildern noch den Namen und die Funktion. Bei Part 4 respektive dem Portfolio würde mir als Idee noch einfallen, dass man die Übersicht auf die volle Breite zieht. "Our Clients" würde ich noch deren Rezensionen hinzufügen - also quasi deren Feedback in einem Carousel. Wie bereits gesagt würde ich unbedingt noch darunter die Kategorie Contact erstellen und dort ein kleines Kontaktformular einbauen. Im Footer ist der Text+Icons zu groß. So ein Design zu erstellen ist schwierig und ich sitze bei meinem aktuellen One-Page-Projekt auch lange da und überlege was ich genau machen will - denn es gibt so viele Möglichkeiten. Alles was ich geschrieben habe, waren Vorschläge. Es gibt aber noch ganz andere Varianten. Hierzu verlinke ich dir mal 2 Inspirationsquellen: [Only registered and activated users can see links. Click Here To Register...] [Only registered and activated users can see links. Click Here To Register...] Teilweise sind die Seiten sehr over-the-top, sprich sie sollten nicht unbedingt dein Ziel sein sie zu kopieren - aber damit bekommst du wohl mehr einen Eindruck wie man so etwas aufbauen kann :) Gruß LeKoArts

Quote:

Originally Posted by Swiftdesigns Das Problem ist hier offensichtlich. Das Design passt farblich nicht zusammen. Man hätte sich im allgemeinen für die Farbe Rot und Schwarz eintscheiden sollen und keine Anderen Farben im Header nehmen sollen. Der Andere Punkt: Es wirkt einfach alles sehr gross. Man sollte immer (in Photoshop) auf 100%-Ansicht arbeiten, denn sonst stimmen die Verhältnisse nicht ganz. Jetzt im Gesamtbild wirkt es zwar angenehm Gross.. jedoch sieht es der leztendliche Nutzer über den ganzen Bildschirm gezogen was das ganze noch anders erscheinen lässt. Der Rest ist ja von @LekoArts schon erwähnt. :) Freundliche Grüsse und viel Erfolg!

Quote:

Originally Posted by laxdudiefax wirkt lq, wird aber wshl am imageuploader liegen. ich würde für flatdesigns ne andere schrift nehmen und nicht unbedingt mit bordern arbeiten. dann solltest du dem footer einen anderen hintergrund geben, ggf. den orangenen ist vielleicht nur geschmackssache, aber ich mag den schwarzen hintergrund nicht :c

So, habe nun einiges verändert und die Ratschläge wahrgenommen.
- Das Portfolio habe ich jedoch nicht auf die komplette Größe gezogen, da ich es so schöner finde (ist ja Geschmackssache ;D).
- Jedoch ist die Website nun in einer einheitlichen Farbe und der schwarze Hintergrund ist jetzt dunkel grau und hat kein Muster mehr.
- Zudem sind die einzelnen Bereiche so groß, dass sie den ganzen Bildschirm ausfüllen.
- Der Bereich Contact wurde auch eingebaut.
- Die Icons und Schriften wurden kleiner gemacht.
- Das Team hat nun ein separate Informationen usw.
- Den Statsbereich habe ich erstmal rausgemacht. Kommt evtl. wieder rein, weiß ich aber noch nicht genau.
- Es wurden keine Schatten mehr benutzt

Resultat:
[Only registered and activated users can see links. Click Here To Register...]

Sieht es nun besser aus? Es ist noch nicht fertig! Ich möchte lediglich wissen, ob der Ansatz nun besser gewählt ist. Es sind noch ein paar Optmierungen geplant :D

Bitte um eure Meinungen

Das sieht doch schonmal besser aus :)
Wie schon beim 1. Text erläutere ich erst allgemein, dann von oben nach unten.

Du solltest bei deinen Texten den Rand weglassen. Wenn man etwas nicht so gut lesen kann ohne Rand musst du dir was anderes einfallen lassen. Die Schriftart würde ich persönlich nicht wählen, da sagen mir andere mehr zu (wie heißt denn deine Schriftart?).
Allgemein ist auch noch dein Problem, dass du viel zu oft Großbuchstaben benutzt. Eigentlich finde ich den Text in Großbuchstaben nur in der Navigation, bei "Start your project today" und die jeweiligen Überschriften in Ordnung (letztere würde ich ohne Unterstreichung machen).

1: Beim "Start Now"-Button den Rand weglassen und den Text unter "Start your project today" in Kleinbuchstaben (der Text ergibt noch nicht so viel Sinn :P)

2: Die 4 Felder kannst du ruhig auf die Breite des Portfolios ziehen. Eher wieder allgemein: Achte darauf, dass vom Logo an bis ganz unten die Objekte quasi an der gleichen Kante liegen, an der gleichen Linie abschließen. Später im Coding ist das durch Container mit den gleichen Breiten dann gelöst, aber das kannst du ja schonmal so im Design andeuten.

3: Die blaue Form wirst du wohl über CSS nicht so realisieren können. Unten links würde ich einfach eine ganz normale Ecke machen. Sonst ist es so ok (bis auf den schon angesprochenen Text)

4: Erstell für die Bilder mal Hover-Effekte, was du dir so vorstellst :)

5: Arbeite bei den Feldern lieber mit "normalen" Feldern, die dann auch einen Hintergrund haben. Den "Send Message" Button kannst du wie den "Start Now" gestalten.

Gruß

Quote:

Originally Posted by LeKoArts Das sieht doch schonmal besser aus :) Wie schon beim 1. Text erläutere ich erst allgemein, dann von oben nach unten. Du solltest bei deinen Texten den Rand weglassen. Wenn man etwas nicht so gut lesen kann ohne Rand musst du dir was anderes einfallen lassen. Die Schriftart würde ich persönlich nicht wählen, da sagen mir andere mehr zu (wie heißt denn deine Schriftart?). Allgemein ist auch noch dein Problem, dass du viel zu oft Großbuchstaben benutzt. Eigentlich finde ich den Text in Großbuchstaben nur in der Navigation, bei "Start your project today" und die jeweiligen Überschriften in Ordnung (letztere würde ich ohne Unterstreichung machen). 1: Beim "Start Now"-Button den Rand weglassen und den Text unter "Start your project today" in Kleinbuchstaben (der Text ergibt noch nicht so viel Sinn :P) 2: Die 4 Felder kannst du ruhig auf die Breite des Portfolios ziehen. Eher wieder allgemein: Achte darauf, dass vom Logo an bis ganz unten die Objekte quasi an der gleichen Kante liegen, an der gleichen Linie abschließen. Später im Coding ist das durch Container mit den gleichen Breiten dann gelöst, aber das kannst du ja schonmal so im Design andeuten. 3: Die blaue Form wirst du wohl über CSS nicht so realisieren können. Unten links würde ich einfach eine ganz normale Ecke machen. Sonst ist es so ok (bis auf den schon angesprochenen Text) 4: Erstell für die Bilder mal Hover-Effekte, was du dir so vorstellst :) 5: Arbeite bei den Feldern lieber mit "normalen" Feldern, die dann auch einen Hintergrund haben. Den "Send Message" Button kannst du wie den "Start Now" gestalten. Gruß

Danke für die neuen Tipps :D
Momentan benutze ich als Schriftart: Octin College Regular
Was meinst du genau bei deinem 3. Kritikpunkt mit der blauen Form? Meinst du den blauen Polygonenhintergrund?

Zur Schriftart:

Die wirst du wohl nicht über einen CDN dann später im Coding beziehen können.

Such mal nach "Google Fonts" und such dir dort eine Font raus.

Ich meine die blaue Form wo dann Name, Alter etc drin steht :)

Quote:

Originally Posted by LeKoArts Zur Schriftart: Die wirst du wohl nicht über einen CDN dann später im Coding beziehen können. Such mal nach "Google Fonts" und such dir dort eine Font raus. Ich meine die blaue Form wo dann Name, Alter etc drin steht :)

Okay.
Achso, ja gut, dann mach ich das wieder rechteckig. Sieht so oder so gut aus :D