cafeblog.hu webdesign workshop

40
WEBDESIGN WORKSHOP 2014. 04. 13.

Upload: zsuzsanna-toth

Post on 23-Jun-2015

303 views

Category:

Design


0 download

DESCRIPTION

Tóth H. Zsuzsanna webdesign workshop a Cafeblog VIP bloggereinek 2014. 04. 13.

TRANSCRIPT

Page 1: Cafeblog.hu webdesign workshop

WEBDESIGN WORKSHOP2014. 04. 13.

Page 2: Cafeblog.hu webdesign workshop
Page 3: Cafeblog.hu webdesign workshop

www.webdesigntanfolyam.com/cafeblogworkshop

AMIRŐL BESZÉLEKitt találod majd meg a workshop után is

Page 4: Cafeblog.hu webdesign workshop

1. lépés

Ha megtaláljuk a megfelelő színeket, kis túlzással a munka

nagy részét el is végeztük!

VÁLASZD MEG A SZÍNEID!

Page 5: Cafeblog.hu webdesign workshop

forrás: http://thecarolinejohansson.com

JULI ÉVI

Page 6: Cafeblog.hu webdesign workshop

forrás: http://thecarolinejohansson.com

KLAUDIA KRISZTI

Page 7: Cafeblog.hu webdesign workshop

maximum 5 színt és azok árnyalatait használd

a szöveges tartalmaknál viszont kerüld a sok színt, inkább törekedj az olvashatóságra

a színeket az un. HEXA kód segítségéveltudod azonosítani, ezeket kell beírni, hogy asablonodban is ugyanezt a színt kapd.

www.colourlovers.com

Page 8: Cafeblog.hu webdesign workshop
Page 9: Cafeblog.hu webdesign workshop

FEHÉRA legtöbb oldalnak fehér az alapszíne, ennek két alapvető oka van - egyrészt a legolvashatóbb a fehér alapon fekete szöveg, főleg ha hosszú szövegről van szó - pl. cikkek

Page 10: Cafeblog.hu webdesign workshop

A szabadon hagyott fehér felületeknek ráadásul van egy olyan tulajdonságuk, hogy odavonzzák a figyelmet! Nem kell minden helyet feltétlenül valamivel kitölteni!

Page 11: Cafeblog.hu webdesign workshop
Page 12: Cafeblog.hu webdesign workshop

A fehér alappal rendelkező oldalon a képek is megfelelő, kiemelő hátteret kapnak, sőt az egyes képformátumok okozta problémák - cakkos szélek - is kiküszöbölhetőek vele.

Page 13: Cafeblog.hu webdesign workshop

FEKETEEgy fekete alapra már néhány elemmel is vizuális csodát lehet művelni, de pont ezért nagyon nehéz elkészíteni, megtalálni azt, hogy mi az ami még nem túl sok, és nem is túl kevés.

Page 14: Cafeblog.hu webdesign workshop
Page 15: Cafeblog.hu webdesign workshop

Fekete alapon a fehér ill. a sárgás/szürkés szöveg olvasható a legjobban, de fekete alapra csak rövid szövegeket tegyünk - fárasztja a szemet, rontja a koncentrációt, ellenben gyönyörűen kiemeli a fotókat.

Page 16: Cafeblog.hu webdesign workshop
Page 17: Cafeblog.hu webdesign workshop

2. lépés

Akár milyen szuperül is írhatsz, ha megfájdul a szemem miközben olvaslak, nem foglak olvasni!

LEGYÉL OLVASHATÓ!

Page 18: Cafeblog.hu webdesign workshop

http://celebflipper.cafeblog.hu/

Page 19: Cafeblog.hu webdesign workshop

http://celebflipper.cafeblog.hu/

Page 20: Cafeblog.hu webdesign workshop

http://ikrekacsaladban.cafeblog.hu

Page 21: Cafeblog.hu webdesign workshop
Page 22: Cafeblog.hu webdesign workshop
Page 23: Cafeblog.hu webdesign workshop
Page 24: Cafeblog.hu webdesign workshop

BETŰKMilyen betűtípusok valók egymáshoz?

Melyik betűtípus mire való?

Page 25: Cafeblog.hu webdesign workshop

A betűtípusok, (angolul fonts) 5 nagy csoportra oszthatóak:

• Serif - azaz talpas betűtípusok• Sans serif - azaz talp nélküli betűtípusok• Kalligrafikus - azaz dőlt, írott hatású betűtípusok• Dekoratív - azaz díszító, különleges betűtípusok• Monospace - azaz fix szélességű

Page 26: Cafeblog.hu webdesign workshop

SERIF - a talpas

● klasszikus, elsősorban nyomtatásban olvasható jól

● weben inkább címsorként használjuk

Page 27: Cafeblog.hu webdesign workshop

SANS SERIF - a talp nélküli

● weben könnyebben olvasható sok szöveg esetén is

● modern, egyszerű vonalvezetésű

Page 28: Cafeblog.hu webdesign workshop

KALLIGRAFIKUS - kézírás jellegű

● egy-egy felirathoz● dekorációs célra● bizalmas, emberi

Page 29: Cafeblog.hu webdesign workshop

DEKORFONTOK - díszítő

● csak dekoráció célra● arculatokhoz● nehezen olvashatóak,

értelmezhetőek

Page 30: Cafeblog.hu webdesign workshop
Page 31: Cafeblog.hu webdesign workshop
Page 32: Cafeblog.hu webdesign workshop
Page 33: Cafeblog.hu webdesign workshop

HA MINDENT kiemelsz,

nem emelsz ki SEMMIT!

Page 34: Cafeblog.hu webdesign workshop

MONDD EL KÉPEKKEL IS!

3. lépés

Ha megtaláljuk a megfelelő színeket, kis túlzással a munka

nagy részét el is végeztük!

Page 35: Cafeblog.hu webdesign workshop
Page 36: Cafeblog.hu webdesign workshop
Page 37: Cafeblog.hu webdesign workshop
Page 38: Cafeblog.hu webdesign workshop

Ingyenes, de csak akkor ha beilleszted a képet!

Page 39: Cafeblog.hu webdesign workshop

www.pixlr.com

Page 40: Cafeblog.hu webdesign workshop

www.webdesigntanfolyam.com

TÖBBET AKARSZ?

fb.com/webdesigntanfolyam