One of the hardest but most enjoyable things about being involved with website design and development is the ever changing challenges that come with it. Luckily there are a vast range of tools that have been and keep being created to help us on our journey to the perfect website. As part of our top 10 series I thought I would share ten tools that I use in my workflow when creating Fantastic websites.

1. Axure

http://www.axure.com/

Building great business solutions and websites requires planning before going into production. Axure allows us to analyse problems, design solutions and create interactive prototypes. We can test drive interactive HTML prototypes and gather meaningful feedback, so we are able to make informed decisions when we start to flesh out the designs.

What is Wireframing

Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information. Read more about wireframes here http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

2. Photoshop

http://www.adobe.com/uk/products/photoshop.html

Photoshop is probably the most popular tool in the design world. We use our findings from the wireframing stage to create beautiful experiences for the web and the designs that are outputted from Photoshop are what the finished website will look like.

3. InVision

https://www.invisionapp.com/

We use InVision to turn our great looking Photoshop files in to high-fidelity prototypes really quickly. It allows us to show how a user will interact with the finished site. We can add animations, gestures and transitions that turn flat designs in to interactive prototypes.

4. Koala

http://koala-app.com/

Koala is a GUI (graphical user interface) used to compile things such as Sass, Less and JavaScript. You can easily setup a project in Koala then when any changes are made to a file it will automatically be compiled in to a useable format. There are some great options for minifying and formatting your output.

5. Sublime

https://www.sublimetext.com/

Sublime is a text editor created purposely for code. It has a cool UI (user interface) and some really nice features. There is a huge community that create packages for Sublime which basically means any functionality you wish you had has probably been created by someone else and Sublime makes it super easy to install and use.

6. Laragon

https://laragon.org/

Laragon is a new tool I have started using. It basically turns your computer in to a fast, flexible and powerful server. I recently started using this instead of WAMP which is a similar tool because of some nice usability advantages