44
WEB DESIGN
TIPS & TRICKS
EASY TO READ / SUMMARIZED VERSION
WWW.MOTIONEDGEDESIGN.COM
1
2
Involve clients from the start
3 Fast prototyping
Don’t start with a design: take a scenario-based approach.
More info
4 Deploy locally
“What separates design from art is that design is meant to be... functional.”
- Cameron Moll
More info
5
6
Stick with a 3-color pallette Resource 1 Resource 2
8
7
Typographically rich More info
9 Right size & high quality images
Fonts that are easy to read across devices and browsers More info
10
JPG Optimization Resource 1 Resource 2
When to use JPG, GIF & PNG More info
11 Give it space / proper margins
12
13
User friendly contact form
Killer About Us Page
14
Polished, professional logo 15
“If you think math is hard try web design.�
- Trish Parr
16
Logo placement Top left corner
18
Responsive design
17
K.I.S.S 19
Mobile / tablet friendly 20
Social Media Resource 1
Photoshop layer organization
21
Skip Flash, use HTML5
22
23
Photoshop workspace
Chrome Developer Tools
More info
More info
24
Buttons & Strong Calls to Action 25
“The greatest artist and web-designer ever is indeed a spider!�
- Munia Khan
26 Get rid of clutter
Intuitive navigation 28
Call to action / essential info in the upper portion
27
29
Design every page as a landing page
30
Browser compatibility Resource 1
Use CMS - Wordpress, Drupal, Joomla
31
32
Design for the users, not you
33
Multimedia & videos
Design with SEO in mind
More info
34
Moodboards More info
35
“Intuitive design is how we give the user new superpowers.�
- Jared Spool
36
Get assistance Resource 1 Resource 2
38
37
Constructive criticism More info
39
Best websites are designed to a grid More info
Free UI kits More info
40
Versioning graphic files with Dropbox More info
Collaborative screen-sharing More info
41
42
Code distribution, versioning and storing Resource 1
43 Syncing large files
CSS refresh bookmarklet
More info
More info
44
Manage your workspace
“Intuitive design is how we give the user new superpowers.”
- Jared Spool
More info
THANK YOU
FOR READING
WWW.MOTIONEDGEDESIGN.COM