Kritik zu erstem Entwurf

Kritik zu erstem Entwurf | Seite 3 | PSD-Tutorials.de

Erstellt von Waegi, 05.12.2012.

  1. Zeusfeld

    Zeusfeld Noch nicht viel geschrieben

    Dabei seit:
    08.07.2009
    Beiträge:
    20
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Mir ist das Grün im Contentbereich zu stark und auch etwas zu viel.

    BG
    Benjamin
     
    #41      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. Lycanos

    Lycanos Guest

    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Der 2. Entwurf ist erheblich besser - den grünen Bereich verkleinern und als Menü nutzen, im weißen Teil den Text. Ist schon jetzt wesentlich gefälliger und besser anzuschauen als der erste Entwurf. Damit würde ich weiter arbeiten. Viel Erfolg damit.
     
    #42      
  4. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Danke für die Antworten.

    @Lycanos, also du meinst das grün verkleinern? Aber als Menü nutzen möchte ich es nicht ganz, möchte schon die klare Unterteilung oben behalten, Navigation und untern der Content, weshalb ich ja auch ein bissche Platz im grünen Bereich für die Bilder benötige.

    Mfg Waegi
     
    #43      
  5. Trabilady

    Trabilady Aktives Mitglied

    Dabei seit:
    09.11.2012
    Beiträge:
    415
    Geschlecht:
    weiblich
    Ort:
    Bernau bei Berlin
    Software:
    Photoshop CS6
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Mir gefällt der zweite Entwurf ebenfalls um einiges besser, allerdings nur,
    wenn nicht so viel Text auf die Startseite kommt, wie im ersten Entwurf. ;)

    Die Navigation würde ich auch da lassen, wo Du sie jetzt hast.

    Liebe Zweitaktgrüße und weiterhin viel Erfolg und tolle Ideen.
     
    #44      
  6. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Danke, ja das hab ich ja schon oft genug betont, dass das nur Text zum en bisschen füllen war, das war zu viel.

    Hab nochmal ne Frage an alle, und zwar haltet ihr es für sinnvoll im weißen Bereich den Text zu machen und in dem grünen so eine Art Kontaktbox, damit man das direkt auf einen Blick hat? Die Grüne Fläche ist mittlerweile auch kleiner geworden.

    mfg Waegi
     
    #45      
  7. Raphale

    Raphale angehender Webentwickler

    Dabei seit:
    09.10.2012
    Beiträge:
    87
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    hmm aber nur auf der Startseite/index oder?

    denn bei "über uns" oder "leistungen" brauchst du den Platz bestimmt für andere Dinge oder ?

    für die Startseite find ich es ok bzw(bild+nr.+adresse) aber weitere und genauere Infos unter den Punkt "Kontakt" belassen.
    Indem Sinne dann auch die unterseiten...links = Text und rechts = Bilder+extra Infos.

    Deine steigerung beim Template/entwurf finde ich sau gut (bonus wert ;))

    MFG
    Raphaele

    Tipp:
    Beim Content würde ich einen weißen hintergrund nehmen, den grünen Bogen als Hintergrundbild und mit transition oder animation beim wechseln zu unterseiten immer ein und ausfahren lassen(von rechts nach links als Ladesymbol) ;)
     
    #46      
  8. GrafFoto

    GrafFoto Noch nicht viel geschrieben

    Dabei seit:
    15.12.2012
    Beiträge:
    11
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Bei so großen Bildern solltest du bedenken, dass immer mehr Leute mit Smartphone oder Tablet ins Netz gehen. Wenn du da keine spezielle Lösung (mobile-Seite oder responsive Design) anbietest, dann dauert es ewig bis das geladen ist und die Seite ist kaum zu nutzen.
     
    #47      
  9. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    @Raphale, wie meinst du das als Ladesymbol, an sich das ein und ausfahren finde ich aber gut, also zum Anfang, wenn man auf die Seite kommt, geht der Bogen weg und der Contenthintergrund ist komplett weiß, finde ich ne Gute Idee, bei der Kontaktbox rechts würde ich dann Adresse sowie die Telefonnummer schreiben, unter dem Punkt Kontakt dann evtl. nen Kontaktformular und ne Anfahrtsskizze, ähnlich wie auf der alten HP: http://spaeth-haustechnik.de/kontakt.html
    Aber danke mal für den Tipp und das Lob.

    @GrafFoto, ich glaube ich habe es schon öfter erwähnt, dass ich das umsetzen möchte, also als Responsive Webdesign.

    mfg Waegi
     
    #48      
  10. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    So, da komm ich auch schon mit der ersten Frage zur Umsetzung.
    Und zwar hab ich das Problem, dass die Seite im Firefox richtig angezeigt wird, im Bereich der Navigation, also beim Hover-Effekt, es schließt unten genau ab, jedoch wird die Seite im Safari und Internet Explorer fehlerhaft angezeigt, mit einem kleinen grünen Rand darunter.

    Hier mal Screens aus den einzelnen Browsern.
    Internet Explorer
    Firefox
    Safari

    Und hier noch der CSS-Code dazu, der obere Teil ist aus der HTML Boilerplatte, nach dem ansprechen der Klasse chromeframe, kommt dann mein Teil.
    Code (Text):
    1. /* HTML5 Boilerplate  */
    2.  
    3. *{padding:0; margin:0;}
    4. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    5. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    6. audio:not([controls]) { display: none; }
    7. [hidden] { display: none; }
    8.  
    9. html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    10. html, button, input, select, textarea { font-family: sans-serif; color: #222; }
    11. body { margin: 0; font-size: 1em; line-height: 1.4; }
    12.  
    13. ::-moz-selection { background: #003d8f; color: #acd305; text-shadow: none; }
    14. ::selection { background: #003d8f; color: #acd305; text-shadow: none; }
    15.  
    16. a { color: #00e; text-decoration:none; }
    17. a:visited { color: #551a8b; }
    18. a:hover { color: #06e; }
    19. a:focus { outline: thin dotted; }
    20. a:hover, a:active { outline: 0; }
    21. abbr[title] { border-bottom: 1px dotted; }
    22. b, strong { font-weight: bold; }
    23. blockquote { margin: 1em 40px; }
    24. dfn { font-style: italic; }
    25. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
    26. ins { background: #ff9; color: #000; text-decoration: none; }
    27. mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
    28. pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
    29. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
    30.  
    31. q { quotes: none; }
    32. q:before, q:after { content: ""; content: none; }
    33. small { font-size: 85%; }
    34. sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
    35. sup { top: -0.5em; }
    36. sub { bottom: -0.25em; }
    37.  
    38. ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
    39. dd { margin: 0 0 0 40px; }
    40. nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
    41.  
    42. img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
    43. svg:not(:root) { overflow: hidden; }
    44. figure { margin: 0; }
    45.  
    46. form { margin: 0; }
    47. fieldset { border: 0; margin: 0; padding: 0; }
    48.  
    49. label { cursor: pointer; }
    50. legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
    51. button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
    52. button, input { line-height: normal; }
    53. button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
    54. button[disabled], input[disabled] { cursor: default; }
    55. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
    56. input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
    57. input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
    58. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
    59. textarea { overflow: auto; vertical-align: top; resize: vertical; }
    60. input:valid, textarea:valid {  }
    61. input:invalid, textarea:invalid { background-color: #f0dddd; }
    62.  
    63. table { border-collapse: collapse; border-spacing: 0; }
    64. td { vertical-align: top; }
    65.  
    66. .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
    67.  
    68. body {/*background:url(images/bg.png) center repeat; */ font: 1.4em Myriad Pro, Tahoma, sans-serif; margin:20px 0 50px 0;}
    69. .container{width:1000px; margin:auto; height:1200px;}
    70.  
    71. h2{font-size:1.5em; color:#dd101d; text-transform:uppercase; font-weight:normal;}
    72. h3{font-size:1.0em; color:#003d8f; font-weight:normal;}
    73. p{font-size:0.7em; color:#353535; padding:10px 0 0 0; line-height:1.4em;}
    74.  
    75. #logo{width:283px; height:131px; padding:0 0 0 15px; position:absolute; z-index:20;}
    76.  
    77. #navi{background:#acd305; width:1000px; height:74px; position:absolute; z-index:1; margin:20px 0 0 0;
    78.  -moz-border-radius:10px;
    79. -webkit-border-radius:10px;
    80. border-radius:10px;
    81. -moz-box-shadow: 0px 0px 15px -5px #000000;
    82. -webkit-box-shadow:  0px 0px 15px -5px #000000;
    83. box-shadow: 0px 0px 15px -5px #000000;}
    84. #navi ul{margin:0 0 0 320px;}
    85. #navi ul li a.active{background:#003d8f; color:#acd305;}
    86. #navi ul li a{color:#003d8f; float:left; padding:24px 20px 22px 20px;}
    87. #navi ul li a:hover{background:#003d8f; color:#acd305;}
    88.  
    89. #content{background:url(images/bg_content.png) no-repeat; width:1000px; height:723px; margin:170px 0 0 0; position:absolute;
    90.  -moz-border-radius:10px;
    91. -webkit-border-radius:10px;
    92. border-radius:10px;
    93. -moz-box-shadow: 0px 0px 15px -5px #000000;
    94. -webkit-box-shadow:  0px 0px 15px -5px #000000;
    95. box-shadow: 0px 0px 15px -5px #000000;}
    96. .left-col{float:left; padding:20px; width:600px;}
    97. .right-col{float:right;}
    Vielen Dank schonmal für eure Hilfe.

    mfg Waegi
     
    #49      
  11. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.291
    Geschlecht:
    männlich
    Ort:
    Ö
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Ohne dem HTML Code ist der CSS Code relativ sinnfrei ;) Ansonsten kann man dir hier leider relativ wenig helfen.
     
    #50      
  12. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Ja ok, hab gedacht, da gibts ne Lösung per CSS, da ich mich schonmal informiert hatte, diesbezüglich und dort war die Rede von einer sogenannten Pseudoklasse :root, diese hat jedoch auch nicht richtig funktioniert.

    Code (Text):
    1. <!doctype html>
    2. <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
    3. <!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
    4. <!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
    5. <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    6. <head>
    7.   <meta charset="utf-8">
    8.   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    9.   <title>Späth Haustechnik - Aktuelles</title>
    10.   <meta name="description" content="">
    11.  
    12.   <meta name="viewport" content="width=device-width">
    13.   <link rel="stylesheet" href="style.css">
    14.  
    15.   <script src="js/libs/modernizr-2.5.3.min.js"></script>
    16. </head>
    17. <body>
    18.   <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
    19. <div id="wrapper" class="container">
    20.     <header>
    21.         <div id="logo">
    22.             <img src="images/logo.png" width="283" height="131" alt="Logo">
    23.         </div>
    24.         <nav id="navi">
    25.             <ul>
    26.                 <li><a href="#" class="active">Aktuelles</a></li>
    27.                 <li><a href="#">Über Uns</a></li>
    28.                 <li><a href="#">Leistungen</a></li>
    29.                 <li><a href="#">Referenzen</a></li>
    30.                 <li><a href="#">Kontakt</a></li>
    31.             </ul>
    32.         </nav>
    33.     </header>
    34.        
    35.     <div id="content">
    36.         <div class="left-col">
    37.             <article>
    38.                 <h3>Herzlich Willkommen auf der Website von</h2>
    39.                 <h2>Sp&auml;th Haustechnik</h3>
    40.                
    41.                 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    42.             </article>
    43.         </div>
    44.        
    45.         <div class="right-col">
    46.             <article>
    47.            
    48.             </article>
    49.         </div>
    50.        
    51.     </div>    
    52.  
    53.       <footer>
    54.         <div>
    55.    
    56.         </div>
    57.       </footer>
    58.  
    59.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    60.     <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
    61.     <script src="js/plugins.js"></script>
    62.     <script src="js/script.js"></script>
    63. </div>
    64. </body>
    65. </html>
    mfg Waegi
     
    #51      
  13. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.315
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    ... die der IE erst ab Version 9 kennt. Wenn du Probleme mit dem IE hast, dann sag mit welchem und es wäre auch von Vorteil das Ganze online zu stellen, so muss man das nicht erst nachbauen, zumal wir deine Hintergrundbilder sowieso nicht haben.
     
    #52      
  14. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Ich nutze den IE in Updateversion 9.0.11, dort sowie im Safari und auch Chrome tritt der Fehler auf.
    Hier noch der Link zur Website: http://waegi.square7.ch/cms/

    mfg Waegi
     
    #53      
  15. Raphale

    Raphale angehender Webentwickler

    Dabei seit:
    09.10.2012
    Beiträge:
    87
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Versuch ein bißchen rumzufummeln dann klappts meistens :)
    z.B.:
    #navi ul li a{ padding-bottom:5px;003d8f }
    #navi {overflow:hidden;}

    Versuch mal folgendes:

    #navi ul li a {width:100px;height:30px;background......}
    oder
    #navi ul li {width:100px;height:30px;background......}

    was zum nachdenken ...
    HTML:
    <nav id="navi"> <ul>
    <li><a href="#" style="background-image: url="ages/logo.png";background-size:..px ..px;background-position:!!;"></a></li>
    <li><a href="#" class="active" style="background-image: url="mages/navlinkimage^^.gif";>Aktuelles</a></li> </ul> </nav>


    CSS:

    #navi ul li {height:30;width:99;background-color:;}
    ODER:

    du kannst unterschiedliche hacks anwenden z.B.

    @media screen and (-webkit-min-device-pixel-ratio:0) { …….. }
    oder

    head:first-child+body Selektor { Deklaration; }

    Oder ein Js das Browser erkennt oder so:

    <!--[if (gte IE 6)&(lte IE 8)]> <link rel="stylesheet" href="css/ie.css" type="text/css" /> <![endif]-->

    mehr zu hacks:
    http://css-hacks.mozork.de/


    LG

    Raphaele

    Sry bßchen unordentliche Mail ...hab nich soviel Zeit ^^
     
    Zuletzt bearbeitet: 17.12.2012
    #54      
  16. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Also das mit dem rumprobieren wird nix, änder ich es für Safari oder den IE, dann passt es im Firefox nicht mehr und das mit den zum nachdenken kapier ich ken bissche, vlt. mal als Code einfügen und das mit den Hacks hab ich selbst gefunden, also mit dem :root Hack, jedoch kapier ich deins nicht.

    Mfg Waegi
     
    #55      
  17. Raphale

    Raphale angehender Webentwickler

    Dabei seit:
    09.10.2012
    Beiträge:
    87
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    nimm mal einheiten 30 px height und 100px with anstatt padding !
     
    #56      
  18. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Das Problem dann ist nur wieder, dass ich erstens die Schrift ned in die Mitte bekommen hab, habs mit text-align sowie vertical algin versucht, hat nicht funktioniert und dann hab ich das Problem beim hovern, dass sich der Text nur dann ändern, wenn ich auch auf den Text komm und nicht das Ganze Feld.

    mfg Waegi
     
    #57      
  19. Raphale

    Raphale angehender Webentwickler

    Dabei seit:
    09.10.2012
    Beiträge:
    87
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Nochmal zu meinem Gewirr da oben ^^

    versuchen einfach ein bild 30*90 blau
    als hintergrundbild für die links oder listenpunkte.
     
    #58      
  20. Waegi

    Waegi Aktives Mitglied

    Dabei seit:
    14.02.2011
    Beiträge:
    337
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS5, InDesign CS5, Illustrator CS5
    Kameratyp:
    Canon EOS 1100D
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    Das Problem mit den Links, hatte ich bei einem praktikum schonmal: http://waegi.square7.ch/Praktikum/ und dort habe ich es mit einem Bild gelöst, das ist das Problem, das meine ich.

    mfg Waegi
     
    #59      
  21. Raphale

    Raphale angehender Webentwickler

    Dabei seit:
    09.10.2012
    Beiträge:
    87
    Geschlecht:
    männlich
    Kritik zu erstem Entwurf
    AW: Kritik zu erstem Entwurf

    dann musst du nur den link die gleiche grö0e geben oder with 100% height 100%

    schrift mit margin und padding zurechtrücken!

    ich benutze nie dieses text-align !! is das nich css2 ?
     
    #60      
Seobility SEO Tool
x
×
×