RE-Design - Enrico Reinsdorf » Print-Design http://www.re-design.de Trainer für Konzeption und Umsetzung von medialen Internet-Projekten Fri, 28 Oct 2011 19:26:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Jahresabonnement des Spotlight Verlag http://www.re-design.de/2008/01/28/jahresabonnement-des-spotlight-verlag/ http://www.re-design.de/2008/01/28/jahresabonnement-des-spotlight-verlag/#comments Mon, 28 Jan 2008 13:43:40 +0000 Enrico Reinsdorf http://www.re-design.de/workbook/?p=105 Mein erstes Beispiel ist eine ganzseitige Anzeige im monatlich erscheinenden Magazin Ecos des Spotlight Verlags. Sie bewerben darin ihre Jahresabonnements. Obwohl die gedruckte Version nicht besonders aufwendig aussieht, habe ich trotzdem ca. 5 Stunden an der Umsetzung getüftelt. Aber zu guter Letzt habe ich es geschafft und nur möchte ich euch das Ergebnis präsentieren.

Hier nun als erstes die gedruckte Version der Anzeige, daneben findet ihr eines Screenshot meine Online-Version.

Pint Anzeige Online Nachbau

Ich erspare euch die Darstellung es gesamten HTML-Quellcodes und zeige euch lieber eine gekürzte Version davon:

  1. <div id="content">
  2.   <h1>
  3.   <ul id="bonus">
  4.     <li><strong>
  5.     ...
  6.     <li><strong>
  7.     <ul id="covers">
  8.       <li><img> 
  9.       ...
  10.   <h2>
  11.   <ul id="guides">
  12.     <li><img><cite>
  13.     ...
  14.   <h3><a>
  15.   <p>
  16.   <form>
  17.     <fieldset id="coupon">
  18.       <h3>
  19.       <fieldset id="magazin">
  20.         <h4>
  21.         <p>
  22.         <ul>
  23.           <li><p>
  24.           <ul>
  25.             <li><label><input>
  26.             ...
  27.           <li>
  28.             <p><br><label><input>
  29.         <p>
  30.         <p>
  31.       <fieldset id="address">
  32.         <h4>
  33.         <p><label><input>
  34.         ...
  35.         <p>
  36.       <fieldset id="bank">
  37.         <h4>
  38.         <p>
  39.         <p><label><input>
  40.         ...
  41.         <h5>
  42.         <p>
  43.         <p><label><input>
  44.         <p><label><input>
  45.         <p><button>

Ich hoffe ihr kommt mir der Kurzfassung zurecht. Falls nicht, bitte ich euch eine Kommentar mit Verbesserungen zu hinterlassen. Ist ja mein erster Versuch und ich kann bestimmt auch noch viel von euch lernen.

Wie ihr seht habe ich versucht den Quellcode möglichst wenig mit zusätzlicher Beschriftung aufzublähen. Damit habe ich es erreicht, dass die HTML-Datei gerade mal 8800 Byte groß ist.

Im Head habe ich dann nur noch eine Link zur externen CSS-Datei gelegt. Diese regelt dann das gesamte Screen-Design.

  1. <link rel="stylesheet" href="screen/layout.css" media="screen" />

Das Design besteht aus insgesamt 4 Datei:

  1. normalisation.css
    Hier werden alle Formatierungen die in den verschiedenen Browser unterschiedlich dargestellt werden und/oder mit einer Vorformatierung belegt sind auf einen einheitlichen Normalwert zurückgesetzt.
  2. layout.css
    Sie beinhaltet die Positionierung der einzelnen Elemente.
  3. color.css
    Mit dieser Datei wird die Farbwirkung des Designs bestimmt.
  4. typographie.css
    Alle typographischen Regeln sind in hier zusammengefasst.

Um alle Dateien zu laden, werden die anderen in die Layout-Datei einfach importiert und dann die Formatierung des Layouts definiert.

  1. @import url(normalisation.css);
  2. @import url(color_final.css);
  3. @import url(typographie_final.css);

Auch hier werde ich nicht den gesamte Code der 4 CSS-Dateien anzeigen, sondern nur, meiner Meinung nach, die wichtigsten Bereiche. Falls aber dann doch noch Definitionen unklar bleiben, bitte ich euch einfach einen Kommentar zu schreiben.

Normalisation

In meinem Artikel CSS Layouts am Fließband habe ich schon mal erklärt wie ein CSS-Datei aussehen könnte um alle browserspezifischen Formatierungen zurückzusetzen.

Layout

In der Layout-Datei werden erstmals die restlichen Dateien eingebunden.

  1. @charset "utf-8";
  2. /* CSS Document */
  3. @import url(screen/normalisation.css);
  4. @import url(screen/color.css);
  5. @import url(screen/typographie.css);

Ok, fangen wir mit der generellen Layout-Formatierung an:

  1. html {
  2. position:relative;
  3. text-align:center;
  4. }
  5. body {
  6. position:relative;
  7. width: 920px;
  8. margin:0 auto;
  9. text-align:left;
  10. }

