Ask any social marketing consultant what the number-one no-no is on Facebook, and he'll likely tell you it's "broadcasting" your messages instead of providing fans with relevant content and engaging on an continual basis.
Social media is powering the world in ways many have never imagined. We can see new connections being formed out of seemingly thin air. With more profile integration than ever before, it’s important to understand how to manage your digital personality.
Branding isn’t just for corporations. It can also apply to an individual item or person. It feels great to build a collection of yourself online. Using tools like Twitter, Facebook, and Google it’s easy to develop an interpretation of yourself. This will come in handy when you’re out meeting new people and showcasing your talent to the world.
I’ll be going over some guidelines related to building the core of your social media presence. There are so many applications out there to choose from and it’s a very exciting process to watch your profile pages mature over time.
There are tons of website on the Internet, and hundreds or probably thousands are created by day. Here’s a very interesting thing to ponder – What are the elements of a good website?
Image Credit: tveskov
Building a website can be daunting but the real challenge lies in making it usable. The problem is most web designers forget that the website wasn’t created for themselves but to solve the users’ needs. They give creativity priority over practicality and usability.
In this article, we would like to highlight 11 web design blunders that web developers and designers make and some suggestions how these mistakes can be easily avoided.
Simplicity rules! It makes a websites look sleek, reduce nagivation confusion and it helps achieving desired goals and results (I.e., more signups, subscribers and sales). But too often it seems elusive to simplify your website design. No matter how hard you try, you can’t make your work look like Apple’s. So what does a website designer really needs to do? Fret not, for there are 5 starting points to simplify your website design.
A simple website design shouldn’t be a daunting all-or-nothing ordeal – you can simplify your design by taking small steps. Simple tasks like putting the focus only on the essential elements of your website, getting rid of the unnecessary, reducing the number of pages your site has, getting more content above the fold, and limiting the number of colors you use. You can always fine-tune and improve your simple design, but the important thing here is to get started. Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design.
1. Focus Only On Essential Elements
This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.
Use the 80-20 rule
What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.
This isn’t a technical step but a principle that you can use as your guide to simplify your website design constantly. The 80-20 rule will help simplify your website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.
As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.
Chris Pearson, creator of the popular Thesis WordPress theme framework, says this is exactly what helped increase sales on his website.
2. Get Rid of All Unnecessary Elements
We’re continuing with the 80-20 rule here.
Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).
3. Reduce the Number of Pages
A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate “about the site” and “about me” pages.
Firstly, get in the mindset of the visitor – if you were to arrive on your website, what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.
We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.
4. Get More Content Above the Fold
Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.
This involves nothing more than changing the header’s “height” value in your stylesheet (typically
stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).
5. Limit Your Color Scheme
It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.
I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.
Having trouble choosing a color to start with? Before & After magazine has a useful free e-book on how to find the perfect color here. Need help with picking a color scheme? Try out this handy color scheme generator.
Last, but not least
Hopefully you’re now armed and ready to start simplifying your website design. You’ll be more proud showing off your website because it’ll look gosh-darned sexy and lastly, your visitors will have a much more enjoyable experience browsing in your website.
To recap, here are the 5 starting points to simplify your website design:
- Put the focus only on the essential elements
- Get rid of all unnecessary elements
- Reduce the number of pages
- Get more content above the fold
- Limit your color palette
- 11 common web design mistakes. Things like avoiding complicated forms, unorganized content, bad readability, and a not-easily-located search bar – all will further help you to simplify your website design and make it a joy for visitors and a higher conversion rate for you.
- Clean, simple and minimalist website designs. All of those website examples just further prove that a simple design not only looks sweet and impresses members of the opposite sex, but it greatly helps with the user experience
Over to you: what are your favorite website design simplifying tips? Have you seen an increase in your desired results from simplifying your design?
Related articles across the web
Minimalism has been a popular website design style for years. It has so many benefits; minimalist sites load faster, take fewer server resources, and are often faster to develop than more graphically complicated designs. Plus, they give a professional, clean impression to visitors.
Many people still view minimalist designs as boring. But there’s a real art to effective minimal website designs, something not all designers can effectively master. When you limit the number of graphic elements you use and put the focus on negative space and typography, a good eye for spacing and proportion becomes crucial.
Below are more than 100 excellent examples of clean, simple and minimalist website designs. They run the gamut from simple brochure-style sites to e-commerce sites and portfolio pages. What they all have in common is a design aesthetic where less is more.
A white background with red accents.
Dark gray background with white and gray lettering.
White background with gray and red lettering.
A minimalist grid design.
A dark gray, white and sky blue grid-based design.
An entirely black and white design.
A minimalist magazine-style site.
A mostly black and white site with colored accents.
A gray and maroon design.
A mostly black, white and gray design.
A single column portfolio site.
A simple black and white design with an emphasis on typography.
Another simple black and white design with orange accents and great typography.
Gray and White with mustard-yellow accents.
A simple dove gray and white design with red accents.
Black background with gray and white text.
A simple design with a lot of white space.
A simple design that makes good use of drop shadows and red accents.
Uses a soft color palette and slightly oversized text.
A soft gray, white and dark blue design.
A dark background with soft gray and blue typography.
A black and white design with strong typographical elements.
A simple design with retro elements.
Another simple design with blue accents and an emphasis on typography.
Another black and white design with gray and red accents.
A grid-based design with excellent typography.
A soft color palette and a two-column design with lots of white space.
A black and white grid-based design.
Uses a textured background and some hand-drawn elements.
A mostly black and white design with oversized typography.
A dark gray and white, single column design.
A rarely-seen minimalist grunge design.
A narrow, single-column design with a lot of white space.
A simple design with a textured header and a focus on typography.
A grid-based design with blue, gray and black text.
A design composed entirely of shades of bluish-gray.
Hand-drawn elements in black and white with blue accents set this design apart.
A subtle color scheme and textures with black and gray typography.
Makes use of colored and geometric accents while still retaining plenty of white space and a simple design.
A black and white design with an emphasis on typography.
A subtle dark gray and white design with small, multi-colored accents.
A dark design with subtle gradients in the typography and blue accents.
A black and gray design with a focus on typography.
A multi-colored minimal design with colorful accents and lots of white space.
A black, white, and gray design that places emphasis on the images it displays and uses a grid-based design.
A magazine/grid-style design with orange accents.
A blue and gray design with an emphasis on typography.
A black, white and gray design that places the emphasis on the portfolio pieces.
A black and white grid-based portfolio site.
A grid-based design in shades of gray.
A cream-colored background and black typography keep things simple.
A grid-based design with a portfolio slideshow in the header.
A dark background with subtly-colored typography.
A gray site with bright red accents.
A dark background with white typography that leaves the emphasis on the images.
A black, gray and white grid-based design.
A black, white and gray design with some dark blue typography.
A grayish-brown background and a grid-based design.
A dark background with an emphasis on typography and tomato-red accents.
A subtly-patterned dark-gray background with bold white and gray typography.
A dark gray, slightly-grungy design.
A dark background with gray and white typography.
A dark background with lighter typography.
A dark, textured background with hand-drawn elements and a bit of a retro vibe.
A bold, black and white grid design.
A grid-based design with a subtle color palette and typography.
A subtle blue, gray and white design with plenty of negative space.
A white and gray design with the emphasis on the typography.
A subtle design that focuses on the typography.
A black and white design with red highlights.
A gray background with gray and red text.
A white background with black and red typography and tons of negative space.
A black and white design with subtle textures.
A grid-based deisgn that focuses on typography.
A gray and black design with an emphasis on typography.
A black and white design with light blue accents.
White background and green accents.
A grid-based design with orange accents.
A gray and white grid-based design.
A white and gray two-column design.
A black and white design with oversized typography.
A very simple black and white design with minimalist navigation.
A black, white and gray single-column design.
A gray color scheme with green accents.
A very simple black and white design with hand-drawn elements.
An extremely minimalist design with black text and red accents.
A grid-based design that emphasizes typography.
A minimalist sales page that utilizes modal windows.
A simple design with olive green typography accents.
A white background and subtle gray and pink color scheme.
A brown and tan grid-based design with a white background.
A grid-based design with a white background.
A blue and gray design with plenty of white space.
A gray design with circular images and white text.
Black and gray typography with plenty of white space.
A grid-based site that puts the emphasis on the images it features.
A gray, black and white design with a Flash slideshow in the header.
A grid-based design with a white background.
A simple black and white design.
A grid-based portfolio site.
A grid-based design with a white background and simple typography.
A simple design with a Flash slideshow.
A simple gray and green color scheme on a white background./p>
A very bold green and white design.
A bold gray and white design.
A simple black and white design with an emphasis on imagery.
Related articles across the web
Do you find yourself staring at other designer’s logo and immediately try to decipher what typeface they are using? If you are a designer, it is probably an inevitable habit. There are no hard and fast rules to help you determine which typeface you should land on for your logo. And due to the fact that we are showered with thousands of free fronts on the Internet, deciding on the ideal font to use can be a challenging task.
If you have experimented hundreds of fonts but they just don’t work out right for you, suffering from design block where you don’t what font to use or you are just curious on what fonts others are using for their logo, this article is for you. Today we have analyzed some top brands of their respective industry and reveal the font they used in their logo. They may give you some raw ideas for your next logo design; try not to replicate 🙂
Many top websites are trending towards gray color schemes with bright color splashes. The Zopa logo and overall image is a perfect example of this trend.
Font used: Frankfurter medium
Shutterfly’s modern logo is simple, refined and playful. This image shows that life is too fast to take it too seriously. Their use of bright colors is consistent with the latest website trends and is effective at enhancing their overall image.
Font used: Frutiger
Multi-colored logo fonts are all the rage these days as shown in NewsGator’s logo.
Font used: ITC Bauhaus
Many caution against excessive capitalization in logo fonts. However, Shoutwire’s use of a font in all caps shows that those who caution against this trend can be wrong.
Font used: Agency Bold
This is an ultra-modern design consistent with the styles of current top websites. When your font is paired with playful colors, you are sure to grab the viewer’s attention.
Font used: FF Cocon Bold
Elegant and straight-sided characters on the dark-blue background are easy to recognize: Facebook is the perfect example of minimal, yet most recognizable logo!
Font used: Klavika
Light-blue letters with rounded corners:here you go! Now you can spoof the famous Twitter logo!
Font used: Pico Alphabet
Unlike the above font, this one has no rounded corners at all: everything is sharp and diagonal here giving the perfect feel of the original logo.
Font used: Pico y
A very cheerful font with attention to details in every letter – it makes a perfect fit for the Cork’d logo.
Font used: Triplex
A bold italic font somehow resembles handwriting. It is almost a universal font that can match any interface easily.
Font used: Black Rose
A very elegant narrow characters with rounded borders makes a great fit for the music-related website.
Font used: National
Technorati logo sports a very minimal readable font which might lose identity when taken out of the context.
Font used: Neo Sans Medium
Named after its designer, Adrian Frutiger, the font is used in frequently used in various logos and advertising campaigns. What makes it stand out in Flickr logo is the famous blue/ pink color combination.
Font used: Frutiger
A straight diagonal font on a red background is one of the easiest to spoof.
Font used: Alternate Gothic No. 2
The font has a somewhat calligraphic feel with contrasting stroke weights and distinctive serifs. Play a bit with colors and you have an exact copy of Google logo!
Font used: Catull BQ
This one is the easiest to spoof: they have their own original font you can download and use!
Font used: Yahoo Font
No extra details: smooth lines with rounded corners make up a very elegant font.
Font used: Futura MDd BT
TMZ logo features a very effective use of the Amelia font which makes it one of the most recognizable fonts out there.
Font used: Amelia
Myriad Pro Bold is used in many contexts but has become very popular from the LinkedIn brand.
Font used: Myriad Pro Bold
The smooth lines of this font with characters a bit smashed to each other make a very unique combination.
Font used: Helvetica Rounded Bold
What makes this font recognizable is the effective use of the logo right inside the brand name.
Font used: VAG Rounded Black
Ferrari has a very stylish font: letters seem to match one another so well that you can’t imagine they can exist separately.
Font used: Ferro Rosso
Like Yahoo! logo, this one requires no effort to spoof. Just use its original font designed by Jeroen Klaver.
Font used: Heineken
Swatch sports a very interesting use of the most famous font: its narrow rounded lines imply the Swiss accuracy.
Font used: Swatch it
A narrow diagonal very clear and readable font definitely reminds of a print industry.
Font used: Times New Roman
Related articles across the web
Ever since the announcement of in 2005, the development of the level 3 of Cascading Style Sheet or better known as CSS3 has been closely watched and monitored by many designers and developers. All of us excited to get our hands on the new features of CSS3 – the text shadows, borders with images, opacity, multiple backgrounds, etc, just to name a few.
As of today, not all selectors of CSS3 are fully supported yet. But that doesn’t mean we can’t have some fun testing new CSS3 stuff. This post is dedicated to all designers and developers who are already familiar with CSS 2.1 and want to get your hands dirty on CSS3.0.
It’s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets and more. Feel free to use them in your projects, just make sure it falls gracefully on incompatible browsers.
Getting Started with CSS3
An (roadmap) official introduction to CSS and CSS3. This document gives you an overall idea on the development of CSS3.
Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.
Folks at Six Revision interviewed Eric Meyer with valuable insights and answers on CSS3.
How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.
CSS3: Background and Borders
A guide to creating rounded border with CSS3′s
Rounded borders with image (border-images)
How to use images in borders with
Detail explanation with examples of new CSS3 properties like:
Create simple letterpress effect with CSS3.
Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.
How to correctly add an embossed effect to any text depending on the colors used.
How to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3.
Uses an image sprite and a sprinkle of CSS to get things positioned right.
How to add an outline, or stroke, to your text using the CSS3
Interactive text masking effect using the
text-shadow CSS property.
Change text selection styling with CSS3.
Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column.
How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.
jQuery and CSS3 powered navigation menu that supports integrated forms.
How to create a Apple.com alike multi-level dropdown menu using
Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.
Create nice looking 3D ribbons with only CSS3.
CSS3: Drop shadow
Showcase several techniques and some of the possible appearances for dropping shadows without using images.
How to create intuitive and beautiful tabs in CSS3 with no image.
15 different styles of boxes without using images. Works in Chrome and Safari.
How to create beautiful cross-browser compliant CSS3 buttons that degrade gracefully.
How to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties
Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.
CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.
Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.
How to use CSS3 and MooTools to create dymanic, rotating elements.
CSS3: transparency and overlay
Create image transparency with CSS3.
Practical application of the CSS3 border-image property.
- CSS3 + Mootools. An example of experimentation in mootools. This adds CSS3 properties into core MooTools frame work.
- Exploding Logo with CSS3 and MooTools or jQuery. Take static image and make it an animated, exploding effect on mouse over.
- The Power of HTML 5 & CSS 3. HTML 5 and CSS 3 are quickly gaining popularity, Perishable Press is here to explain how and why.
- CSS3 Polaroid Photo Gallery. How to build a cool looking stack of Polaroid photos with pure CSS styling.
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using. A walktrough on building a blog from ground up with HTML5 and CSS3.
Cheatsheets & References
Printable cheatsheat with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.
Complete list of the supported CSS selectors in Opera 0.5.
Comprehensive list of fonts currently licensed for
A guide and reference to CSS3 selectors and its patterns.
CSS3 rules you can copy and paste onto your own stylesheet.
Get CSS3 styles like boz sizing, border radious, text shadow, and more within a click.
Complete list of selector tables of both CSS and CSS3 with declaration for browser-compatibility check.