How and in what material or digital form to prototype a site from an idea to a layout?

Question

Layouts and prototypes

There is a small site written literally on the knee. The question arose about expanding functionality. You need to redo it from scratch, taking into account new "trends" in the construction of such projects. The problem is that everything is done by one person and how to competently bring the project to the stage of ready-made layouts of each page is not entirely clear. It is not clear in the sense that drawing on pieces of paper is as effective as a maximum of initial ideas. And how is the process of arranging ideas into functional structures, and these structures into ready-made PNGs for layout designers and programmers? What software or principle is used to constantly take into account "ideas" and iterate them? There are a lot of ideas, they are all interesting, but how to effectively build all this into a finished silhouette? What subtleties are present in this process from your point of view?

Answer 1

Briefly.
If there are many ideas and they are interesting, you need to bring them into a state of correct relationship, because our imagination is less limited than web tools.
Visualize your interesting ideas in the form of a mind map . This will give you not yet functional, but already a structure.
Based on this structure, make up the logical structure of the site - you can simply list the necessary pages with a nesting hierarchy, or you can again visualize it as a map, in the same tool where you created the mind map.
Having the site structure in front of our eyes, we move on to designing the site interfaces and creating a prototype. At this stage, you will come up with (I hope) how it is most convenient to arrange certain elements on the pages, how they will interact with each other, how the user will interact with them.
After that, you can move on to design. Based on the prototype, your designer will create a beautiful (and I hope so) website that will function and interact as you intended in your prototypes and implement your interesting ideas as you outlined it in the mind map.
My toolkit:
XMind
Axure or Moqups
Photoshop CC 2014

Answer 2

sheet+pencil -> photoshop\visio\pencilproject -> axure -> symbiosis of all graphic programs at the previous stages + js + svg + xml + css3 + html technologies.
operating on each of these entities at one stage or another of the development of the idea, a good result is achieved. the only thing is that the possession of each program may not always be perfect for everyone - then you have to sacrifice something and look for a compromise and alternatives