Chapter 1 – Tools web designers use

1. Environment setup

What OS to use?

Cross platform

Windows, Mac, Linux

Windows and Mac as development environment.

Linux as server environment. (Sometimes Windows or Mac too)



Vagrant for server side simulation in local machine.

Command to get vagrant up:

1$ vagrant init precise32
2$ vagrant up
3$ vagrant ssh


  1. Traditional hosting
  2. VPS
  3. AWS
  4. DigitalOcean

We have several decisions to determine which hosting service to use.

Do you need server-side logic? What server-side logic type you need?

Where to place the server? Do we need full shell access or just managed hosting? Will we need to scale up easily?

2. Apps for development

Adobe Creative Cloud

Creative cloud

  • Dreamweaver for web design
  • Photoshop and Illustrator for graphics creation
  • Flash for animation

Dreamweaver is not a must. Web designers prefer pure text code editor.

Sublime text

Sublime Text

Multi-cursors demo

Demo converting lines into list items

Demo on multiple lines copy and paste

Lightweight apps

In our daily routine, we prefer more lightweight apps when possible.



Replacing photoshop as prototyping tool.



Draw the web with web standard.

Macaw demo:

Interactive Content Creation:

Adobe Flash to CreateJS

Ahh Fireworks

Ahh fireworks

Adobe Edge series

3. Testing

We always need to test the website in different browsers.

Web Inspector

Web inspector

IE testing virtual machine

Modern ie

Browser stack

Browser stack

For mobile devices, we can use simulator or real devices.


Xcode iOS simulator and Genymotion for Android.

Ios simulater


Edge Inspect


Edge Inspect

overlaied image when clicked on thumbnail

Makzan | Introducing web design | Table of Content