Grundkurs Gutes Webdesign:
Webdesign-Grundlagen, von und mit mir

Datum: 29. Juni 2013 |  Meinungen: 25 Kommentare »
Thema: Design & Webdesign, MedienSchlagwörter: , ,

Da ist es: Mit „Grundkurs Gutes Webdesign“ (24,90 €) gibt es nun mein erstes Lehrbuch im Buchhandel, erschienen bei Galileo Design. Ein wenig stolz bin ich darauf schon, und so erlaube ich mir ein paar Zeilen dazu, was euch erwartet.

Mein Weg zu Galileo

Galileo kenne ich bereits seit einigen Jahren als Fachverlag für Webdesigner und Entwickler, aber dass ich selbst mal einer der Galileos werden würde, hätte ich mir nicht erträumen lassen. Klar, dass man da nicht ablehnt, wenn sich die Gelegenheit bietet – und so wurde es hier im Blog in den vergangenen Monaten ein wenig ruhiger, während ich an meinem ersten richtigen Buch werkelte.

Erstausgabe des Buchs in einem Karton
Da schaut sie aus ihrem Versandkarton – die Erstausgabe von „Grundkurs Gutes Webdesign“

„Grundkurs Gutes Webdesign“ ist ein Einsteigerwerk – ich gehe dabei davon aus, dass ihr euch mit eurem Browser und eurem Computer auskennt und schon das eine oder andere Mal an Websites gebastelt habt. Mitbringen solltet ihr Grundkenntnisse in HTML und CSS sowie in Photoshop. Ich gehe Schritt für Schritt die wichtigen CSS-Eigenschaften durch, die euch dabei helfen, eure Ideen ins Web zu bringen, und natürlich sind auch die Neuerungen von HTML5 am Start – dennoch war für absolute Basics kein Raum. Neulinge in den Webtechnologien finden einen guten Einstieg in Peter Müllers „Das große Little Boxes Buch“, und Photoshop-Basics erhaltet ihr beispielsweise in „Photoshop für Webdesigner“ von Gerrit van Aaken.

Webdesign-Grundlagen in Theorie und Praxis

Im Sinn eines didaktisch sinnvollen Aufbaus habe ich das große Thema Webdesign in mehrere Aspekte zerlegt, die ich von theoretischen Grundlagen über Beispiele bis zur praktischen Umsetzung in HTML und CSS behandle. Los geht es mit Konzeption und Ideenfindung, danach gehe ich auf Usability, Accessibility und Responsive Webdesign ein. Mit diesen Grundlagen ausgerüstet behandele ich Schritt für Schritt verschiedene Aspekte guter Web-Gestaltung: Layout, Typografie, Farben sowie Grafiken. Zum Abschluss geht es ausgiebig um das Testen und Optimieren, bevor es noch einen kleinen Ausblick auf neue technische Spielereien in HTML5 und CSS3 gibt.

Wichtig war mir: Neben den praktischen Ratschlägen gebe ich theoretische Grundlagen, die euch dabei helfen sollen, eure eigenen Design-Entscheidungen zu treffen. Außerdem könnt ihr mir in jedem Kapitel bei einem Beispielprojekt über die Schulter schauen, an dessen Ende eine fertige Website steht.

Abgerundet wird das Werk durch die beigefügte DVD, wo ihr neben den Beispiel- und Projektdateien aus dem Buch eine Stunde Video-Training über Responsive Webdesign findet, entnommen dem gleichnamigen Video-Training meines Fachlektors Jonas Hellwig.

Grundkurs-Abnehmer gesucht

Letzten Endes schreibe ich für euch, und ohne dieses kleine Blog wäre „Grundkurs Gutes Webdesign“ wohl niemals entstanden – und das ist Grund genug, euch drei Exemplare zu schenken. Wer eines haben möchte, schreibt einfach bis zum 7. Juli 2013 einen Kommentar – das Los entscheidet.

