When I design websites, I always like to keep a consistent flow. I follow the same process and use the same tools consistently for web design. Here are my favorite web design tools.
Paper and pencil
As I stated in my previous blog, My 5 Favorite Tools for Graphic Design, I always start by sketching with paper and pencil. A lot of web designers start wireframing websites like this. It gives you an idea of what you want your website to look like especially if you are designing a responsive design. I start with mobile devices and expand to bigger devices (i.e. tablets, laptops, desktops).
Photoshop, Illustrator, InDesign
I like to create the prototype in Photoshop, Illustrator, or InDesign. In these applications, I design exactly what I want the website to look like.
I use to be dependent on Photoshop for creating prototypes, but recently I have been using InDesign because it’s more interactive. For example, you can create buttons that actually link to pages.
Dreamweaver was the first program I used to start building a website. It’s an easy tool to use, especially if you are new to HTML and CSS. Now that I am no longer a beginner, I actually prefer Brackets (mentioned below).
I will say that Dreamweaver has updated their system recently, so you can choose your workspace now. The Developer workspace looks almost like Brackets, so I have been using it again.
The other thing I like about Dreamweaver is that I can upload the website online easily and quickly compared to Brackets.
Ever since I started the Front End Web Development program, I have been using Brackets. It’s free and easy to use. If you are a beginner web designer, I would stick to Dreamweaver, but if you have some experience and aren’t intimidated, then I would give Brackets a try.
The best feature in Brackets is that you can download plugins. My favorite plugin is Emmet; it lets you use shortcuts to add html tags quickly. It just makes it easy to write/add tags.
For those of you familiar with LESS, another plugin I like it LESS AutoCompile. It auto compiles a style.css page from your LESS page.
I haven’t found a good plugin to upload my website yet, but if anyone has any suggestions please let me know!
This is an honorable mention. I’m too poor to afford it, but I love it. Axure lets you create prototypes for your website that you can actually view online and use like an actual website. You can add drop down menus, buttons, links, animations, and etc.
You can make it exactly how you want your website to look, interactivity and all! Axure lets you create responsive pages for different device sizes. Sitemaps are also easily created within Axure.
Everything is so fast and easy because Axure creates different widgets that are useful for websites and you can create masters and default text, colors, and etc, so that everything is quicker and easier to create.
Do any of you have favorite tools for web design? Let me know in the comments or contact me.
-Natasha Lane Design Co.