I'm developing a website builder application and I have to design the menu with the components. It's essentially the part where the users are selecting and adding the text or image components.

I want to make it easy for the users to select the size of the components therefor I added them to the toolbox with pre selected sizes however it looks a bit cluttered to mee. How can I improve this toolbox?

The right side of the form is the editor itself. The components can be moved up and down with mouse gestures.


1 Answer 1


After looking at your example and other website builder sites I would make a few changes to make the site look cleaner. First make the Add/Remove Content significantly smaller maybe the same size as the left area next to it, also be sure to only show the Add/Remove content as a pop-up that comes from interacting with the section to the left of it and not something that is constantly on the page as it will not always be needed. I would also increase the size of the actual website portion where they can move their images etc... Your users are going to want a large area to work with on the web page itself and not be having to zoom in their browser to see what they are doing. I think a good website to kind of look at for suggestions is wix. Here is an example from their builder.


I do like the idea of pre-determined sizes, but you could also add the option for the user to stretch or shrink certain items such as images if they need a more exact size. This would enable quick use of your pre-selected sizes but also allow the user to further customize the size if it were needed. Just some suggestions, hope it helps.

  • Hey @nick_m, thank you for the information! It definitely helps. You are right about the might not be needed all the time part. Are you sure on the part with the dropdown like wix? People might not be used to that as much as we would like too. The resize on the fly is currently not possible technically because I want to push the app out of the door and modify it after that. I'll definitely increase the part where they modify the page
    – Herr
    May 16, 2014 at 14:57
  • I feel that the drop down is something that you can do without if you really don't like it. The only reason I feel that the Add/Remove content should be a pop-up/drop-down is because it's not something that they will always be using on the page. Once they have all of the features on the page they may want to get rid of that and just move around items on the page until they get the effect they are looking for. Instead of having it as a drop-down you could effectively give it a minimize button enabling the user to keep it up or get rid of it upon there request.
    – Nick_M
    May 16, 2014 at 15:02
  • an overlay menu is the right approach so the user can see the full layout underneath. i would also try making the menu transparent unless the mouse is over it. this way the user can see the full page through the menu yet still access the menu if needed.
    – DaveAlger
    Mar 12, 2015 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.