Web design layout/sketch tools


I’m just interested what resources people use for designing website layouts, or do you simply use pen and paper?

Something like paint but more luxury!

Thanks in advance

Sketch !

It saves a lot of time and its very easy to use after some tutorials.

Not sure if it’s allowed to publish links here but you can search on google.
Also if you decide to get it also google “browser mockup sketch” to visualize your design “more”.

Depends on situation :slight_smile: sometimes I am using pencile and paper and sometimes this tool https://wireframe.cc

I mostly design in my head…
screen layout and layout correlation
then I use excel to transfer the data and code design to match up with the screen design
from there… I start to break up the screen design in components and tie them back to the data and the code.
My parents installed extra ram in my head to handle the load. :wink:

I think that some may agree with me, but I don’t always like being glued to a computer. :wink:

When creating ideas for a website design and layout, I like to travel to a nice place to clear my head and think. Great places are a cafe, your backyard, the park and other nice natural places. :leaves:

I usually get lined paper with a protractor and a pencil (keep it simple). On the left margin, I write the name of the website, the category and some of the things that the client wants.

In the center of course goes the actually website sketch. Just think, “How can I make something new or make something that exists even better?” I also like to write things like “Background: Cordovan” with a line drawn to that corresponding section.

In the right margin is where my notes are found. I use bullet points and simply add non-specific things that I want on the website, but may apply to many parts of the site.

I know that it might be very different from what you are looking for, but it is another option that is one of my favorite parts of the web design process. :wink:

Personally, I sketch out basic ideas on paper, but the key here is to have the desktop tablet and mobile sketch all side by side on the same sheet then to sketch them at the same time…

Then I move straight to webflow and use that to prototype & build the final version, webflow is such an excellent tool because it removes the need for spending hours in sketch or photoshop designing sites one pixel at a time, webflow lets you build final version sites incredibly quickly and make major changes in seconds. :smile:

I’m a sucker for pen and paper in the early stages. I have a big A4 sketch pad filled with dot graph paper and I have to get ideas down fast because my memory can be like a sieve a lot of the time. Once I’m done on pen and paper I’ll start thinking colour and typography. Then I start to refine it all into a final design with Photoshop or Sketch.

I have found recently though that after the pen and paper stage I can bypass photoshop and sketch all together and get straight into Webflow. Its fine a lot of the time but I sometimes I have to provide clients with proofs rather than prototypes so I can’t do it all the time.

1 Like

I used photoshop and sketch for a while but find that I have refined my webflow process to the extent that it is actually faster to just build it perfectly in webflow than produce a mockup, and clients generally (if not always) prefer a functioning site in prototype stage then a static mockup. :smile:

1 Like