Web Design Tips on Designing Complex Websites
January 25, 2016 by Unknown Posted in: Design | Web Design | WebsiteWeb design comprises many different crafts, starting from writing the HTML and CSS to optimizing the website’s user interface with a nice look and feel.
As we acquire more knowledge about the world around us everyday, our ideas about things become increasingly complex (and often complicated), and that can include things which we come across everyday, or seemingly unimportant stuff as well. And websites are no exception. But no one is to blame, because sometimes websites would just feel incomplete without all their complexity. And the designer must make sure that all the content is presented in a way which feels organised and does not overwhelm the user. So, here are some simple web design techniques which can help design complex websites better.
These web design tips will help you build more beautiful and elegant websites even though it does not dive into the specifics of how to implement the same.
Use Whitespace to your advantage
Adding the right amount of whitespace - which allows content to breathe, while not looking like a huge gap to suffice for low amount of content - can make a website look much better, and also make for a good browsing experience. Whitespace when used right can make important elements stand out, help in easy reading of text, and helps in easily identifying items like buttons or drop-down lists.
 |
| A Screenshot from http://www.philiphousenyc.com/ |
Philiphouse uses whitespace well to draw users' attention to the product images and categories. Somethingsplendid also makes use of whitespace to make for a clean and organized look.
Some may think that closely packed content is a better way to present them as it allows the user to focus on the content, but it is a wrong idea because in reality, it confuses users as to what they should actually be doing.
Hide content that does not need to be visible all the time
Your website may have lots of content, and may have so much content that you can't even think of fitting all of it in your page. In that case, prioritize. Classify content based on how important they are, and whether it is necessary that the user should be able to see them at all times. You'll find that it would be okay to keep some content hidden, and can be made to come into view through some user interaction. It has to be kept mind that the user has to provided with some accordance to make an interaction; you wouldn't want to keep them guessing.
For example, instead of displaying icons for Facebook, Twitter, Google+ etc., it would be better to have a button which says 'Share', and on clicking/hovering on it, the icons come into view. Or in case of an image gallery, clicking on an overflow icon would show the image properties, and additional controls. On an online shopping site, a product's information can be made to appear upon hovering over it's image.
Make sure to convey the main goal
Your website may allow users to do many things, but it has a unified purpose, which the user must be able to comprehend without much thinking. It is therefore important that the main purpose of your site is displayed in the form of a statement in the landing page. The text should be adequately sized as well so that it draws user attention. The text can also be put above an image to make it stand out better.
Diamondhtml utilizes the above technique and puts it's message up front. Rareview also does the same, and adds some extra text to support the main statement.
Keeping the statement up front let's the user know what the site does. Then they will be able to conclude whether or not the site can be used to achieve what they have in mind. All in all, it helps to create better user experiences by preventing false assumptions about the site's functions.
Animate objects to add life to content
A website with lots of content doesn't necessarily have to be a static one. Animating objects can make a website feel smoother, while maintaining or establishing relationships between objects. That being said, one should avoid unnecessary animations, as they may in turn confuse users. Also, intensive animations, like a roll, should be used wisely and only if required.
Many websites which have a top bar make the bars slide up partially and/or simplify when the page is scrolled up to make room for the content below. In some sites, hovering over/clicking on the thumbnail of an image brings up the full-res image via a zoom-in animation. There are also sites which employ parallax animations on scrolling vertically/horizontally.
In Fleetfeetsports, when you add an item to the cart, a shoe goes into the bag, and the bag itself bounces. This visualization tells the user that his/her request (adding the item to the cart) has been fulfilled.
Thus, animations can engage the user with the website and it's content by means of various kinds of motion.
Explore new ideas and learn to stray away from 'guidelines'
One might think that playing it safe is a good way to keep their users engaged and happy. Yes, it is true that users have certain expectations of how a particular kind of site feels and looks like, and it is also important that we design sites that meets those expectations. But there is always room for innovation. A good designer knows how to make a website 'unique' while still making it as easy to use as any other similar site(s).
As far as your site is on par with other sites in terms of usability, any kind of crazy design will be justified. And to be able to make breakthroughs in web design, one must at first know what constitutes good web design. Only then will they be able to think out-of-the-ordinary and make aesthetically unconventional UI.
Subscribe to blogredesigned
TO KEEP UP WITH DESIGN