Anzeige

Mein Webauftritt und mein Developer Blog

Mein Webauftritt und mein Developer Blog | PSD-Tutorials.de

Erstellt von afr0kalypse, 09.07.2013.

  1. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    Hi zusammen,
    ich bin endlich mal fertig geworden mit meinem Webauftritt und habe auch gleich passend dazu einen Blog eingestellt und versucht beides farblich passend abzustimmen. Würde mich über Feedback und Verbesserungsvorschläge eurerseits freuen.
    http://der-alex.com
    und
    http://blog.der-alex.com
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.075
    Geschlecht:
    männlich
    Ort:
    Ö
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Was mir mal so spontan auffällt:
    Du machst deinen blog annähernd responsive (es erscheint ein kleiner horizontaler Scrollbalken, der relativ leicht zu entfernen sein sollte), schaffst es aber nicht, das simple Design deiner Website responsiv zu machen?
    Bei deiner Website gefällt mir der Ansatz, jedem Buchstaben etwas zuzuordnen. Aber woher weiß der User, dass er auf einen Buchstaben klicken soll? Da könntest du wenigstens einen Hand-Cursor verwenden?
    Außerdem verwendest du das placeholder Attribut missbräuchlich, das ist kein Ersatz für labels.
     
    #2      
  3. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Hi Myhar. Danke für die Hinweise.
    Den horizontalen Scrollbalken habe ich ehrlich gesagt noch gar nicht bemerkt :D mal sehen wo der her kommt. Die Website habe vor dem Blog erstellt und bin erst nach Veröffentlichung auf das Responsive Grid von unsemantic gestoßen. Aber da gebe ich dir Recht, das muss noch überarbeitet werden.
    Den Hand-Cursor werde ich auch noch einbinden. Hast du eine Idee, wie man dem Smartphone- / Tabletuser einen Hinweis geben kann, wie die Website funktioniert? Da gibts ja keinen Cursor mehr...
    Die Placeholder habe ich nur genommen, weil mir die Label einfach nicht gefielen. Da muss ich mir auch noch was überlegen.
    VG
     
    #3      
  4. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Genau das war auch mein erster Gedanke!
    Für Smartphone/Tablet User mag das gehen (weil diese eh keinen mouseover Effekt haben), aber als Desktop User erwartet man einen entsprechenden Cursor, wenn man etwas anklicken kann/soll.

    Ansonsten würde ich auf Blocksatz verzichten - verschlechtert die Lesbarkeit.
    Und auch die Bilderwahl würde ich nochmal anpacken. Bei Webdesign alte Farbtuben und bei Coding ein altes, unterbelichtetes Buch zu zeigen, spricht zumindest mich nicht wirklich an.

    Den Blog hingegen finde ich soweit ganz gut - fehlt nur noch der Content ;)
     
    #4      
  5. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Hi Aelfry. Ja die Bilder... :) Ich möchte gerne alles aus eigener Hand anbieten. ebenso meine Fotos. Das steht bei mir noch auf dem Plan. Blocksatz lasse ich allerdings nicht gelten ;) Sowohl Blockstz als auch Linksbündig bzw Flattersatz haben seine Vor- und Nachteile. Ich denke bei der relativ schmalen Textbreite geht das noch in Ordnung ;). Beim Blog überlege ich mir das noch mal.
     
    #5      
  6. traumfantasie

    traumfantasie will dazulernen

    453
    Dabei seit:
    15.06.2009
    Beiträge:
    4.156
    Geschlecht:
    weiblich
    Ort:
    Leipzig
    Software:
    CS6, Cinema 4D R16, Win 8.1
    Kameratyp:
    Nikon D5100
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Was mir auffällt ist, dass durch den Blocksatz dein Text teilweise aufgerissen wird und unschöne große Abstände zwischen den Wörtern entstehen. Das solltest du unbedingt ändern. Sieht nicht schön aus und aus typografischer Sicht nicht gut umgesetzt. Kenne mich in Webseitenbau nicht so aus. Also kann ich dir auch keine Lösung bieten.
     
    #6      
  7. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Mein schöner blockiger Blocksatz... na gut ihr habt mich überredet ;) Ich änder den auch mal.
     
    #7      
  8. Aelfry

    Aelfry Web Developer

    Dabei seit:
    17.02.2007
    Beiträge:
    794
    Geschlecht:
    männlich
    Ort:
    Mönchengladbach
    Software:
    CC, SublimeText, Git, Sass, Gulp
    Kameratyp:
    Canon EOS 60D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Manchmal ist es von Vorteil es so zu machen, wie alle anderen ;)
    Du kannst ja bei Gelegenheit nochmal zum Thema Webdesign und Blocksatz recherchieren.
    Oder allgemein warum bzw. wann er im Print Bereich verwendet wird.
     
    #8      
  9. dagdavincy

    dagdavincy Aktives Mitglied

    Dabei seit:
    31.07.2012
    Beiträge:
    1.815
    Geschlecht:
    männlich
    Ort:
    saarland
    Software:
    CS5 Mastersuite, Corel
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Dein minimalistischer Gestaltungsansatz hat was symphatisches. Ich erlaube mir dennoch ein paar freundliche Hinweise: Die düsteren Bildmotive "Farbpalette" und "Buch" sprechen nicht für Deine bildbearbeitende Kompetenz.

    Den Flattersatz linksb. find ich zunächst okay. Etwas angenehmer käme es aber, wenn Du ein bis zwei Absätze einfügst um der Lesefreundlichkeit zu dienen.

    Bei der überschaubaren Textlänge können unglückliche Einrisse am rechten Rand durch Trennung gemindert werden. Dies gilt auch für Blocksatz wenn Du den unbedingt vorziehen solltest.

    Zitat: "Ebenso belese ich mich über aktuelle Web- und Designtrends und neue Standards und..." Besser wäre "Ich informiere mich.., -oder - halte mich auf aktuellem Stand"

    mit ferundlichem Klick
     
    #9      
  10. heikehk

    heikehk die freundliche Eule

    111
    Dabei seit:
    30.06.2013
    Beiträge:
    1.109
    Geschlecht:
    weiblich
    Software:
    Creative Suite CS5.5 und CS6
    Kameratyp:
    Canon EOS 40D, Canon EOS 70D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Hallo Alex,
    ich finde das Design durchaus ansprechend und die Idee mit Deinen Buchstaben aus dem Namen Themen zu verbinden toll. Allerdings finde ich die Seite was Besucherfreundlichkeit angeht nicht so gelungen (das wurde hier ja auch schon angemerkt), denn man kann nicht erkennen, was sich hinter den Buchstaben versteckt. Ich bin jetzt mal ehrlich, wenn ich über eine Google-Suche auf Deine Seite stolpern würde und dann nur mit vier Farbfeldern konfrontiert wäre, dann könnte mein Spieltrieb vielleicht dafür sorgen zu klicken, allerdings wenn ich auf der Suche nach was bin und eine "Landingpage" so aussieht, dann klicke ich eher zu einem Angebot, bei dem ich mich schneller zurechtfinde.

    Wie wäre es, wenn Du bei einem MouseOver, wo Du sowieso den Hintergrund änderst, etwas mehr Informationen zeigen würdest? Das klappt leider nicht für das Handy, aber hier könntest Du dann ja die Infos gleich mit reinnehmen...

    Das Impressum führt dann zu einem völlig anderen Layout und dort ist ein großes Menu ohne Inhalt. Hier solltest Du zumindest darauf achten, dass die Bereiche, für die es keine Inhalte gibt, ausgeblendet sind.

    Ich bin gespannt, wie es mit der Seite weiter geht...

    Gruß
    Heike
     
    #10      
  11. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Hi Heikehk,
    die Idee mit dem Mouseover ist gut. Ich schau mal, was ich daraus machen kann.
    Bei dem Blog hast du natürlich recht, da fehlt noch der Inhalt... Ich arbeite hart daran :) habe in den letzen 3 Tagen auch schon fleißig 3 Artikel geschrieben ;)
     
    #11      
  12. roweso

    roweso Dauer-Bashing-Ziel

    Dabei seit:
    03.03.2011
    Beiträge:
    1.585
    Geschlecht:
    männlich
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Ich bin nicht vom Fach, finde aber, dass alles auf mich frisch und transparent wirkt. Hilft Dir wahrscheinlich nicht weiter, aber sei es drum.
    Daumen hoch.
    Grüße
     
    #12      
  13. Gawainos

    Gawainos Noch nicht viel geschrieben

    Dabei seit:
    05.10.2010
    Beiträge:
    14
    Geschlecht:
    männlich
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Hi,

    hmmm, ich weiß nicht, ob etwas nicht richtig mache aber wenn ich dann endlich herausgefunden habe, dass ich die Vierecke anklicken kann, muss ich feststellen, dass die Site noch oben wuscht und ich dann einen Textblock vor mir habe,

    Mal über die typografischen Schwächen hinweg gesehen...wie komm ich zurück zu den Vierecken?
    Nein, ich möchte nicht mit den Maustasten nach oben scrollen.
    Nein, ich möchte auch nicht die <---Taste der Tastatur nehme...zu faul, mich zu bewegen.
    Was nun? Einen Back- oder Zurückbutton vielleicht... :eek:)
    Oder ähnliches. Was ganz elegantes eventuell?..

    Alles net bös gemeint...

    Gruß
    Gawainos
    (vom Fach)
     
    #13      
  14. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Der Notizzettel wird immer länger :)
    @gawainos vom Fach: was genau meinst du mit typografischen Schwächen?
    Also den Punkt Usability muss ich wohl noch mal stark überarbeiten :)
     
    #14      
  15. heikehk

    heikehk die freundliche Eule

    111
    Dabei seit:
    30.06.2013
    Beiträge:
    1.109
    Geschlecht:
    weiblich
    Software:
    Creative Suite CS5.5 und CS6
    Kameratyp:
    Canon EOS 40D, Canon EOS 70D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Der Text ist nicht so gut lesbar. Der Kontrast beim lila Teil ist nicht optimal, hier ist es für alte Damen wie mich schon schwerer zu lesen.
    Was mir gerade auffällt, weil ich vorher die Texte nicht gelesen habe, ist, dass bei den Texten quasi keine Absätze vorhanden sind. Hier würde ich mir für die bessere Lesbarkeit etwas mehr Struktur wünschen. Zusätzlich frage ich mich gerade, an wen Du dich mit Deinen Texten wendest. Falls es um potenzielle Kunden geht, dann solltest Du die Texte noch einmal überarbeiten, denn diese interessiert nicht, was und wer du bist, sondern was Du für sie machst, bzw. welchen Vorteil sie haben, wenn Sie Dich beauftragen und für Welche Fragen Du der richtige Ansprechpartner bist.
    Deinen Blog merke ich mir. Ich mach ja auch WebDesign und bin immer an Tipps zu HTML, CSS & Co interessiert.

    Gruß
    Heike
     
    #15      
  16. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Ja, die schwachen Kontraste sind mir auch schon aufgefallen. Vielleicht sollte ich für den Content-Teil die Farben aus dem Mousover Effekt bei den Blog-Kategorien übernehmen.
    Ich probiere das mal aus. Mal sehen ob ich es heute noch schaffe ein Update hochzuladen.
     
    #16      
  17. heikehk

    heikehk die freundliche Eule

    111
    Dabei seit:
    30.06.2013
    Beiträge:
    1.109
    Geschlecht:
    weiblich
    Software:
    Creative Suite CS5.5 und CS6
    Kameratyp:
    Canon EOS 40D, Canon EOS 70D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Bin gespannt :)
     
    #17      
  18. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Ein erstes Update gibts hier: http://der-alex.com/
    Die Seite ist nun responsive. Content-Background habe ich heller gestaltet, Bilder bei Webdesign und Development geändert, Pointer eingebaut, Slides auf den Content gelegt und einen Top Link gesetzt, damit der Content geschlossen und man wieder auf die 4 Buchstaben kommt (nein nicht den Popo) :)
     
    Zuletzt bearbeitet: 10.07.2013
    #18      
  19. heikehk

    heikehk die freundliche Eule

    111
    Dabei seit:
    30.06.2013
    Beiträge:
    1.109
    Geschlecht:
    weiblich
    Software:
    Creative Suite CS5.5 und CS6
    Kameratyp:
    Canon EOS 40D, Canon EOS 70D
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    "oops da ist was schief gelaufen. Bitte kontaktiere Deinen Admin...."
    Was ist das für ein Fehler?
    Kontraste sind schöner finde ich. Top funktioniert. Fehlen nur die Infos, dass man unter den Farbflächen was findet....
     
    #19      
  20. afr0kalypse

    afr0kalypse Allwissendes Karmameerschweinchen!

    Dabei seit:
    09.11.2005
    Beiträge:
    819
    Geschlecht:
    männlich
    Ort:
    Mi Casa
    Software:
    paint, notepad++
    Kameratyp:
    Canon EOS 40d
    Mein Webauftritt und mein Developer Blog
    AW: Mein Webauftritt und mein Developer Blog

    Der Fehler ist ne Dummybox, die später Fehlermeldungen via php ausgibt.
    Als Info für Desktop-User habe ich den Pointer-Cursor eingebunden. Ansonsten denke ich schon, dass der User ein wenig mitdenken darf :) Auf nem Smartphone kann der ja auch Button anklicken, ohne dass die ihm sagen 'klick mich an'.
     
    #20      
x
×
×