DAS DESIGN MEINER EIGENEN. künstler-webseite. powered by

Transkript

1 DAS DESIGN MEINER EIGENEN künstler-webseite powered by

2 Photo: todd quackenbush via unsplash.com PRAXISteil

3 WEB-WERKZEUGE PRAXISteil

4 PRAXISteil WEB-WERKZEUGE 20 DESIGN-TIPPS

5 PRAXISteil WEB-WERKZEUGE 20 DESIGN-TIPPS GUTE BILDER

6 PRAXISteil WEB-WERKZEUGE 20 DESIGN-TIPPS GUTE BILDER MOBILE WEBSITE

7 WEBwerkzeuge stationäre web-programme für fortgeschrittene PC vs. Mac Adobe Dreamweaver MS Expression Web 4.0 (free) Magix Web Designer ( ) Net Objects Fusion Flash is leider dead Adobe Muse (17,84 /Monat!) Experten: Photo: pixabay.com/nasa DEMO

8 WEBwerkzeuge eindeutiger trend:»cloud computing«bild-/text weiter am PC Tablet für Enthusiasten Apple und Microsoft gratis Daten in der»cloud« drive.google.com onedrive.live.com DEMO

9 PRAXISteil 20 TIPPS

10 GUTESdesign was muss ich beachten? Eigene Ideen Eigene Bilder Keine Website-Plagiate Trends? One-Pager Parallaxen-Effekt Photo: pixabay.com 01

11 LAYOUTraster wie soll meine webseite aussehen? Zauberwort:»Raster«Gleichmäßige Gestaltung Harmoniegesetze 02

12 LAYOUTraster goldener schnitt»goldener Schnitt«

13 LAYOUTraster fibonacci folge 34»Fibonacci-Folge«Summe der beiden Vorgänger 1:2 2:3 3:5 5:8 8:13... Formen nach der Natur

14 BASISbereiche was ist üblich? Kopfbereich Menubereich Untermenus Bildbereich Fußbereich Sonderform One-Pager Sonderform mit Parallaxen-Effekt DEMO DEMO DEMO

15 KIss keep it simple stupid Eine gute Webseite ist einfach, sauber, knackig, klar, ehrlich und irgendwie überraschend Gestalte die Webseite um Deine Hauptaussage herum Die Webseite ist für den Betrachter, nicht für den, der sie macht

16 raster facebook

17 eigenes raster

18 über mich galerie AQUARELL ACRYL SERIE 1 SERIE 2 TITEL LOGO ausstellungen workshops kontakt bildwechsel inhalt inhalt inhalt FUSSZEILE ADRESSE

19 TITEL LOGO über mich galerie ausstellungen workshops kontakt inhalt inhalt inhalt FUSSZEILE ADRESSE

20 TITEL LOGO über mich galerie AQUARELL ACRYL SERIE 1 SERIE 2 ausstellungen workshops kontakt inhalt FUSSZEILE ADRESSE

21 das kannste SO MACHEN... Quelle: Internet

22 das kannste SO MACHEN... sieht aber SCHEISSE AUS! Quelle: Internet

23

24 RESPONSIVEdesign Photo: pixabay.com DEMO

25 RESPONSIVEdesign und auf dem handy? Generell: Macht Kunst auf dem Handy Spaß? Photo: pixabay.com

26 RESPONSIVEdesign und auf dem handy?»mobile First«? Modewort 1:»Responsive«Modewort 2:»Adaptive«Photo: pixabay.com

27 RESPONSIVEdesign und auf dem handy?»mobile First«? Modewort 1:»Responsive«Modewort 2:»Adaptive«tipp: tool in chrome browser Photo: pixabay.com

28 EIGENESlogo na logo :) Eigenes»Logo«macht einmalig Einfache Lösung:»SignaturInitialenFantasiename«Vielfache Nutzung Briefkopf, Visitenkarte, Autowerbung... Abspeichern als Bitmap! Photo: pixabay.com 03

29 EIGENESlogo JPG /.jpg / jpeg 04

30 EIGENESlogo achtung: Falsche Hintergrundfarbe 04

31 EIGENESlogo tipp: speichern als.png 04

32 das kannste SO MACHEN... Quelle: DEMO

33 PARTNER WEBicons KOMFORT HANNOVER EINSTELLUNG STIL was zu beachten ist Icons ersetzen Text RAUM INDIVIDUALITÄT ATMOSPHÄRE SERVICE ERREICHBARKEIT HERZ 05 DEMO

