STEP 1:  Create

STEP 2:  ?????

STEP 3:  Profit!


What is Step2?

Floor64's Step2 is a community brainstorming platform for asking about, suggesting, creating, and building models for success, with help from the Insight Community. It's not just about the "business" model, but the overall "success" model. How do you create that connection with the marketplace? How do you offer something worth buying? Step2 is here to help.

If you're trying to figure out how to succeed, provide some details and ask for some insight. If you've got ideas, jump into the existing discussions. Let's all team up to help turn the Step 2 in every plan into something more than just question marks.

Start a discussion >>

Step2+

What websites have really good design?

2 like 0 dislike
We're thinking through a possible redesign on Techdirt, and as an early part of that process, we're looking around at general websites whose design we like... and ones we dislike.

In thinking about, we realized this is actually a bigger question in general, where it could be useful for all sorts of individuals, artists, creators and companies to collect some examples of good design ideas, and so we wanted to ask a general question:

What websites have designs you really like?  Dislike?
initiated May 23, 2012 in Success Stories by Mike Masnick (22,930 points)   59 99 160
   

10 Responses

4 like 0 dislike
One major strength of your current design is that the full text of each post is almost always on the front page, with only embedded documents typically below the fold. Please keep that design feature.
response added May 23, 2012 by Mike Doherty (220 points)   2
@doherty -- what if there was an option on the page to have either 1) the full text of each post or 2) truncated posts (so that more posts could be seen before scrolling)...?
@mhhfive Options like that are fine - until you have to add options for everything. It might be best to make an opinionated choice for your users on some things. I think this should be one of them. But maybe you'll want to do some testing to see what actually works for your readers.
3 like 0 dislike
So the current CMS is getting a bit outdated? Fair enough, time to upgrade is time to upgrade.  There's a ton of really good choices out there, both paid and free.

In terms of 'design', please don't forget that user experience is part and parcel of your design, especially a site with your traffic numbers.  And on the subject of user experience, may I cast a vote for the simplicity of the current commenting system.

1,2,3,click.  Name (if you want), e-mail, message, submit.  Everywhere, one sees: Sign in with Disqus! Sign in with Twitter!, Sign in with Facebook!  ugh.  Talk about friction and, most importantly, a barrier to conversation.  Seems to me you've built your business and community on the opposite.

Continued success.
response added May 23, 2012 by Robin Hoover (200 points)   2
@robinhoover reason for the redesign has nothing to do with the cms (or even the functionality).  We may switch CMS platforms, but I doubt we'd make any significant change to functionality or things like ease of commenting.  I wouldn't worry about that.

Right now we're just trying to think of what makes a good design overall.
@mmasnick Excellent news!  Strictly design/good looking-wise then, please consider:

1.) The footer imho is the best looking aspect of your site. Clean, readable, lots of space.

2.) To get that look to the rest of the site is going to require an overhaul of your CSS, which is outdated.

3.) Doing so will allow you a modern, flexible layout instead of the old fixed 900px.  FWIW and IMHO, the Ruby gem Compass used with the Susy gem is the best gig going to accomplish this.
2 like 0 dislike
A redesign is a brave move. I remember how controversial your last one was. :)