Als erstes wird alles was in dem <html>-Tag steht zentriert. Im <body>-Tag wird dann der Inhalt 920px breit formatiert. Gleichzeitig wird dessen Innenleben wieder linksbündig gestellt.

  1. #content {
    2. >position:relative;
  2. width:420px;
  3. margin:0 auto;
  4. padding:20px;
  5. }
  6. #covers {
  7. width:920px;
  8. margin:1em -260px 0;
  9. }
  10. #covers>li {
  11. display:block;
  12. float:left;
  13. width:120px;
  14. margin:0 5px;
  15. }
  16. #covers img {
  17. display:block;
  18. }

Jetzt wird der eigentliche Content auf eine Breite von 420px und ein Abstand von 20px zum Rand eingestellt, so dass eine schmale Spalte entsteht. Da aber die Covers aus der Spalte herausläuft, habe ich über ein negatives Margin diesen Bereich verbreitert. Dann werden noch die einzelnen Listeneinträge nebeneinander ausgelistet und die Bild als Blockelement definiert, um die Bildunterschriften unterhalb zu platzieren.

  1. h2 {
  2. clear:both;
  3. }
  4. #guides {
  5. width:920px;
  6. height:130px;
  7. margin:1em -260px 0 -245px;
  8. }
  9. #guides>li {
  10. display:block;
  11. float:left;
  12. width:120px;
  13. margin:0 5px;
  14. }
  15. #guides img {
  16. display:block;
  17. margin:0 auto;
  18. }

Um das Floating der Cover-Liste zu beenden, habe ich die folgende Überschrift mit einem clear-Befahl belegt. Die Darstellung der Guide-Heft ist im Grunde gleich der der Covers, weswegen ich hier nur ein paar kleine Änderungen vorgenommen habe um die kleineren Bild gleich zu positionieren.

  1. #content+h3 {
  2. clear:both;
  3. text-align:center;
  4. margin:1em 0 0;
  5. }
  6. #content+h3+p {
  7. text-align:center;
  8. }

Die folgende Überschrift und der dazugehörige Absatz wird noch mittig gesetzt und dazwischen lasse ich Platz für das darzustellende Dreieck.

  1. #coupon {
  2. border-top:thick dashed #FFF;
  3. margin:1em 0;
  4. }
  5. fieldset>fieldset {
  6. float:left;
  7. width:290px;
  8. padding:5px;
  9. }
  10. fieldset>fieldset+fieldset {
  11. margin:0 10px;
  12. }
  13. fieldset>fieldset+fieldset+fieldset {
  14. margin:0;
  15. }
  16. fieldset+p,
  17. fieldset+p+p {
  18. display:none;
  19. }
  20. button {
  21. clear:both;
  22. display:block;
  23. float:right;
  24. }

Zum Schluss noch das Formular mit dem der Besucher ein Abo bestellen kann. Hier habe ich als erstes die gepunktete Linie eingestellt. Alle Kästen innerhalb meines Coupons werden wieder über float nach links ausgerichtet und bekommen die gleiche Breite. Als Abschluss habe ich dann noch, anders als im Magazin einen Button mit eingefügt, um das Formular auch abschicken zu können.

Farben

So, nun komme ich zu den Farbeinstellungen. Da gibt es Gott sei Dank nicht so viel zu erklären.

  1. html {
  2. background-color:#FF0;
  3. }
  4. #content {
  5. background-color:#F00;
  6. color:#FFF;
  7. }

Klar das erstmal der gesamte Hintergrund gelb und die Spalte rot wird.

  1. #covers>li {
  2. color:#000;
  3. }
  4. #covers li+li+li {
  5. color:#FFF;
  6. }
  7. #covers li+li+li+li+li+li {
  8. color:#000;
  9. }

Beim genauen hinsehen wird man feststellen, dass in der Liste der verschiedenen Covers die ersten beiden und die beiden letzten Texte schwarz und der Rest weiß geschrieben ist. Um den Quelltext nicht unnötig mit Klassen aufzublähen, habe ich mich für eine klassenfreie Variante entschieden.

  1. #address input,
  2. #bank input {
  3. background-color:inherit; 
  4. color:#900;
  5. border:none;
  6. border-bottom:thin solid #000;
  7. }
  8. #address input:focus,
  9. #bank input:focus {
  10. background-color:#FF0;
  11. outline:thin solid #000;
  12. border-bottom:none;
  13. }

Um die Eingabefelder nicht nach typischen Webformular-Feldern aussehen zu lassen, habe ich diesen nur einen unteren Rahmen gegeben und die Hintergrundfarbe dem der Fieldsets angepasst.

Typographie

