We just wrote a post about the design over at The Veloist, a social network on Ning for cyclists. Specifically, we talked about how you could make your tabs really stand out. As an encore, we interviewed the social network’s designer, Cleatus Murdaugh, for some tips on creating a beautiful social network.
Cleatus runs Distortion Design, and he is responsible for the design of a number of social networks on Ning — as well as some themes available to you on your social network on Ning. Along with Michael Valenti, Veloist’s creative director, Cleatus has produced an amazing looking social network. Here are some of his design tips after the jump.
What principles or ideas did you rely on when designing The Veloist?
The design principles we used to shape The Veloist are the same we use when developing any new brand. We asked the questions: What will The Veloist stand for, and what will it want to become in the future? Like any good brand, this helped us shape the design to fit the needs of the brand, not the other way around.
The logo and art direction are a product of creating an all-inclusive brand feel, not an exclusive one. The cycling world is made up of very vertical groups of bike riders, none really talking to the others. The overarching theme we wanted to exploit in the creation of The Veloist was the connected passion for cycling. This shared passion crosses all types of bike riding and is a universal theme.
The logo of a person with raised arms made from a bicycle chain ring is a visual of shared passion and excitement for riding. We also work hard at trying to include all types of riders in our communications with the community.
How do you think good design can impact a social network?
Good design is and always will be a key component in any type of communication. Be it an advertisement, collateral, website or online community, the design impacts greatly on what is said by how it is said. That is, when I read a page with poor design and then the same content on a well-designed page, there is a difference in my perception. Many people are not aware of it, but there is a big difference in believability and credibility of the material.
Good design makes good content even better. People want to associate with groups or companies they believe in. This is how they become brand fans. It is no different with a social network; they want to share with like-minded people. The design, good design, can impact that feeling of belonging.
What design suggestions do you have for other Network Creators who are designing their social network on Ning?
Let me interject a short commercial before answering: if you are trying to design a social network that is going to be a brand, call us, we’re available to help. Creating brands is what we do.
Other than that I’d say try and figure out who you are and what you want to be. And have a clear understanding of who it is you are talking to. This is the part you can’t fake.
To connect with any group of people you must be a part of them, live what they live and understand how they will react to things. Find the message that will unite your group and keep it simple. Too many people think design has to be complicated to be good. On the contrary, I think it is a matter of pulling things away; editing will help make the design and the communication stronger. Everything on the page has to earn its way on to the page, or not be there.
How did you come up with your network’s header/what kind of thinking went into it?
The header for The Veloist is very simple now. It wasn’t at first. It’s gone through many changes from taking up way too much real estate, to photos, to flash photos. It now does the job it’s meant to do and no more. The header identifies the social network and doesn’t interfere with the content on the page. The navigation is simple and clear, that’s what people need. Making it difficult to find things is a big mistake. Again, keep it simple. Good design leads to good communication.
Is there any advanced CSS that you’ve put to great use on The Veloist?
One simple thing we did with the CSS was to set our navigation background to transparent and position it so that it overlaid our header background graphic. This allowed us to add some dimension and depth to the page. For us, it made the network feel a bit less blocky.
We then applied some hover effects by adding a white border around the active or highlighted links to enhance the user interface. Most of the other advanced CSS we used on the site are color or size tweaks to various elements to help accentuate the overall design.
Thank you, Cleatus!
No related posts.