Über Rezensionen, beispielsweise auf Amazon, freue ich mich natürlich ebenso – seid dabei aber bitte unbedingt ehrlich, denn nur so kann eure Meinung anderen Menschen helfen und eröffnet mir gleichzeitig die Möglichkeit, aus meiner Arbeit zu lernen.

Update 21. Juli 2013: Mehr Informationen zum Buch gibt es nun auf der Website zum „Grundkurs Gutes Webdesign“.

Ähnliche Beiträge

Kommentare und Reaktionen

  1. Responsive Layout interessiert mich. Ajax und CSS3. Und, und, und…Galileo steht für Qualität. Werd ich prüfen, sobald ich das Buch in Händen halte.

  2. Erstmal Glückwunsch zur Fertigstellung des Buches.
    Die Inhalte klingen wirklich interessant und ich würde mich über ein Exemplar sehr freuen 🙂

  3. Das Buch klingt interessant. Und scheint für mich genau richtig, so (un)kreativ wie ich bin. 😉

  4. Das Buch macht einen wirklich guten Eindruck und die Thematiken passen auch gut zueinander.
    Ich hoffe, dass du bisher schon erfolgreich mit dem Buch warst und wünsche dir weiterhin viel Erfolg damit!

  5. Hallo Björn,
    ich habe das Buch gelesen und finde es richtig gut. Eine Frage habe ich allerdings: Wie gestalte ich die Media Queries für neue Smartphones mit einer Bildschirmgröße angegeben mit 1920 x 1080 px, wenn ich dort auch die Smartphone CSS Styles anzeigen will ? Laut deinem Buch wäre diese Größe doch für Desktop PC reserviert, oder ?
    Normalerweise wäre könnte ich ja das Phone-Design mit z.B. s : @media all and (max-width: 500px) festlegen, bzw. andere Größen ein Media Query verpassen.

  6. Hallo Doro,

    vielen Dank für das Lob, das freut mich sehr 🙂

    Zu deiner Frage: Bei Smartphones (und zunehmend auch bei anderen Geräten, z.B. hochauflösenden Rechnern wie dem Macbook Pro Retina) muss man immer unterscheiden zwischen einem Gerätepixel und einem CSS-Pixel. Gerätepixel sind die physischen Pixel, die ein Smartphone darstellen kann – das können z.B. 1920 x 1080 px sein. Das heißt aber nicht, dass eine Website im Browser auch auf diese Angaben in den Media Queries zurückgreift. Der sogenannte Viewport des Browsers (das ist der Bereich, in dem die Website angezeigt wird) arbeitet mit CSS-Pixel: Er setzt mehrere Gerätepixel zu einem CSS-Pixel zusammen – dadurch entstehen schärfere Schriften. Das Retina-Display von Apple z.B. hat eine Breite von 640 Gerätepixel, die es zu 320 CSS-Pixel zusammenfasst – es lädt also die CSS-Angaben, die in der Media Query für 320px stehen. In deinem Beispiel würden also die Angaben unter @media all and (max-width: 500px) darunter fallen.

    ViewportSizes ist eine praktische Website mit den Viewport-Größen von vielen Smartphones. Ganz unten gibt es auch einen Link, der die Größe des aktuellen Viewports zeigt – das ist sehr praktisch, wenn man für ein bestimmtes Smartphone optimieren möchte und sich nicht sicher ist, wie groß der Viewport ist.

    Wichtig ist außerdem noch das Meta-Viewport-Element <meta name=“viewport“ content=“width=device-width“/> im Head-Bereich der Website. Ohne diese Angabe gehen mobile Browser von einem Viewport von 980px aus. Meta-Viewport aktiviert also die Verwendung von Media-Queries.

  7. Hallo Björn,
    habe vor ein paar Tagen Dein Buch gekauft. Insgesamt ganz gut – finde ich.
    Allerdings habe ich auch ein wenig Kritik:
    Wer sich mit HTML5 und css3 auskennt, der braucht die Belehrungen in Deinem Buch nicht; wer darin noch keine Kenntnisse erworben hat, dem nützen sie nichts.
    Zum Lehrfilm:
    Sehr gut gemacht. Allerdings vermisse ich den Hinweis, wo man so einen tollen Browser bekommen kann. Also wenn ich meinen Chrome aktualisiere, habe ich immer noch nicht so ein feines Werkzeug, wie es in dem Film zu sehen ist. Oder gibt es den nur für den Mac?
    Oder bin ich nur zu blöd, meinen Browser richtig einzurichten?
    Vielleicht bin ich da aber nicht der Einzige. Schön wäre es, man würde erklärt bekommen, wo oder wie man an so schöne Software kommen kann.
    Ansonsten weiterhin viel Erfolg und gutes Gelingen.
    Herzliche Grüße
    Günni

  8. Lieber Günni,

    vielen Dank für deine Einschätzung, das ist wertvolles Feedback, das sicher in der Zukunft weiterhelfen wird.

    Nun zu deiner Frage: Die Video-Lektionen sind ein Auszug aus dem Video-Training „Responsive Webdesign“ von Jonas Hellwig – ich leite deine Frage daher auch an den Verlag weiter, die dir sicher besser Auskunft geben können, welche Tools darin verwendet werden. Hier sind schon einmal die Links zu zwei Tools aus den Filmen:

    Responsive Design Bookmarklet von Victor Coulon
    Viewport Resizer von Malte Wassermann

    Bei beiden handelt es sich um Bookmarklets, die du dir in die Favoritenleiste deines Browsers ziehen kannst – danach reicht ein Klick, um sie zu verwenden. Sollte die Lesezeichenleiste nicht angezeigt werden, kannst du das wie auf dieser Seite beschrieben umstellen.

    Ich hoffe, ich konnte dir damit ein wenig weiterhelfen.

    Viele Grüße
    Björn

  9. Hallo Björn,
    ich habe mir Dein Buch gekauft,weil ich mich seit einem Jahr mit diesem Thema und habe mir auch schon viel Bücher zu gelegt,z.B. CSSPur,Modernes Webdesign,die Videos -Webdesign mit Photoshop u.v.m. . Dein Buch ist jetzt ein weiterer Meilenstein in meinem Privatstudium und ich findes sehr gelungen und sehr tiefgründig. Ich habe meine Webseite gelöscht, weil sie eine Anfängerseite war und nicht den Anforderungen meines Anliegen entsprach, besonders als ich Dein Buch gelesen habe, welches ich jetzt studiere. Danke und mach weiter so. Auch Deine Seite ist sehr intressant. Lg Oskar

  10. Hallo Oskar,

    vielen lieben Dank für dein Feedback. Ich freue mich, wenn der Grundkurs dir bei deiner Seite weiterhelfen kann. Gib mir ruhig Bescheid, wenn du damit ein Stück weiter gekommen bist, ich würde sie mir gerne anschauen.

    Liebe Grüße Björn

  11. Hallo
    Ich spiel mit dem Gedanken mir das Buch zu kaufen. Bin Komplett neu was Webdesign betrifft. Richtet sich das Buch eigentlich an Mac- oder Windows-Nutzer? Vor allem was die Mehrheit der Screenshots betrifft.
    LG

  12. Guten Morgen Björn,

    ein guter Geist hat mir (vorübergehend) Dein Buch auf den Tisch gelegt. Ich möchte aber wohl ein eigenes Exemplar. Ist eine Neuauflage in Planung?

  13. Hallo Heinrich,

    freut mich, dass dir das Buch gefällt 🙂
    Ich habe deine Frage an den Rheinwerk-Verlag weitergeleitet – es wird sich jemand bei dir melden.

    Viele Grüße
    Björn