Rapid web development tools and choosing color palettes

Question

Recently I have started creating website designs. I found out that the way I do it is very unproductive and takes forever to finish. I tried drawing it on paper, then doing it in HTML/CSS, but found out that if I want to change something I have to redraw everything because if I apply changes straight to my HTML/CSS I quickly lose my general web design style.

Are there any programs which allow fast web elements rearrangement/creation so I don't have to draw it and restart my HTML/CSS?

The same goes for choosing palette colors. Do professionals use any tools to create a clear view of exactly what colors they want to use, quickly checking if these colors would be okay? And how do you actually start choosing palette?

I found out that I'm a perfectionist, which leads to problems of over thinking every element and changing them too often which leads to never ending personal projects. I need some kind of clear workflow advice for web design.

Answer 1

To answer your first question, the type of tool you're looking for is called a prototyping or wireframing tool. Wireframing "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"^[1], whereas prototyping is creating "a first, typical or preliminary model of something, especially a machine, from which other forms are developed or copied"^[2]

It seems like you're more interested in prototyping. There are tons of articles on the subject, but this Smashing Magazine one is fairly comprehensive behind the "why" and okay for the "how" as well. As for choosing which prototyping tool among the numerous choices, HackDesign has a good list of prototyping tools. You should shop around a bit looking for one that will be good for your project.

But you don't always have to use a prototyping tool, especially for smaller sites. To me, the much more important thing is reusing old code, which can mean using code from a project you made already or a template that you find online. In that respect, you can use HTML5Up to find responsive templates or find Bootstrap specific templates. There are also a good many WYSIWYG (what you see is what you get) editors that enable people to make websites without directly manipulating the code all of the time. They're still in their early stages, but I'm betting in the future a hybrid will be standard. Services like SquareSpace can be great for creating quick, lovely websites.

Pixel perfect design is not the goal of webdesign. Instead, creating a site that looks really good across all devices and platforms is. To that respect, I wrote a post on an intro to responsive design which I believe is worth a look if you're starting out. I have some other resources related to learning web development here which could also be useful.

In my personal workflow, I do work on paper first and then do prototyping with HTML and CSS because that's what I'm most comfortable using. It saves me some time later on as well because I already have a base to work with.

---

As for your second question, there are a lot of good tools to help you pick good colors and color palettes. You have generic palette generators like Coloors and Paletton, ColourLovers which shows you palettes others have made using a color you input, other sites that show lovely color palettes like TheDay's Color, Pictaculous, which generates a palette from an image and is surprisingly good, and more specific ones like well known UI colors. There are countless more out there, but these are some of my favorites currently.

As for switching out colors on your web pages, that's where a CSS preprocessor comes in handy. I personally prefer SCSS, a form of SASS, because of some additional features it has, but LESS is also good. They're easy to start with because regular CSS is valid in them, you can just use more of their features as you learn them. The key advantage in your case would be variables with the color in them, allowing you to change it in one line and affect many elements at once.

Answer 2

This is pure opinion based, but I give it a shot.

As far as choosing a color pallette i go to color.adobe.com. Here you can discover other pallettes from users all over the world. But most of my clients already have a color pallette so i use that one.

For designing the actual design I use photoshop. I know there are diffrent tools out there that are made for webdesign, and i know that photoshop is for editing photo's, but its just the right tool for me because i know how it works. The programmers i work with will get the look and feel and start programming right away.

For other tools that directly output into a website there are many alternatives. Have you tried Adobe's Muse? That is pretty much drag and drop.

If you want more control over some coding try Macaw or Google Web Designer, although i have some bad experience with googles web designer, try it out. It might be the program for you (plus its free, so nothing to lose).

Answer 3

As JVS mentioned, this is very opinion based question.

I do both things, like you: design and code. And I am also very detail oriented (which other people call "perfectionist" and my clients tend to call "slow"). I prefer Adobe Illustrator (or any other vector software) over Photoshop for the design phase. I find it allows me to be nitpicking but to do so in an efficient way. These are the reasons why:

• My design will be vector based, so I can stretch/rearrange all I want without worrying about loosing resolution.

• I can define graphic and text styles in Adobe Illustrator for copy and graphic elements. For example, I can define a style for buttons and apply it to all the buttons. If I change my mind, changing all of them is an easier task than if I would have to go back and draw all of them from scratch. Same thing for text.

• I can also change colours in bulk. I can select all objects with a specific border or fill and change their colour.

• I can also create symbols and use them several times in the design (a button, for example). Then, if I change my mind and want to redesign the way the symbol looks, I can edit the symbol itself and all its instances are modified.

• The fact that it is vector based keeps reminding me that at the end the whole thing will be coded using tags, which are rectangular areas so I don't create designs that are almost impossible to execute. Mind you, with HTML5 and CSS3 this comment is almost obsolete.

• I have the option of forcing the shapes to snap to exact pixels which is great because at the end they will be coded with exact pixel dimensions, not fractional pixels.

• I can also set Illustrator in pixel view. This is quite useful if I have small illustrations such as icons, because I can see if the dithering will make them look weird. This is a whole different topic though (pixel perfect images using Illustrator). Take a look at my obsessive compulsive answer here if you are interested in that topic: What software should I use to make crisp game graphics for iOS games?

• After the design is done and I start coding, I can just click on any shape (or group of shapes) and see its dimensions, which accelerates the coding process.

• I can also use Illustrator's "Generate CSS" functionality to generate complex effects in pure CSS such as gradients.

• I can export elements of the design in SVG format.

• I can have multiple artboards. This is quite useful when I am designing a responsive website, because I can have all the different browser sizes one besides the other one and compare them. I can rearrange artboards, duplicate them or get rid of them quite easily.

• Also, since I can have multiple artboards, I can have small artboards with design elements I want to export, such as icons, and then just export that individual artboard.

• Being a perfectionist, I find that using Photoshop to do something else but editing photographs tends to make me slower because I spend endless little moments "polishing that one blurred pixel I left behind when I moved that rectangle to the left" which I know is irrelevant but I just can help it.

Note: I know that Photoshop has vector functionality as well, but Illustrator's vectors are easier to use in my opinion.