Website Design Tools For Beginners

Web site Design Tools for Beginners

Before I get into this I just want you all to know that as of this date I am still a student. This is merely my opinion of the tools I have used so far. With that said, there are a few things I have gravitated to when I comes to designing web and mobile applications that I think can really help anyone getting into UI/UX design.

Why Design your Application First?

Why is planning out your application so important? Well first of it helps get a sense of what problem you are trying to solve in the first place. Drawing out some simple shapes can quickly organize your ideas and help you get a sense of the flow of your application.  When I start it is never pretty but it gets my head into the project and can also help generate new ideas.  Second, having a good design will help you communicate your idea to the customer. They can quickly yay or nay any ideas early in development. This is to prevent any confusion down the road. Changing a design plan is much easier during the first stage of an application then right before launch of an application.

So with that said here are a few tools I have used and really enjoyed for designing a website application.

‍

Paper and pencil

Yep, I find the very first thing I use is paper and pencil. Sometimes its all I need to get the project up and running. I’ve seen this mentioned a few times on blog posts and it’s for good reason. Paper is cheap, and I can get my ideas down quick. 

One method I really like is folding the paper into quarters and using that as my frames to work in. Now my writing sucks but at this stage who cares, its for me. If I want to show a client a design I will do it up in a program like Sketch or Adobe Sketch.

Balsamiq 

Balsamiq is a wire framing tool that is  easy to use and I love the look of it. Its design style look recreates the whiteboard/storyboard illustrating experience which I think is kind of fun. If you aren’t familiar with what wire framing is, it is the process of seeing how the interface of your application interacts with the user in very simple terms. Like a storyboard for a movie. It is demonstrating the application in its basic form. 

Balsamiq isn’t free, but it isn’t expensive. It has a feature where if you don’t use the app it will freeze payments… well it use to which is nice because I hate not using something and paying for it. You can check it out at balsamiq.com.

Adobe Xd

‍Another web and mobile design tool I really like working with is Adobe Xd. I have been a subscribe to the Adobe suite for a while now but just recently came across this tool.

I love using this program to prototype my solution design to a team. The best part is it doesn’t take long. You can set your application device to get a sense of your boundaries and start building. In the prototyping phase you can easily connect buttons to activity screens and export everything via URL or PDF. It is a great tool and you will be designing in minutes.

To use this you do have to pay for the Adobe subscription which isn’t cheap. However, if you are designing the subscription will give you a ton of other programs such as photoshop and Lightroom. So it’s worth it if you need many applications.