34 PARTNER WEBicons KOMFORT HANNOVER EINSTELLUNG STIL lizenzrecht Unbedingt Lizenzen beachten z.b. nur private Nutzung z.b. Verlinkung auf jeder Seite z.b. komplett freie Nutzung RAUM INDIVIDUALITÄT ATMOSPHÄRE SERVICE ERREICHBARKEIT HERZ 06

35 WEBschriften was zu beachten ist Schriften unterschiedlich (PC/MAC) gratis oder kommerziell Lizenzen beachten Schrift = Persönlichkeit Photo: pixabay.com 07

36 WEBschriften schrift mischung Nie mehr als 2-3 Schriften Handschriften gezielt einsetzen Times, Arial und eher vermeiden 08 DEMO

37 WEBschriften Diese Schrift ist zu hell Besserer Kontrast dieser text ist etwas zu dominant Dieser Text ist wohl zu klein für eine Präsentation Benutzen Sie Großbuchstaben nur GEZIELT Versetzen Sie sich in die Lage des Betrachters 09

38 TEXTtipps textmenge Ist»Text«Ihre Kunst? Listen oder ausformulieren? Weniger ist (meist) mehr Referenztexte ausführlich Einfache Wortwahl (meist) besser Text = Persönlichkeit Lasst Bilder sprechen 10

39 TEXTtipps quellenangaben Zitate kennzeichnen mit Quellenangabe 11

40 TEXTtipps zeilenlängen im web Zu breite Zeilen lassen sich schwer lesen und das Auge ermüdet schnell. Der Sprung vom Zeilenende zum nächsten Zeilenanfang ist mühselig. Zu kurze Zeilen mit weniger als 18 Zeichen sind oft ebenso mühselig zu lesen. Das Auge muss ständig in die neue Zeile springen und ermüdet schnell. Optimal lesbar sind ca. 6 Wörter und 34 Buchstaben pro Zeile. Texte mit mehr als 7 Zeilen werden oft nicht komplett gelesen. Viele lesen - besonders im Web - nur den Anfang und den Schluss. 12

41 TYPOtipps Lieber Markus, hiermit lade ich Dich herzlich zu einer Sommernachtsparty ein. Wir wollen essen, tanzen, feiern und gemeinsam den Sommeranfang in der Scheune von Bauer Hansen in Engensen feiern. Sonntag, 21. Juni ab Uhr Hinter den Höfen Burgwedel UAWG bis 5. Mai Lieber Markus, hiermit lade ich Dich herzlich ein, zu einer sommernachtsparty Wir wollen essen, tanzen, feiern und gemeinsam den Sommeranfang in der Scheune von Bauer Hansen in Engensen feiern. Sonntag, 21. Juni ab Uhr Hinter den Höfen Burgwedel UAWG bis 5. Mai 13

42 TYPOtipps Viele unterschiedliche Schriftarten = Fonts können ein Design ruinieren. 2-3 Schriften reichen in der Regel. Besser nutzen Sie weniger Schriften. Eine Schreibschrift wirkt persönlicher als eine Standardschrift. Schaffen Sie Kontraste zwischen "Formell" und "Individuell". Relevante Unterschiede kann man in Schriftgröße und unterschiedlichen Schnitten fett, kursiv, leicht und extrabold akzentuieren. Aber -nicht wie hier- alles in einem Abschnitt! 14

43 TYPOtipps aber nutzen Sie bitte niemals eine schreibschrift für einen kompletten absatz oder als fließtextschrift. diese schrift heißt deswegen auch "nichtlusduenn". und ich bin "nichtlusdick" Schrift: Joscha Sauer 15

44 TYPOtipps Bitte verzerren Sie NIEMALS Ihren Text Stattdessen verwenden Sie besser einen SCHMALEREN Schriftschnitt oder einen WEITEREN 16

45 TYPOtipps Bitte verzerren Sie NIEMALS Ihren Text Stattdessen verwenden Sie besser einen SCHMALEREN Schriftschnitt oder einen WEITEREN Auch solche angepassten Formen kommen meist aus der Laien-Ecke 16 17

