Hey guys, i was wondering what tools do you use to prototype a website design, do you start with html/css after the sketches or do you use something else??
I am trying to get some methodology and best practices here.
Personally I like to use Balsamiq, which is a powerful prototyping tool for quick, effective wireframes. It’s straight to the point for low fidelity wireframes. For high fidelity mockups, you can also use Sketch. It seems to be pretty popular these days. It’s easy to use, so the learning curve isn’t all that bad. There are also tools like Adobe fireworks which is robust as it will allow you to do low fidelity or high fidelity mockups.
In regards to best practices, every designer has different ways to complete a website, or a user interface. Personally, I like to get the user experience down with wireframes, then move into color comps (mockups), then frontend development. That’s not to say it’s the best practice, it’s just what works best for me. I can complete designs much quicker and efficiently with this process.
2 Likes
@rafikrafik I tend to jump right to HTML & CSS after I have a good idea where I am going with sketches. I have a easier time solving interactive problems in HTML & CSS than I do in wireframe tools. I’ll only jump into tolls like Photoshop or Sketch when I want to add more visual design detail or I am stuck with HTML & CSS. They end up being high fidelity sketches.
But like @coreyhaggard said every designer has different ways and tools for their own process. This is where experience and practice really come into play. It’s important for a designer to know what tool will solve the problem with quality and speed for them.