Auch bei den typografischen Einstellungen gibt es keine besonderen Überraschungen.

  1. body {
  2. font: 82%/1.5 "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  3. }
  4. h1 {
  5. font-size:450%;
  6. line-height:1.1em;
  7. text-indent:.15em;
  8. font-weight:bold;
  9. }
  10. strong {
  11. font-weight:bold;
  12. font-size:130%;
  13. }
  14. h5 {
  15. display:inline;
  16. }

Beim Designen der Schriften habe ich versucht die Schriftart und Schriftgröße dem Printprodukt anzupassen, um auch Zeilenumbrüche gleich zu halten. Da ich nicht genau weiß welche Schriftart der Designer verwendet hat und da ja auch nicht jede Schriftart im Web unterstützt wird, habe ich mich für Lucida Grande entschieden. Man möge es mir verzeihen.

In der Hauptüberschrift musste ich die erste Zeile ein wenig einrücken, um die beiden Zeilen genau zueinander auszurichten. Die fettgedruckten Texte in der Auszählung sind dann leider auch nicht nur fett sondern leicht größer dargestellt, so dass dieses mit berücksichtigt wurde. Auch ist die kleine Wiederspruchsrecht-Überschrift nicht in einer separaten Zeilen, sondern der folgende Absatz beginnt direkt dahinter.

Fazit

Obwohl ich am Anfang diese Anzeige als relativ leicht empfunden habe, erwies sich das detailgetreue Gestalten doch als kleine Herausforderung.

Aber es hat nicht nur Spaß gemacht dieses Design umzusetzen, sondern brachte mir euch neue Sichtweisen und Lösungsansätze beim Gestalten von Websites.

Update 17. März 2008

Ich habe gerade mit der Online-Redaktion des Verlages gesprochen, da sie verwundert
waren ihre Anzeige online zu sehen. Da bei der Erstellung der Online-Anzeige nicht die Darstellung von alten Browsern berücksichtigt wurden, waren sie verwundert, dass ihre Anzeige so schlecht aussieht.

Zur Zeit wird jetzt geklärt, ob eine Umsetzung ihrer Anzeige zu Demonstrationszwecken von ihnen gewünscht ist. Und so lange ist die Online-Version leider nicht verfügbar.

Update 25. März 2008

Endlich habe ich eine Antwort vom Verlag bekommen, was mit meiner nachgebauten Anzeige passieren soll. Leider ist die Chefin meiner Ansprechpartnerin im Verlag absolut nicht damit einverstanden, dass die Anzeige zu Demonstrationszwecken genutzt wird. Auch wenn dadurch kostenlos Werbung (mit Verlinkung) gemacht wird.

Deshalb hier nochmals der Hinweis, dass HTML-Version nichts mit dem Spotlight-Verlag zu tun hat und dieser sich ausdrücklich davon distanziert.

Um auch nicht mehr über Google gefunden zu werden, habe ich mich entschlossen das Beispiel umziehen zu lassen und zusätzlich mit einem Passwortschutz belegt. Alle weiteren Experimente auf dieser Website findet ihr jetzt im . Um im Ordner Print-Designs die verschiedenen Beispiele anzusehen, müsst ihr euch mit dem Benutzernamen "gast" und dem Passwort "zugang" anmelden, dann könnt ihr auch das Beispiel wiedersehen. Ich hoffe dadurch ist

Ähnliche Beiträge

]]> http://www.re-design.de/2008/01/28/jahresabonnement-des-spotlight-verlag/feed/ 0 Umsetzung von Print-Design http://www.re-design.de/2008/01/13/umsetzung-von-print-design/ http://www.re-design.de/2008/01/13/umsetzung-von-print-design/#comments Sun, 13 Jan 2008 08:08:52 +0000 Enrico Reinsdorf http://www.re-design.de/workbook/?p=104 Inspiriert durch das Lesen des Buches CSS Transcending, wo die Autoren Andy Clarke und Molly E. Holzschlag in mehreren guten Beispielen zeigten wie man schöne Print-Designs ins Internet übertragen kann. Das Ganze verband er natürlich mit valide und gut strukturierten Quellcode.

Beflügelt durch die gute Resonanz meines Adventskalenders 2007 möchte ich eine weitere Rubrik in meinem Arbeitsbuch eröffnen. In ihr möchte ich, in hoffentlich regelmäßigen Abständen, Seiten-Designs aus Zeitungen, Zeitschriften oder Magazinen in eine Webdesign-Fassung bringen. Das bedeutet ich werde mir eine gut gestaltete Seite aussuchen und versuchen sie dann ins Internet zu übertragen.

Es ist nicht nur erstaunlich sondern auch faszinierend was man mit den Internet-Technologien und den heutigen, modernen Browsern erschaffen kann. Dabei werde ich versuchen mich auf XHTML, CSS und JavaScript zu beschränken und möglichst sinnvoll, nicht aufgeblähten und gut strukturierten Quellcode zu verwenden.

Ähnliche Beiträge

]]> http://www.re-design.de/2008/01/13/umsetzung-von-print-design/feed/ 2