46 TYPOtipps linksbündig rechtsbündig mittelsatz blocksatz Lieber Leser, bitte entscheiden Sie stets, wie ein Text sich am besten leist oder am besten aussieht. Nicht immer bringt der Blocksatz die besten Ergebnisse. Lieber Leser, bitte entscheiden Sie stets, wie ein Text sich am besten leist oder am besten aussieht. Nicht immer bringt der Blocksatz die besten Ergebnisse. Lieber Leser, bitte entscheiden Sie stets, wie ein Text sich am besten leist oder am besten aussieht. Nicht immer bringt der Blocksatz die besten Ergebnisse. Lieber Leser, bitte entscheiden Sie stets, wie ein Text sich am besten leist oder am besten aussieht. Nicht immer bringt der Blocksatz die besten E r g e b n i s s e. Eigentlich eher selten. Doch manchmal ist das ganz okay, wenn man entsprechend für sinnvolle Silbentrennungen sorgt und eine passende Gliederung hat. Eigentlich eher selten. Doch manchmal ist das ganz okay, wenn man entsprechend für sinnvolle Silbentrennungen sorgt und eine passende Gliederung hat. Eigentlich eher selten. Doch manchmal ist das ganz okay, wenn man entsprechend für sinnvolle Silbentrennungen sorgt und eine passende Gliederung hat. Eigentlich eher selten. Doch manchmal ist das ganz okay, wenn man entsprechend für sinnvolle Silbentrennungen sorgt und eine passende G l i e d e r u n g h a t. Oft wird der Zeienumbruch automatisch gemacht und man keinen Einfluss auf das spätere Aussehen. Oft wird der Zeienumbruch automatisch gemacht und man keinen Einfluss auf das spätere Aussehen. Oft wird der Zeienumbruch automatisch gemacht und man keinen Einfluss auf das spätere Aussehen. Oft wird der Zeienumbruch automatisch gemacht und man keinen Einfluss auf das spätere Aussehen. 18

47 WEBfarben was zu beachten ist Weniger Farben Lesbarkeit (weiß auf schwarz) Farbharmonien Farbe = Persönlichkeit»Seriöse Farben«?»Eyecatcher Farben«Perfekter Hintergrund»neutral«Photo: pixabay.com 19 DEMO

48 WEBfarben Hell auf dunkel ist schwerer zu lesen als umgekehrt Dunkel auf hell ist leichter zu lesen als umgekehrt Starke Farbkontraste sind schwer zu lesen und "flimmern" Starke Farbkontraste sind schwer zu lesen und "flimmern" 20

49 KÜNSTERbeispiele»zufalls«auswahl www. kuksi.com www. qiang-huang.blogspot.de www. kimcogan.com www. sdbarber.com www. stephenwrightart.com DEMO

50 GUTE BILDER PRAXISteil

51 PHOTOtipps wie fotografiere ich meine gemälde fürs web? Kamera mind. 8 Megapixel Zauberwort:»diffus«Keine pralle Sonne Gleichmäßiges Licht Kunstlicht ohne Reflexe»Niemals«Blitzen Bild fest auf Staffelei o.a. (Wind) Leichtes Tele mm Bildformat JPEG FEIN MAX Automatikserie (+-Drittelblende) Photo: pixabay.com DEMO

52 PHOTOtipps analog ist tot Bildbearbeitung am PC Von der Kamera in den PC via USB Kabel Kamerakarte und CardReader via WiFi ipad/mac: via itunes Bildbearbeitung online Erst auf PC dann hochladen via App vom Handy / Kamera als -Anhang / WhatsApp

53 PHOTOtools offline Adobe Photoshop (Profi) PS "Elements" manchmal gratis Alternativen: Affinity (Mac only) Corel PhotoPaint GIMP (kompliziert) ACDSee IRFAN View etc. Gänzlich ungeeignet:»paint«

54 PHOTOtools offline DEMO Adobe Photoshop (Profi) PS "Elements" manchmal gratis Alternativen: Affinity (Mac only) Corel PhotoPaint GIMP (kompliziert) ACDSee IRFAN View etc. Gänzlich ungeeignet:»paint« affinity.serif.com/en-gb/photo

55 MOBILEtools online Adobe Photoshop Express AppStore Pixlr.com AppStore Desktop-Version

56 PHOTOquellen kostenpflichtige online-fotos Stock-Photos

57 PHOTOquellen freie online-bilder Freie Fotos mit»haken«namensnennung / Verlinkung

