Osnove Web Dizajna
MARKO ALEKSIĆ / SEP 25, 2016
Upoznavanje
UVODNI DEO
Marko Aleksić
TWITTER @MVRKIZ / INSTAGRAM @MVRKIZ

UI/UX i Web Designer
MOJE ZANIMANJE / CLARINESS & MWEB

Co-Osnivač WebDana
WEBDAN KONFERENCIJA
Prelazak u Beograd
FEB 2013 -
Freelance od kuće
MAR 2009 - FEB 2013
Moji Počeci
PRE 2009
Moji Počeci
Freelance
UPOZNAVANJE SA DIZAJNOM

BIO REPER, JBG






















A za to vreme...
Dve nedelje
IZDRŽAO

Dve godine
IZDRŽAO

Dao Otkaz
NAKON TOGA

Stalan posao i prelazak u Beograd
DIZAJN KARIJERA
Drey, Wireless Media, Clariness
DIZAJN KARIJERA
MWEB
A UPOREDO I








Šta je web dizajn?
WEB DIZAJN OSNOVE

Šta je web dizajn danas?
WEB DIZAJN OSNOVE

Zašto postoje dizajner i developer?
WEB DIZAJN OSNOVE

ESTETIKA
KORISNOST
SKALABILNOST
JEDNOSTAVNOST
FUNKCIONALNOSTI
DIZAJN U KOD
POVEZIVANJE SA CMS-OM
KOMPATIBILNOST
Da li može jedna osoba sve to?
WEB DIZAJN OSNOVE
"Dizajn nije pravljenje prelepog dugmeta sa teksturom i animacijom koja oduzima dah...
Dizajn je nalaženje načina kako da uopšte ne postoji to dugme."
- EDVARD TUFT

Dizajn Termini
WEB DIZAJN OSNOVE
Grafički vs Web Dizajn
WEB DIZAJN TERMINI

Photoshop vs Illustrator
WEB DIZAJN TERMINI

Vector vs Raster
WEB DIZAJN TERMINI

Tipografija i Fontovi
WEB DIZAJN TERMINI

95% Interneta
U OVOM TRENUTKU REČI ČINE


Fontovi za Web
WEB DIZAJN TERMINI
Google Fonts
Lato, Overpass, Open Sans, PTSans, Gotham, Sagoe UI, Roboto, Museo, Exo, Proxima Nova, Avenir, Futura, Ubuntu, Droid Sans, Montserrat, Georgia, Verdana, Oswald
http://fonts.google.com/
Boje: RGB vs CMYK
WEB DIZAJN TERMINI

Flat vs Gradient
WEB DIZAJN TERMINI


White Space
WEB DIZAJN TERMINI


Responsive
WEB DIZAJN TERMINI
56 FUCKING %
PROCENAT POSETE SA MOBILNIH UREĐAJA



UI vs UX
WEB DIZAJN TERMINI
UI (User Interface)
WEB DIZAJN TERMINI





UX (User Experience)
WEB DIZAJN TERMINI








Dizajn Alati
PROGRAMI I APLIKACIJE
Photoshop, Sketch, Illustrator, InDesign, Vector Magic, After Effects
ALATI ZA DIZAJNIRANJE
Papir i olovka, LucidChart, Balsamiq
ALATI ZA WIREFRAMING
Dropbox, Lightshot, Recordit, WhatFont, OneTab, Spotify
OSTALI ALATI
Asana, Jira, Trello, Slack, Skype, Marvel, InVision, Avocode, Zeplin
ALATI ZA KOLABORACIJU
Vrste Sajtova
KAKVI SVE POSTOJE
Blog
VRSTE SAJTOVA


Prezentacija
VRSTE SAJTOVA


Navigacija
Call To Action
Usluge
Testimonial
Ko sve koristi
CTA 2
Footer
eShop
VRSTE SAJTOVA

Portfolio
VRSTE SAJTOVA


Forum
VRSTE SAJTOVA

Sklapanje sajta od postojećih elemenata
VEŽBA
TRAJANJE 15 MINUTA
Crtanje tog sajta u Photoshopu
VEŽBA
TRAJANJE 15 MINUTA
Kako doći do klijenata
PRVI KLIJENTI I PROJEKTI
99 Designs
www.99designs.com
Dribbble
www.dribbble.com
Behance
www.behance.net
www.instagram.com
Koliko naplatiti?
PRVI KLIJENTI I PROJEKTI

Kako sam došao do
10x veće plate
od svoje majke

Iskoristite tehnologije
nemoj da one koriste vas
Igor Mitić

SPECIJALNI GOST
TRAJANJE 15 MINUTA
Organizacija fajlova
PRVI KLIJENTI I PROJEKTI

Prototipovanje
https://marvelapp.com/
Muke sa
developerima

Knjige i Tutorijali
STICANJE ZNANJA
Don't make me think
STEVE KRUG
The Principles of Beautiful Web Design
JASON BEAIRD, JAMES GEORGE
Designing for the Web
MARK BOULTON
Pixel Perfect Precision
USTWO
"How to design a website"
WWW.YOUTUBE.COM

Skillshare
www.skillshare.com/classes/design
Lynda
www.lynda.com/Design-training-tutorials/40-0.html
Treehouse
www.teamtreehouse.com/library/topic:design
Udemy
www.udemy.com/courses/design/web-design/
Coursera
www.coursera.org/browse/computer-science/design-and-product
Pitanja?
HI@MARKIZ.IO

FB.COM/MARKIZ | INSTAGRAM.COM/MVRKIZ | TWITTER.COM/MVRKIZ
WebDan - Osnove Web Dizajna
By Marko Aleksic
WebDan - Osnove Web Dizajna
Prezentacija za WebDan Workshop o Web Designu
- 1,819