How are modern site prototypes created?

S

Sergei Gurdjiyan2017-12-23 12:09:23

Layouts and prototypes

Sergei Gurdjiyan, 2017-12-23 12:09:23

Actually, the question is with the help of what prototypes of sites are created?
The search engine certainly answers this question. But there is no time to check this bunch of options.
Interested in people's experiences. In the desired solution, it is expected to see some kind of indentation system, font sizes, so that it would be easy to manage. Those. by changing the font size in the header so that it changes automatically on all pages of the prototype.
What are the universal tools for creating website prototypes?
Clarification: a prototype is the creation of a site framework in the form of schematic blocks to work out the site structure and approve it with the client.

Reply

Answer the question

In order to leave comments, you need to log in

9 answer(s)

K

Kadzi, 2017-12-23
@mrKorg

Sergey, Figma will rock you .
Without further ado:
Figma Chips Figma
Overview
Everything you asked is there. In one place.
In capable hands (an understanding of form and proportion, color, composition, typography), such programs are simply amazing.
ps do not go deep, try figma for a few hours, if it seems to you that this is not enough, try sketches, etc.

S

sim3x, 2017-12-23
@sim3x

html + sass/less/stylus

A

Anton Guk, 2017-12-23
@agent_tremolo

If you want to work on the grid and fonts, then sketch is great for assigning styles and symbols to change on all pages.
But the prototype doesn't really require that. If it's realistically detailed, then the focus is on interacting with the elements, not on their design. If you work in the prototype phase with size, grid, and vertical rhythm, you will get bogged down in these details and may miss out on the really critical UX details. Fonts and indents at this stage are set roughly - if only it would fit into the screen.
Therefore, sketch it better in Axure RP /
The main thing is to convey this approach to the client. :)

E

Evgeny Boychenko, 2018-05-03
@livetyping

We most often draw screens in Sketch and then glue them into an interactive prototype through Marvel. Looks more like a design than a schematic prototype, customers love it.
Read more about free prototyping software here:
https://livetyping.com/en/blog/free-programm...

L

lukoie, 2017-12-23
@lukoie

Sketch or Adobe HD

M

McBernar, 2017-12-24
@McBernar

Prototypes are a waste of time.
But if you really want to, a sketch / figma can do all this. Just draw rectangles.
And there is the axure, which is a monster, but very functional.

D

DarkMode, 2017-12-24
@DarkMode

megaboilerplate.com

R

Roman Sippel, 2017-12-29
@SeoHueo

There are simple semi-free services like wireframe.cc . First, a piece of paper and a pen to outline what's what in your head, and then wireframe - 2-3 hours and the prototype is ready

G

Goolyandex, 2018-08-09
@Goolyandex

esk.one try. There are prototypes of sites and schemes and everything. Universal tool. There is even a mindmap. And free.