58 PHOTOquellen freie online-bilder super-"free"-tipps: DEMO Stand: April 2015 Alle Angaben ohne Gewähr ;)

59 UND film? videos auf webseite Plattformübergreifend Mit jeder neuen Kamera Filmberichte im TV oder online Eigene Schulungsvideos Speedpainting / Techniken Workshops (gratis oder bezahlt) Qualität? Extern verlinken YouTube (Channel) Vimeo Photo: pixabay.com DEMO

60 HANDSon DOMAIN ANMELDEN Photo: pixabay.com/nasa

61 HANDSon DOMAIN ANMELDEN HOSTING WÄHLEN

62 HANDSon DOMAIN ANMELDEN HOSTING WÄHLEN BLOGGER-VORLAGE

63 HANDSon DOMAIN ANMELDEN WORDPRESS HOSTING WÄHLEN BLOGGER

64 HANDSon DOMAIN ANMELDEN WORDPRESS HOSTING WÄHLEN GOOGLE BLOGGER

65 HANDSon DOMAIN ANMELDEN WORDPRESS HOSTING WÄHLEN GOOGLE BLOGGER VERMARKTUNG

66 DOMAINanmelden am beispiel Selber anmelden = Eigene Seite Name leicht zu merken Kürzer ist besser Auf ÄÜÖ Umlaute verzichten Intuitiv auffindbar Name + Tätigkeit malerfuerstin.de Unübliche Endungen vermeiden.de.com.biz.org.nrw.pictures Photo: pixabay.com DEMO

67 HOSTINGanmelden am beispiel Hosting = Ihr Webspace 24/7 Bei eigenem Namenswunsch Bei individuellem Design z.b. Wordpress-Seite JOOMLA, TYPO3, etc Inkl. Adresse Vorteile: Eigene Domain inkl. Photo: pixabay.com DEMO

68 BLOGGERseite die welt ist eine google Photo: pixabay.com DEMO DEMO DEMO DEMO DEMO Eigenes Konto bei Google Stichwort:»Datenkrake«? Ranking = Google Android = Play Store = Google = Google = GMail Picasa = Google YouTube = Google Maps = Google Cloud = Drive = Google AdWords = Google AdSense = Google

69 DEMO

70 WORDPRESSseite die welt ist frei Eigenes Konto bei WP Sicherheit? Häufige Sicherheitsupdates "3 Modelle" (free) Premium (99 ) (Hosting) DEMO step-by-step tipp (english) DEMO Photo: pixabay.com DEMO DEMO

71 KUNSTmarketing GOOGLE Photo: pixabay.com

72 KUNSTmarketing GOOGLE NETZWERKE Photo: pixabay.com

73 KUNSTmarketing GOOGLE NETZWERKE KUNSTSEITEN Photo: pixabay.com

74 KUNSTmarketing GOOGLE NETZWERKE KUNSTSEITEN EIGENER SHOP Photo: pixabay.com

75 GOOGLE?! warum &%$ /#! erscheint meine seite nicht? Erstes»Crawlen«kann 6 Wochen dauern Seite gaaaanz unten Photos: pixabay.com DEMO

76 GOOGLEtools verbessern Gute Verschlagwortung Viele Verlinkungen von anderen Mobile Optimierung (neu) Häufig»relevante«Inhalte posten Webmaster-Tool aktivieren Code auf index-seite kopieren Photos: pixabay.com DEMO

77 GOOGLEadwords AdWords Anzeigen bei Google Selber anmelden via Konto Monatsbudget festlegen (z.b.: 3 ) Keywords eingeben Statistiken Sucherfolge bewerten Photos: pixabay.com DEMO

78 NET(t)worken künstler aller länder vereinigt euch!»facebookinstagrampinteresttwitter« Photo: pixabay.com DEMO

79 KUNSTseiten künstler aller länder vereinigt euch! creative.arte.tv/de/aboutus und viele tausend mehr... Photo: unsplash.com DEMO

80 MEINshop verkaufsplattformen de.dawanda.com Photo: pixabay.com DEMO

81 FAZIT workshop und jetzt?

82 FAZIT workshop und jetzt? Alle Checklisten online Handouts mit zusätzlichen Infos Bis mind. 30. Juni 2015 HANDOUTS ONLINE CHECKLISTEN ONLINE

83 VIELEN dank UND DENKEN SIE AN an ihre lila kuh!

84