Bitte bringt die Scribbles bei unserem nächsten Treffen mit!
User Interface Design Tools
… die natürlich auch für die Konzeption und Gestaltung von Websites geeignet sind …
Online-Learning
Bitte entscheidet Euch für eines der drei Programme, die gleich vorgestellt werden, und macht dafür ein grundlegendes Tutorial durch!
Alle drei Programme erlauben es Euch, ziemlich schnell und intuitiv interaktive Prototypen Eurer Portfolio-Website zu erstellen. Diese benötigt Ihr spätestens bei unserer Zwischenpräsentation.
Sketch – the digital design toolkit
Create, prototype, collaborate and turn your ideas into incredible products with the definitive platform for digital design.
Sketch ist eines der wichtigsten Tool für alle UI- und UX-DesignerInnen! Wer gerne in diesem Bereich arbeiten möchte, sollte das Programm kennen – es funktioniert leider nur auf Macs…
es gibt eine kostenlose Testversion, die 30 Tage lang funktioniert.
Sketch Tutorials
Bitte beschäftigt Euch mit diesem tollen Programm – wenn Ihr die Grundlagen verstanden habt, könnt Ihr Eure Website-Layouts damit ziemlich schnell erstellen!
Sketch is one of the most popular UX design tools around. This course can help designers of all skill levels be productive with its focused, comprehensive workflow. Follow along with Chris Converse and learn the ins and outs of the Sketch interface, and how to design modern user experiences with Sketch, starting with project setup and working through to interactive prototyping.
Figma: the collaborative interface design tool
Packed with design features you already love plus unique inventions like the Arc tool and Vector Networks, Figma helps you keep the ideas flowing. No need to stop to install, save, or export. It’s what any good cloud software should be.
CSS-Code, den man nicht mehr benötigt, sofort entfernen oder zumindest auskommentieren! Später weiss man nicht mehr, ob dieser noch gebraucht wird oder nicht!
Das Stylesheet soll logisch aufgebaut sein – vom Großem zum Kleinen
Thematisch zusammengehörige Anweisungen auch zusammen schreiben – damit man die Übersicht nicht verliert!
Kommentare verwenden, um Bereiche zu trennen und einfach findbar zu machen
Tags mit gleichen (visuellen) Eigenschaften zusammenfassen
Zwischen den Tags muss dafür ein Komma stehen!
CSS
/* alle 3 Überschriften werden gleich dargestellt */
h1, h2, h3 {
font-family: Verdana, Sans-Serif;
font-size: 16px;
color:red;
}
/* h3 wird aber blau, weil diese Anweisung nach der oben genannten eingelesen wird! */
h3 {
color:blue;
}
Syntax-Check (1)
Wie schreibt man das CSS, damit sowohl die H2-Überschrift als auch das <span>-Element einen blauen Hintergrund bekommen?
HTML
<h2>Sensation</h2>
<p>Eine Überschrift mit <span>blauem</span> Hintergrund!</p>
Syntax-Check (1) Lösung
Wie schreibt man das CSS, damit sowohl die H2-Überschrift als auch das <span>-Element einen blauen Hintergrund bekommen?
HTML
<h2>Sensation</h2>
<p>Eine Überschrift mit <span>blauem</span> Hintergrund!</p>
CSS
h2, span {background-color:blue;}
CSS Selektoren (eigene Klassen)
Um z.B. bei Paragraphen einen besonderen herauszugreifen…
Achtung: auch bei Klassen muss auf Gross- und Kleinschreibung geachtet werden und Klassen dürfen nicht mit Ziffern anfagen…
HTML
<p>Hier etwas Text.</p>
<p class="wichtig">Dieser ist besonders wichtig.</p>
<p>Wieder normaler Text…</p>
CSS
p {color:black;}
/* Klassen werden in CSS mit einem Punkt (.) gekennzeichnet! */
.wichtig {color:red;}
Hier etwas Text.
Dieser ist besonders wichtig.
Wieder normaler Text…
CSS Selektoren (mehrere Klassen)
Ein HTML-Tag kann mehr als eine Klasse haben… Achtung: Die Klassen werden in HTML ohne Komma, nur mit einem Leerzeichen voneinander getrennt!
Margin ist der Abstand von einem Objekt zu einem anderen – Padding ist das „Polster“ innerhalb eines Objektes
Politisch nicht korrekt, aber gut merkbar …
Padding (= Innenabstand)
Abstand vom Inhalt zur Kante des Objekts
CSS
p {
/* Maßeinheiten können "gemischt" werden */
padding-top:10px;
padding-right:30%;
padding-bottom:20px;
padding-left: 20%;
/* oder in Kurzschreibweise, im Uhrzeigersinn oben anfangend */
padding: 10px 30% 20px 20%;
}
Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse, ex nec lobortis scripserit reformidans. Ignota posidonium ea ius, eos atomorum pericula elaboraret eu. Mea inani deseruisse ea, at nam salutandi instructior, alii impetus dolorem cum at
Margin (= Außenabstand)
definiert den Abstand zwischen Elementen
CSS
h2 {
/* Abstand innerhalb des roten Rahmens rundumlaufend */
padding: 5px;
/* Abstand der h2-Überschrift zum Rand des Divs
und zum darunter liegenden Paragraphen */
margin: 20px 0 3em 10%;
border: 1px solid red;
}
Überschrift
Lorem ipsum qui ex sale facilis, vel in quidam adolescens. Cum ut ludus homero liberavisse
für die früher jeweils Browser-Plugins (z.B. „Flash“ notwendig waren …)
<audio> zum Abspielen von Sound-Dateien
<video> zum Abspielen von Filmen
Einbinden von Sounds in HTML5
controls = Steuerelemente (Play, Stop usw.) werden dargestellt autobuffer = läd den Sound schon mal vor, damit dieser gleich losspielen kann… autoplay = der Sound fängt sofort von alleine an zu spielen – bitte nicht einbauen! loop = Sound läuft immer wieder ab
width = Breite des Films height = Höhe des Films controls = Steuerelemente (Play, Stop usw.) werden dargestellt autobuffer = läd den Film schon mal vor, damit dieser gleich losspielen kann… poster = Vorschaubild, kann man selber erstellen und dann festlegen – Pfadangaben beachten!
autoplay = der Film fängt sofort von alleine an zu spielen – bitte nicht einbauen!
HTML
<!-- „poster“ ist ein Vorschaubild, das man selber festlegen kann! -->
<video controls width="640" height="360" autobuffer poster="video/popeye_shuteye_popeye.jpg">
<source src="video/popeye_shuteye_popeye.mp4" type="video/mp4">
</video>
Dazu einfach den auf der Site angebotenen Code kopieren und auf der eigenen Site einfügen – man muss somit die Film-Datei nicht herunterladen, sie bleibt auf den Servern der Video-Anbieter!
Hier anders als bei den bisherigen Übungen: Die HTML-Datei ist schon vorhanden und darf nicht verändert werden
Schreibt Eure CSS-Anweisungen in die (beigefügte) Datei „style.css“. Dort sind schon ein paar wichtige Angaben drinnen – nicht entfernen!
Am Ende soll die Seite in schmalster Darstellung wie auf der Vorlage Fotografie_schmal.jpg aussehen.
Die Hintergrundbilder (Meer, Sand, Stadt) sollen jeweils bis an die Ränder des Browserfensters gehen – egal, wie breit das Browserfenster aufgezogen wird!
Zieht man das Browserfenster breiter, soll die Seite wie bei Fotografie_breit.jpg aussehen
Bitte verwendet wieder die in der Zip-Datei hinterlegten Dateien und behaltet die Dateistruktur bei!
Tip: Schaut mal nach, was die CSS-Anweisungen „max-width“ und „min-width“ bewirken – für die Hintergrund-Bilder ist die Anweisung: „background-size: cover“ sehr praktisch…