Extravaganza is Dead, Long live Minimalism: Designing a Clean Layout

Designing with Wix | May 31st 2010
You might not hang a Piet Mondrian in your living room, but when it comes to web design “less is more” serves a different purpose . I’m not referring to minimalism as a design aesthetic but as the very foundation of your interface. From purveying a clear promotional message to designing effective navigation, minimalism plays an important part in your website’s structure.

piet-mondrian-nike-dunk-low-sb-3

When it comes to building your own website, layout minimalism is a useful approach to keep in mind. First build the structure- with clean lines and a good use of white space. Once you have your clearly built interface Layout you can then incorporate your personal design concept.

Remember that creating a website isn’t always about fancy techniques, too much sparkle and flashes can create a chaotic messy feeling and distract the eye.

A3_minimal-website“Underwonder”


Preparing Your Layout


Wix Rulers- A Quick Easy Design Grid

You can build your design grid through wix. Click on Arrange – Rulers, you can add as many rulers that you like by dragging them out of the main ruler. When you open a new page on your website, the grid will remain consistent with the original plan. It will help you organize your graphic elements as well as keep them aligned. To close the rulers, click on the small arrow on the top right.

A3--Wix-gridImaging-1′s wix website


What’s on the Menu – The Navigation Bar

Your site should include a navigation bar. Whether horizontal or vertical it should always appear on the top of the page, and be easily accessible from each section of the site. Always keep it visible, and if adding sub-menus for more detailed viewing, make sure the visitor can find their way home. Check out how Ben Hulse uses the menu bar on his website:

A2_ben hues website

A
Adding a Menu on Wix:

1. Click on Page Parts – Add Mini page.
2. Click on “Add Menu”. You can choose between horizontal, vertical and thumbnail menus.
3. Under “Menu Settings” you can play with the menu properties.
4. Use the “Manage” and “Format” options to edit the text.

A4--Menues

F
Fun Tips and Tricks for Keeping an Organized Work Space:

1. The alignment box, Ctrl-k or “Arrange”- alignment options.
2. Grouping – by selecting two or more elements simultaneously a small box will appear on the top left. Clicking it will connect the elements allowing you to edit them together.
3. The transform box – under “Arrange”- the transform box gives you the option to move graphic elements around accurately by the pixel. This makes it easy to design an accurate layout.
4. Locking elements – Once you planned your web layout, locking each element into place will create an easy work flow.

Keeping your work space organized and taking time to plan your layout will allow you to build your own great accessible Website.

And some thinking material for the weekend : “Things should be made as simple as possible, but no simpler.”—Albert Einstein