I really like the layout of content on The Next Web (http://thenextweb.com/). It's not too wide and has a large font. MSNBC does a good job on their articles in this way too. Makes reading really easy. The site is sharp looking and pulls you into things.

Really like how Naked Capatilism (http://www.nakedcapitalism.com/) has a short list of recent articles at the top of all their posts. As a casual reader who misses a few days a week, I catch a lot of things I want to read. Stuff on the sidebar slips past me sometimes. They also have a narrow site with a large font. It's not really pretty but I find it makes reading things easy.
response added May 23, 2012 by Aaron Wynn (180 points)   2
2 like 0 dislike
I like a lot of different websites for a lot of different reasons - but I'd like to state what I like about Techdirt's current design:

- Ease of use

- Immediate presentation of latest content

- not filled with a ton of nested DIV tags just for round corners or other funky borders; it's something I'm guilty of using, and I'm moving away from it since CSS3 works just fine moving forward.

- Techdirt's use of the KISS principle.

- A general understanding of the importance of negative/white space

I'm sure HTML5 and CSS3 support is pretty much defacto in the next design - that's the direction where everyone is going. Whatever direction you guys go in, I hope you keep in mind the good points of the current look.
response added Jun 3, 2012 by Nathan Gibson (240 points)   2 2 3
@transbot9  - We'll try our best to maintain the KISS principle around here... thanks for the feedback!
1 like 0 dislike
Firstly a quick +1 to Mike and Robin's points regarding functionality.

Secondly, keep the sign-out button prominent, "provide no unreasonable barriers to exit" as they might say in my business.

Oh, and please no disabled right-click and no captcha bollocks!

Right, so basic functionality aside, I like the full article on the front page, particularly when browsing on a mobile, just one page load gives me 10 stories to read, please don't change that.

I'm really wracking my tiny brain now to try and think of a website design i really like but I'm struggling. Likewise I can't really think of many I actively dislike. Mind you, I do tend to view most stuff on either an java-and-ad-blocked firefox browser so I guess I'm probably not seeing a lot of the intended design anyway.

There doesn't seem to be a great deal of originality in the websites I regularly use, music/band sites are all (fundamentally) pretty similar, as are blogs, as are retail sites, as are new sites.

I guess I have one key question for you, what problem are you trying to solve?
response added May 24, 2012 by drew stephenson (3,370 points)   3 10 22
@blinddrew: "what problem are you trying to solve?"

I think one problem (not the only one) is making the site attractive to both newcomers as well as regular Techdirt readers.... You seem to have adjusted to the way we've displayed posts, but newbies might not have the same first impression.
@mhhfive Michael, true, I really can't remember what i thought about the site when I first started using it I'm afraid
1 like 0 dislike

Currently I have no problem with the current TechDirt layout. I have no expertise in programming but you should consider a fast loading TechDirt, because readers in Africa (like me) where internet connectivity is largely remote - leading to slow connections find it hard to navigate the site.

The site is unique which is okay, but for reference sites, I personally like the  TechCrunch layout. Its easy to navigate.

response added Mar 15, 2013 by Nuwamanya Mategyero (160 points)  
1 like 0 dislike

Appearance

A site must be visually appealing, polished and professional. Remember, it's reflecting your company, your products and your services. Your website may be the first, and only, impression a potential customer receives of your company.

An attractive site is far more likely to generate a positive impression and keep visitors on your site once they arrive. As businesses large and small continue to populate the web, your challenge is to attract and keep users' attention. Ideas like this are what PR professionals pay attention to keep their businesses successful.

Guidelines
  • Good use of color: an appropriate color scheme will contain 2 or 3 primary colors that blend well and create a proper mood or tone for your business. Don't overdo the color, as it can distract from the written content.
     
  • Text that is easily read: The most easily read combination is black text on a white background, but many other color combinations are acceptable if the contrast is within an appropriate range. Use fonts that are easy to read and are found on most of today's computer systems. depending on your audience. Keep font size for paragraph text between 10 and 12 pts.
     
  • Meaningful graphics: Graphics are important, as they lend visual variety and appeal to an otherwise boring page of text. However, don't over-use them, and make sure that add meaning or context to your written content. Don’t overload any one page with more than 3 or 4 images.
     
  • Quality photography: A simple way to increase visual appeal is to use high quality photography. High quality product images are especially important for online retailers.
     
  • Simplicity: Keep it simple and allow for adequate white space. Uncluttered layouts allow viewers to focus on your message. Don't overload your site with overly complex design, animation, or other effects just to impress your viewers.

Content

Along with style, your site must have substance. Remember that your audience is looking for information that will help them make a decision, so it should be informative and relevant. Use this opportunity to increase visitor confidence in your company's knowledge and competence.

Guidelines
  • Short and organized copy: Clearly label topics and break your text up into small paragraphs. Don't bore your visitors with visually overwhelming text. You've got less than 10 seconds to hook your visitors, so grab their attention by being clear, concise and compelling.
  • Update your content regularly: No one likes to read the same thing over and over again. Dead or static content will not bring visitors back to your site!
  • Speak to your visitors: Use the word you as much as possible. Minimize the use of I, we and us.
  • Consider a pro: Unless you’re an especially good writer, consider using a professional to write or edit your text content. A good writing resource is How to Write for the Web.

But What About the Glitz?

Flashy graphics and animation are tempting, and can have a very positive impact on user experience. Just use them appropriately and keep some simple guidelines in mind:

Use multimedia to entertain and enlighten your prospects. An animated banner, snappy video or interactive content will add to your site's "interest quotient" and keep your visitors around longer. BUT -- don't force your visitors to endure something they're not interested in or don't have time for, and don't let the "rich media" overwhelm your other content.

Make it "to go". Provide downloadable podcasts, presentations and forms for users who can't stay long, but want to take some of your information with them.

Don't neglect your HTML content for the sake of glitz. Search Engines don't have ears, and can't read Flash, JavaScript or even PDFs .


Functionality

Every component of your site should work quickly and correctly. Broken or poorly constructed components will only leave your visitors frustrated and disillusioned with your company. Across the spectrum, everything should work as expected, including hyperlinks, contact forms, site search, event registration, and so on.

Error-free copy: Remember the exposure your website will get. Double-check your facts and figures, as you don't know who may be quoting you tomorrow. Nor do you want to be recognized or remembered for typos, incorrect grammar and punctuation, or misspellings. Spelling mistakes and bad grammar are as unforgivable on a website as they are in other company materials.


Usability

A critical, but often overlooked component of a successful website is its degree of usability. Your site must be easy to read, navigate, and understand. Some key usability elements include:

  • Simplicity: The best way to keep visitors glued to your site is through valuable content, good organization and attractive design. Keep your site simple and well organized.
     
  • Fast-loading pages: A page should load in 20 seconds or less via dial-up; at more than that, you'll lose more than half of your potential visitors.
     
  • Minimal scroll: This is particularly important on the first page. Create links from the main page to read more about a particular topic. Even the Search Engines will reward you for this behavior.
     
  • Consistent layout: Site layout is extremely important for usability. Use a consistent layout and repeat certain elements throughout the site.
     
  • Prominent, logical navigation: Place your menu items at the top of your site, or above the fold on either side. Limit your menu items to 10 or fewer. Remember, your visitors are in a hurry -- don't make them hunt for information.
     
  • Descriptive link text: Usability testing shows that long link text makes it much easier for visitors to find their way around a site. Long, descriptive link text is favored by Search Engines, too. Back links are important to give users a sense of direction and to keep them from feeling lost. Use a site map, and breadcrumbs, if necessary.
     
  • Cross-platform/browser compatibility: Different browsers often have different rules for displaying content. At a minimum, you should test your site in the latest versions of Internet Explorer (currently, versions 8 and 9), as well as Firefox and Safari.
     
  • Screen Resolution: Screen resolution for the typical computer monitor continues to increase. Today, the average web surfer uses a resolution of 1024 x 768 pixels. However, you need to make sure that what looks good at this setting will also work nicely for other resolutions.

Search Engine Optimized (SEO)

There are hundreds of rules and guidelines for effective search engine optimization, and this isn't the place to cover them all. For starters, follow these simple rules:

  • Include plenty of written content in HTML format. Don't use Flash, JavaScript or image-only objects for your navigational items.
  • Use your important keywords frequently and appropriately in your copy.
  • Minimize the use of tables and use Cascading Style Sheets for layout and positioning; keep your HTML code clutter-free.
  • Leverage your links -- make them descriptive and use your keywords in the link text

Many, many books have been written about Search Engine Optimization, and its scope is too broad to cover here. You can find more information on this important topic on our Search Engine Optimization page.

We've barely scratched the surface of what makes a website most effectively. However, by following these simple guidelines, you will be headed in the right direction. Visit our section on website design and development for more information, or send us an e-mail. We'd be happy to answer your questions!

 

response added Mar 25, 2013 by Anthony Igweilo (160 points)   1 flag
0 like 0 dislike
Personally, I've always found it easier to focus on things I don't like than things I do.  What I do like is so vague, so hard to pin down, but when I hate something, it's clear, and I know exactly what is bugging me.

Techdirt is great because it has a fresh, non-corporate, non-PR filtered attitude, It seems like a band of like-minded individuals are working together to post on a blog, rather than a company with a mandate to live up to.  I fear that making changes to cater to the audience might take away from that.  If you are going to make a change, make the change because YOU like it.

 

I love the site you have right now, it's fast, clean, clear, no bloat, I come with the intention of reading articles, and I can read articles and nothing gets in my way.  No multi page crap, no ads through the article, just text.

I would imagine that your audience is a tech savvy one.  If my assumption is correct, then dazzle isn't going to impress that demographic.  speed, security, compatability, all the boring stuff is what matters.

 

Personally, I come to the site for the articles and commentary and discussion, not the layout.  Right now, I feel like the site design and layout is transparent - it doesn't get in my way, it doesn't try to impress, get in my face, hide or obfuscate, it just works- Yet something about it is distinctive and lets me know I'm on techdirt and havent navigated to another site.  That's a good combination of traits for a website to have.   

Threaded discussion was a HUGE improvement.  I honestly can't think of anything else that is lacking aide from having the "report" button lead to a "spam", "troll", or "I disagree with this statement and hate free expression", options, making it easier for the guys behid the scenes to know why something was reported.

I guess you can look at Digg and just do the opposite...
response added Jul 9, 2012 by Kyle Clements (2,460 points)   3 9 17
0 like 0 dislike
May I suggest using the full power of html5 in your next endeavor?

 

In any case, the current site seems ok in terms of layout, it's pretty clean and well organized (notice I'm using ad-block because I find the ads pretty annoying generally speaking). I'd go with adding the frames with each part of content to a list and let the user add/remove/move them around at will. Like the latest stories list on your right side? Move it there. Want a Twitter button? Add it from our options. Want to add a custom html code at some part of the site so it displays the weather? Go for it. Just an idea.

 

As for the ads, they need to be smaller and not too colorful. In the same spirit, you could offer special frames with different types of ads for those wishing to support TD including small text ads. Obviously you could have a "default" configuration with most ads enabled.

 

Slightly off-topic but have you ever clicked any ad on the Internet in your life? I have, twice. In 18 years.
response added Jan 23, 2013 by ninja s (1,270 points)   1 4 3
0 like 1 dislike
google.com is the best designed ...... LOL
response added May 25, 2013 by melissa katz (150 points)   1 1 1

Please log in or register to contribute to this discussion.

Related discussions

2 like 0 dislike
1 response
2 like 0 dislike
3 responses
21 like 1 dislike
15 responses
0 like 0 dislike
0 responses

Terms & Conditions · Privacy Policy · FAQ · Contact
Brought to you by Floor64 and the Insight Community.

Step2+
...