Archive for the ‘Website Design’ Category
Best Website, UX and Mobile Design Guides and Tips of 2011
Wednesday, March 28th, 2012Inspired web designers continue to push the envelope on what’s possible in online presentation, utilizing HTML5 and design elements and techniques like parallax scrolling effects, imaginative icons and unusual typography to stand out from the ordinary and grab visitors’ attention. Any website element can be creatively designed and optimized, from navigation menus and forms to landing pages and 404 error pages.
Web design isn’t only about creating a visually striking site of course; designers also need to keep in mind factors like site load speed, user experience and search optimization. And with the rapid increase in use of mobile device browsing, sites have to be readily adaptable to different screen sizes.
So how does a web designer create a site that’s visually stunning and fast and user-friendly and effective at driving conversions and search-optimized and mobile-friendly? It’s a lot to keep with, but these 33 remarkable web design guides should help.
Creative and Inspiring Graphic Design
35 Inspiring Examples of Websites Using HTML5 by Web Design Ledger
Gisele Muller presents “35 new examples of websites that are also using some new tricks from HTML5,” including Wantlist, Vision18, Visua Design and Andrew Shanley.
40 Beautiful and Inspiring Examples of Slideshows in Web Design by Tripwire Magazine
Noting that “There are many reasons to use a slideshow or image slider in your web designs as the key to smart strategic Web design is finding a smartest and interactive way to display your information to your visitors,” Dustin Betonio showcases a collection of “highly creative, beautiful and inspirational slideshows for your inspiration,” like winestore, Crush + Lovely and Fox Classics.
35 must see examples of websites using HTML5 by Web and Designers
A collection of nearly three dozen examples of remarkable website design using HTML5, including sites like Chico web design, Dribbble, John Kavanagh and Griottes.
8 ground-breaking websites by iMedia Connection
Jennifer Marlo shares eight critiques of brand websites from industry thought-leaders who share what they find unusual or effective about each site as well as what they’d change. For example, Thomas Mueller of Siegel+Gale writes of the Nike Better World site, “Beautiful fades and elegant transitions transform what could have otherwise been a straightforward linear experience into a layered visual exploration that links to Nike’s comprehensive digital footprint.”
30 Awesome Social Icon Packs by Webdesignersblog
A big collection of creative icon packs, from teacups, cupcakes and peeling stickers to clover, cartoons and cans. Icons don’t have to be boring!
Your Website is Killing Me by Social Media Explorer
In this wonderfully revealing rant, Heather Rast explicates why many business websites fail, and what they could do to improve, e.g., “Your web team consists of the super sophisticated, MacBook-toting college-age kid of one of the vice presidents. (as if a Dreamweaver course covered usability standards)…Your site uses internal language and writes from internal hot buttons to communicate with external audiences. Think mission statements, vision statements, core values…Awards and certifications abound. From 2008.”
Hot Web Design Trends: Parallax Scrolling Effects in 100 Examples by Splashnology
What’s this post about? “Parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. Initially it was used for creating an illusion of depth in a 2D video games and adding to the immersion, but now, with the help of well defined imagery, JQuery and CSS3, it can be useful in making your site look more vivid and creative. To your attention we’ve complied a great collection of 100 example of parallax scrolling effect.” These are cool.
20 Mind-Boggling Parallax Website Design And How To Make One by 1st Web Designer
Jamal Jackson defines parallax design as “the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites,” then highlights examples of sites like Living Word, Dezignus and Art of Flight (which is truly extraordinary–take a look).
Navigation Menu Design
25 Beautiful & Inspiring Navigation Menus by Web Design Ledger
Gisele Muller (again) rounds up “25 examples of beautiful and inspiring navigation menus” featuring likes like Unfold, Shout, Sellected Studio and Don’t Throw Batteries.
28 Stylish Examples of Drop-Down Navigation Menus in Web Design by DesignModo
Elegant and creative drop-down menus incorporating transparency, icons, shading, highlighting, color, shapes and other effects to stand out from the ordinary.
20 Inspiring Navigation Menus by Web Design Ledger
20 more examples of creative navigation menu design, using typography, color, transparency, parallax scrolling and other effects, including sites like Timberland, Citroen and divups.
Typography in Web Design
Beyond Times and Arial – The New Web Safe Fonts by Google Webmaster Central Blog
David Wurtz explains how Google Web Fonts work, provides some examples, and notes that “The adoption of the web font technology has been rapid. Google Web Fonts now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2], and is growing at about 30% each month.”
50 Excellent Free Handwritten Fonts by Designer Terminal
Taimur Asghar presents 50 (mostly) free handwriting-type fonts for designers. The “slide over” ads on this page get a tad annoying, but the fonts are beautiful and worth checking just for the lyrical names, like Niakania, CrimsonVermillion, Throw My Hands Up in the Air and Annie Use Your Telescope.
Imaginative 404 Error Pages
33 More Entertaining 404 Error Pages by Mashable
Erica Swallow features more creative, funny, odd and quirky 404 error pages from sites like Audiko, Blizzard Entertainment (blames the user–but very creatively) and iContact, which turns things upside down—literally.
35 Creative 404 Error Pages by Web Design Ledger
Gisele Muller (yet again) shares examples of unusual but nice 404 error pages that show consideration for users, including pages from Carol Rivello, duoh and Frye / Wiles.
Optimizing Error Pages: Creating Opportunities Out Of Mistakes by Smashing Magazine
Daniel Waisberg reviews “techniques that will help Web designers and UI professionals improve their error pages in order to engage visitors and improve the experience,” including smart things to include on a 404 error page (company name/logo, explanation of why this page is appearing, easy navigation back to popular pages on the site), how to monitor 404 page visits and navigation, and tips for minimizing 404 errors.
Landing Page Design
Why Your Form Buttons Should Never Say Submit by UX Movement
Excellent advice, concisely presented: “A ‘Submit’ button describes what the system does well, but it doesn’t describe what the user does at all…The action button should affirm what that task is, so that users know exactly what happens when they click that button (e.g., ‘Create Account,” “Subscribe Now’)…The more focused your form is, the more likely you’ll get users to complete your form.”
5 Ideas For Boosting Your Landing Page Conversion Rates by Business2Community
Kristina Allen offers a handful of helpful suggestions for improving landing page performance, such as trying a unique design format, building trust, and testing early and often.
25 Excellent Examples of Forms in Web Design by Web Design Ledger
Online forms don’t have to be boring, as shown in these remarkable examples from Foundation Six, Vincent Mazza and Justalab among others. A creatively designed form may increase your conversion rates—or at least get your form mentioned in a blog post on web design.
5 Common Landing Page Mistakes by HubSpot Blog
Andrew Pitre offers tips for improving landing page performance, such as #2, “Use Your Headline to Explain the Value of Your Offer – What’s in it for Me?…The best way to achieve this is to have a clear title. Specifically, you’ll want to make sure your title contains:
- • A clear action (e.g. “Download our Guide”)
- • A clear description of your offer (e.g. “Download our Guide to Effective Landing Pages”)
- • An explanation of the value of your offer (e.g. “Download our Guide to Effective Landing Pages and Learn How to Increase Conversions by over 10%”)”
22 Creative Landing Page Designs – A Showcase, Critique, and Optimization Discussion by Unbounce
In this richly-illustrated and incredibly detailed post, Oli Gardner examines almost two dozen landing pages from small to midsize businesses and critiques each one detailing what he likes about it (e.g., “Testimonials: Testimonials and association with famous people/shows are included for instant credibility”) and what he’d change or test.
50 Effective and Creative Call to Action Buttons by Noupe
Aquil Akhter showcases sites that go way beyond boring gray “submit” buttons to get visitors to click, utilizing unusual shapes, colors, size, placement, effects, arrows, icons and descriptive calls to action.
The 10 most common Landing Page Optimization mistakes by Web SEO Analytics
Vasilis Vryniotis details ten common landing page mistakes, from having an unclear call to action or too much text to requesting too much information and not testing different landing page variations.
6 Essential PPC Landing Page Optimizations by The Daily SEO Blog
A half-dozen tips for increasing landing page conversions, from pre-positioning the cursor in the first field to be filled out and using eye-tracking data to integrating testimonials and driving to a single call to action.
User Experience and Technical Design
30 Ways to Optimise Your Site for Speed by SEOptimise
Noting that, in addition to the fact that slow-loading websites are annoying for user, “in 2010 Google decided to take site speed into account as a direct ranking factor”—thus making it all that much more critical—Tad Chef offers 30 tips for speeding up your site, from using smaller images and external scripts to switching to a faster web hosting service and limiting the use of third-party widgets on your blog or website.
5 Little-Known Web Files That Can Enhance Your Website by Six Revisions
Alexander Dawson details five files that can improve your website UX, including Geo.kml (and Geo.rdf) for geolocation information, Humans.txt for attribution, and vCard.vcf, a digital business card (another effective option here is a portable Workface profile.
How To Fix The Top Tech Issues I Regularly See In SEO by MediaPost Search Insider
The prolific Janet Driscoll Miller offers tips on several common technical design issues that can impact SEO and how to correct them, for example: “avoid using Javascript on key areas of your website, such as the navigation. Links contained within Javascript are also not indexable, providing a roadblock of sorts for the bots to index your site. If you’re looking for impressive menus, instead focus on using cascading style sheets (CSS) to achieve a similar effect.” She also provides tips for speeding the load time of WordPress sites.
8 reasons why someone leave your website – An infographic by The Web Citizen
Ilias Chelidonis shares an infographic detailing the top reasons visitors bounce from, or at least don’t stick around long, on websites including bad navigation, obtrusive ads or video, boring content/design, and poor readability.
25 Must-Haves for a Remarkable Website by HubSpot Blog
Jessica Meher presents 25 “key elements for driving more traffic, leads, and sales,” like optimizing page content and title tags for search, using relevant imagery, writing copy that is clear rather than clever, and using calls-to-action that stand out.
Mobile Website Design
How to design and develop for mobile sites by iMedia Connection
Mark Simpson supplies five tips for effective mobile site design, such as asking questions to determine what site content you have that is really relevant in the mobile environment: “Sites like Foursquare and Mashable have done a good job of making their sites accessible in the mobile world. What patterns do you notice? What website components have smart marketers left off their mobile sites? What features make the apps and sites more user-friendly?”
How Does Your Website Look on Different Mobile Phones? by Digital Inspiration
***** 5 STARS
Acknowledging that it is much more challenging to test a website on every permutation of mobile device than on the far more limited number of popular desktop browsers, Amit Agarwal reviews Opera Mobile Emulator and Mobilizer, two tools that enable to designers to see how their sites will look on a wide range of mobile devices.
24 Excellent Examples of Responsive Web Design by Web Design Ledger
Two dozen examples of sites that use dynamic web design–web architecture that enables a single design to automatically adapt to a wide range of devices and screen sizes–such as Fork, Atlason and food sense.
What Elements Should You Eliminate When Building a Mobile Website? by The Daily Egg
Six design experts offer their advice on the difficult question of what website elements to eliminate in mobile design, such as this from Andrew Pautler: “I think the better question than ‘what should we cut’ to think about is ‘what should we keep.’ The answer to that question should almost always be the content. People come to your site for the content, so that’s what you should give them. The excessive navigation, oversized banner ads, 15 Facebook links on a single page, etc. are usually the things worth cutting when reducing your site to 320px..That said, mobile doesn’t and shouldn’t mean ‘watered down’…Creating a ‘mobile’ version of your site with limited content is not what the user wants. You can re-prioritize the content, but you shouldn’t hide or remove important content from the mobile version.”
The 4 Critical Elements of an Effective Business Website
Tuesday, October 25th, 2011The first step in optimizing your online presence is making sure you have a website worth optimizing. That means creating a site that your target visitors will be glad they found once they arrive, and will spend some time with because the site provides the information they need in an easy-to-find manner.
It’s like planning a large event or party in your home. If you had a noisy furnace, an unfinished bathroom, or paint peeling on your eaves, you’d want to take care of those issues before you send out invitations. Your website similarly has to be in great shape before you “invite” visitors to it through optimization.
Four key elements of designing an effective business website are:
- • Technology (Platform)
- • Graphic Design
- • Information Architecture
- • Content
Technology
The first decision is the technology, or platform, the site will be built on. The options are almost endless, from custom code, to a development environment such as Adobe DreamWeaver, to hosted content management systems (CMS) options, to free platforms like WordPress. Among the key considerations to keep in mind when selecting a platform are:
Capabilities—will the platform support the sophistication of your design? Do you need extra features, like a built-in CRM system, the ability to easily integrate with external systems, create secure areas of the site, or manage ecommerce transactions?
Usability—does the platform make it easy for non-technical users to add or update content? Is it easy to add new pages and even entire new sections to the site?
Search engine friendliness—does the platform or tool produce clean, W3C-vaild underlying code? Is it easy to add meta tags and customize page URLs? Most modern CMS systems are relatively search-friendly, but this is a critical component for optimization, so do some investigation to make sure the platform you select is strong in this area. One way to check is to run the URLs of some other sites built on the tool through a tool like Website Grader to see how well they score (though keep in mind that factors other than just code quality can affect these scores).
Scalability—will the platform chosen support the planned size and complexity of your website, as well as providing room for growth?
Mobility—though website visits from smart phones and tablets currently accounts for only seven percent of online traffic worldwide, that figure is expected to grow rapidly. Make sure your chosen platform can serve up an optimized experience on both desktop and mobile devices (and automatically detect the visitor’s device) without a separate mobile development effort.
Make this decision carefully as you will be essentially “stuck” with your chosen platform until you reach a point where you need to redesign your site—depending on your industry and growth rate, generally two to five years. Avoid obscure platforms that force you to rely on a single consultant or agency for support.
Graphic Design
Effects Like Transparency and Typography Can Enhance Website Design
Though design considerations are often subjective, two key questions to ask when developing the overall look and feel of your website (fonts, colors, images and other design elements) are:
- • Does the design reflect the “personality” of our brand (e.g. bold, conservative, leading-edge, safe, sophisticated, intelligent, friendly)?
- • Will the design appeal to our target audience?
Special effects such as texture, transparency, typography and motion can enhance a design and provide a distinctive look—but these should be used carefully to enhance the user experience, not simply to “dress up” the site in ways that don’t help the user, or worse, that make the site seem complex and confusing.
Information Architecture
Possibly the most critical element of website design, this is the “map” of your site: what information will be included, where, and how different areas of information be connected. And the single most important consideration in developing your information architecture is your audiences: your website shouldn’t be about what information you want to provide, but rather about what information your key audiences want and need in order to engage with you.
The primary audience for most business websites is sales prospects. To determine their needs, first identify them as precisely as possible by title, role, industry and other attributes. Then put yourself in their shoes: why are they looking for information? What are their burning issues? What information do they need when they come to your site—at different stages in their buying process? How can you help move them through that process, and convert them into identifiable leads?
Secondary audiences may include existing customers, prospective employment candidates, investors, analysts (industry or financial), partners, and the media. Most of these groups are likely to have some information needs in common with your sales prospects, as well as some unique needs. Make sure your site meets the information needs of these audiences without detracting from the prospective buyer experience.
The output of this stage of the design process is an information architecture map, which may look something like this:
This information architecture map also serves as a guide for scoping out the work required to create the new site; establishing priorities; collecting any required images or website assets; and assigning content to writers.
Content
Content should be developed using two primary guides: the information architecture map (what to write), and keyword research (how to write it). Keyword research helps to identify the specific phrases your prospects most commonly use when searching for your types of products and/or services, as well to determine which terms have the best potential for optimization.
Knowing the keywords and topics, writers should be able to develop content that answers the five key questions every business website needs to address:
- • Who are you?
- • What do you sell?
- • Who do you sell to?
- • Why are you the best?
- • How do I buy from you?
Once you’ve designed and developed a site that uses a search-friendly platform, is designed and written with your key audiences in mind, and answers the questions and potential concerns of your sales prospects , you have a site truly worth optimizing as the core of your web presence.
Review: Six Small Business CMS and Web Marketing Systems
Monday, August 29th, 2011What’s the best web content management system (CMS) for your small business? Should you look at something beyond a CMS—a web marketing system (WMS), that provides additional functions like customer relationship management (CRM) and email? There’s no shortage of options, and the decision is an important one: you’ll be “married” to the platform you choose for as long as your current site is up.
Content management systems are valuable tools for small businesses that 1) don’t want to make a big investment in IT infrastructure, 2) don’t have web development (HTML, CSS etc.) expertise on staff, and 3) want to be able to maintain their own web content (adding new pages, text and images) over time, without needing to learn web coding skills.
“Free” CMS options such as WordPress, Joomla and Drupal have an obvious appeal (price) to small businesses, but none are cost-free. All require some level of technical expertise, and Joomla and Drupal particularly have steep learning curves. Low-cost, fee-based tools are generally more user-friendly, provide more features, and most importantly come bundled with support. For businesses looking beyond “free” tools, here are six CMS and WMS options that can help you get more sales and marketing productivity out of your website, while being easy on your web content contributors.
Keep in mind that all of these tools impose some design limitations; if you need a truly custom look and feel like these sites, your only option is to hire a professional web design and development firm. But if you can live within a template (and most of these tools do offer a respectable array of options), you can save thousands of dollars on design and coding costs.
CMS Only
These platforms offer website building and content management tools with hosting, but no “extras.” If you are just looking to get a site up on the web and already have systems in place for CRM and marketing automation, these tools are worthy of consideration.
Pricing: $150-$600 per year ($12-$50 per month)
Squarespace is a generally well-regarded tool with reasonable design functionality for building natively search-optimized websites and blogs. It offers a solid set of features including site search, multiple permission levels for different types of contributors, a form-builder, and built-in analytics. The learning curve is far less daunting than most free CMS alternatives, and a strength of the tool is its mobile support. For anyone looking for an inexpensive, easy-to-use, basic website building and management tool, Squarespace is definitely worth consideration.
UPDATE: After closer examination, SquareSpace is not worthy of consideration, due to weaknesses in search engine optimization, specifically:
- • Custom meta title tags for high-level pages are limited to 50 characters (even the most conservative SEOs recommend 65 characters for the title tag).
- • Meta title tags inside a section (e.g., “blog”) will always begin with the section name. You can customize the section name, but you can’t override the fact the all-important first few characters of every page title in that section will contain it.
- • You can’t create custom meta description tags (!) which are essential in “selling the click.”
- • The people behind SquareSpace seem to lack understanding of how SEO works. True, manipulative tactics don’t work, but solid, white hat SEO is essential to getting a website ranked highly. Their information is both inaccurate and offensive to legitimate SEO professionals.
$240-$1200/year ($20-$100 per month)
Like the other tools listed here, LightCMS is low-cost, easy to use, search-optimized and provides tools like a forms builder. What sets it apart is better design flexibility than most of the alternatives, calendar tools and built-in ecommerce functionality. For developers and agencies, LightCMS also offers one of the most attractive partner programs. Considering all of its features, LightCMS is another shortlist-worthy tool for basic website creation, particularly for smaller B2C companies who want an easy-to-manage online store.
$300 per year ($25 per month)
Another website building option that includes extras like ecommerce functionality with credit card processing, and nightly backups. The site is a bit cheesy, but the functionality of the tool is solid. Solution Toolbox provides their own comparison of their system to Squarespace and LightCMS, but take it with a grain of salt; it’s biased in their favor of course and some of the specifics are out of date (for example, Squarespace now includes a forms-builder). Still, for smaller consumer marketers who want to run an online store in addition to their basic website, this is worth a look.
Web Marketing Platforms
These suites combine CMS functionality with additional web marketing applications to provide more than just a website, but a complete online marketing software system.
$480 per year ($40 per month)
Business Catalyst combines the features of the products above—a CMS, forms builder, and ecommerce tools—with email marketing functionality and a basic CRM system. It provides respectable design flexibility and support for mobile devices. Though the product had issues in its original incarnation, Adobe has fixed many of these issues since acquiring it in late 2009 and continues to invest in product development. The catch? Business Catalyst isn’t sold directly to users, only through web developers and agencies (though there are ways around this).
$2,400/year ($200 per month)
Genoo is a solid, easy to use tool, very strong on email marketing / marketing automation. It offers some of the best built-in SEO tools of any of these packages. Genoo doesn’t provide native CRM functionality, but does have a pre-built integration to Salesforce.com. This is ideal for midsized companies with at least moderately sophisticated internal marketing resources who are already using a separate CRM system and are ready to graduate from hosted email marketing services. Genoo’s offering includes training on how to use its lead-nurturing capabilities.
$1,800/year ($150 per month)
This is a complete web marketing package for smaller, non-ecommerce businesses. It provides a robust CMS for a website and blog along with native CRM, email marketing, and forms-building tools, as well as comprehensive strategy guidance for making all of the pieces work together. The ePROneur package uniquely combines hosting, software, services and strategy to help companies with limited resources effectively generate leads and revenue online. The web marketing resources section of the company’s website also offers a wealth of free strategic and tactical web marketing information.
Any of the alternatives above can help small to midsize companies cost-effectively build and manage their web presence with no IT infrastructure and limited technical expertise. The key from there is to choose a platform whose strengths match up with your business type and needs. And also to investigate multiple options to determine which tool, and company, you are most comfortable working with.
FTC Disclosure: Webbiquity has no affiliate relationships with any of the vendors in this review.
5 Questions Every Business Website Must Answer
Monday, August 8th, 2011Twitter, YouTube videos, text messaging…there’s no question attention spans are short. Everyone is busy, asked constantly to “do more with less,” including most critically their time. To connect with buyers in this environment, your business website needs to provide them with the information they need—quickly and concisely.
By the time a buyer reaches your site, he or she has likely done the basic research. The problem is defined, the solution set narrowed, and now it’s time to choose between competing vendors. In order to make the short list, and ideally to win the business, your site needs to quickly answer five critical questions.
1. Who are you? Unless your brand is a household name, at least within your industry, this is a critical element. Don’t waste your “About” page company history and trivia—make it “sell” your company. Write about awards, media/analyst recognition, number/importance of customers, length of time in business, the experience of your founders, funding, growth and financial performance, and/or any other information that conveys the message: we are the “safe” choice to buy from in this industry.
2. What do you sell? While that is obvious to you, it isn’t to prospects unfamiliar with your company. Use keyword research tools to make sure you are using terms your prospective buyers use, and make it clear and concise. Do you sell a point solution or something that’s part of a broader product suite? Products only or also associated services? For example, suppose you sell web content management software. That could mean a free or low-cost content management system, enterprise content management software, or a web marketing system that includes CRM and email capabilities as well as a CMS.
3. Who do you sell to? No company, especially a small business, can be everything to everyone. Make it clear who your target customers are; this will help weed out prospects who aren’t really qualified and enable you to tightly focus your web copy on your best potential buyers. Do you sell to consumers or to other businesses? To what specific demographic? To big companies or small? In a particular industry or set of industry segments? Make it clear to your site visitors if they are “in the right place.”
4. Why are you the best choice? This is where you differentiate yourself from the pack. Be as direct and factual as possible about your differentiators: service, price, features, capabilities, technology, experience, focus, expertise, acknowledgments, TCO, ROI…tell your prospects what makes your product or service uniquely suited to their needs.
5. How do I buy from you? If a qualified buyer has landed on your site and you’ve done a good job answering questions 1-4 above, this is the critical final question. What do you want the person to do next? Can they buy directly from your site or is it a more complex, high-value purchase that requires a sales cycle? If the former, give them a clear and simple path to the purchase. If the latter, you may need to provide more than one option—but don’t offer too many choices, which may overwhelm the prospect. Possibilities include downloading a white paper or report, signing up for a newsletter, contacting you for more information, following you on Twitter or Facebook, signing up for a free trial, viewing an online demo, or registering for a webinar. Different options likely make sense on different pages. Keep it simple and clear. Test different calls to action.
Much of this may seem obvious, but many business websites still either overload visitors with too much content or make key information hard to find. Differentiate your organization from competitors make it an effective sales tool by concisely answering these key questions for your prospective customers.
Best Website Design Guides and Tips of 2010
Thursday, March 3rd, 2011Website design standards continue to evolve and grow more sophisticated. Tables are out; CSS is in. Flash is out (or should at least be used sparingly): HTML5 is (almost) in. Screen sizes now range from small smartphone screens to large, widescreen desktop monitors.
Beyond the technology, website designs are becoming more visually rich, with increasing use of animation, lush photography and beyond-the-ordinary typefaces. What website design trends should graphic artists take note of? How can you add life to a standard signup form? How can you utilize texture, transparency, and even Twitter to spice up website design? How do you know when it’s time to redesign your website? What strategic considerations should guide user experience design?
Discover the answers to these questions along with a heavy dose of artistic inspiration here in 27 of the best website design guides, tips and insights of the past year.
Visual Website Design
33 Beautiful Social Media Icon Sets For Designers And Bloggers by WebDesignBooth
Why settle for plain social media icons on your website or blog when you can add personality with these sets, featuring social media icons in woodgrain, blue jelly, hand-drawn doodle, origami, chrome, grunge, crumpled paper and other outside-the-box styles.
20 Resources for Displaying Twitter Updates by Mashable
Jacob Gube presents 15 examples of creative and unique ways that organizations have integrated Twitter feeds on their websites, plus five resources to help display a Tweet feed on any site.
Get Inspired: Beautiful Examples of Textures in Web Design by 1stwebdesigner
Ari Suardiyanti shares five types of texture usage in web design in this lavishly illustrated collection of examples.
39 Brilliantly Designed Login and Sign Up Web Forms by CreativeFan
As with 404 error pages, sign-up forms don’t have to be plain and boring. Eric Shafer here compiles a remarkable collection of playful, epic and otherwise visually interesting sign-up and login forms from around the web.
60 Beautiful Corporate Website Designs for Your Inspiration by Oneextrapixel
Hilde Torbjornsen presents a compilation of visually stunning examples of corporate web design, mostly from very large organizations like Sony and Ford Motor Company. Much of the photography is dazzling. No clipart here.
60 Excellent and Beautiful Flash Websites For Inspiration by Tripwire Magazine
Dustin Betonio exhibits a gallery of remarkable Flash design examples from agencies, brands and elsewhere.
30 Fresh Inspirational Web Designs by CreativeFan
Writing “web design inspiration can help you stay up to date on current trends, as well as seeing how to structure designs, control color palettes, work with usability, and understand the overall design process,” Eric Shafer shares a gallery of beautiful and remarkable website designs.
40 Great Examples Of Transparency In Website Design by SpyreStudios
Jon Phillips notes that “Transparency is one of those things that can really add depth and make a website design pop – when it’s done right,” then provides 40 dazzling examples.
Website design: 12 sites dissected by iMedia Connection
Lisa Wehr uses a dozen examples to explain how visually rich design can be combined with user experience testing to create sites that are both beautiful and effective. Though her focus is on ecommerce sites, many of the principles apply more broadly.
25 Websites Featuring Stunning Typography by Site Sketch 101
Effects like texture, Flash and transparency aren’t the only ways to make a site that’s visually arresting; Nicholas Cardot shows how typography can be employed to produce websites that really pop as well.
23 Logos (With Innovative Ideas) That Make You Say WOW by Smashing Apps
An inspirational collection of impressively executed logos: clever, creative, cunning and cool.
Web Design Strategy
Web Visitors: Make Them Stick 10 Tips by SEO Wizardry
You spend a lot of time, effort and money to attract visitors to your site. In this post, Pete Hollier provides 10 tips to keep those visitors on your site for as long as possible, like living up to expectations (one would hope so!), making the site visually appealing, minimizing page load times and making your site easy to share.
5 ways to improve a website’s “brand voice” by iMedia Connection
Tim Garrigan recommends providing site search capability that gives visitors multiple ways to find content and using labels in your navigation that are clear to visitors (and not based on internal lingo) among other tips for optimizing the user experience on your site.
The Web Strategy Pyramid: A Well-balanced Web Strategy by Six Revisions
Jason Schubring suggests designing a site based on a five-layer pyramid model with content at the base, PPC at the top, and usability, SEO and social media sandwiched between.
5 Things That Websites Need in 2010! by Social Media Dudes
Five ways to separate your site from the millions of others out there, such as CSS—no, not cascading style sheets (they are a standard) but rather by crafting a design that is Clean, Simple and Straight to the point.
7 ways to improve your homepage by iMedia Connection
Robin Stevens recommends communicating a clear value proposition, providing a clearly marked and functional site search capability, and formatting content for the way people use websites (they don’t read, they scan) among other best practices for optimizing your site’s single most important page.
5 Items to Delete From Your Website Today by HubSpot Blog
As websites become more complex, with video, Flash, social media icons and more, Brian Halligan offers a handful of suggestions for what to remove from your site, such as industry jargon and long blocks of text.
5 reasons people hate your website by iMedia Connection
Lisa Wehr (again) advises that if you don’t want visitors to click away from your site screaming, avoid these five sins of web design such as having “a site that looks old, washed up, and like it was designed and launched in 1997″ or appearing “socially inept” through the lack of any mention of your social media presence.
Is It Time For A Website Redesign? by B2C Marketing Insider
Josh Levine list seven questions to ask to determine if it’s time for a complete site redesign; answer “no” to any of these questions (e.g., is your site flexible? Are you utilizing social media?), and it’s a “yes” that it’s time to think about a new website.
Why marketers need open-source CMS solutions by iMedia Connection
Contending that “proprietary, commercial CMS solutions, such as Autonomy’s Interwoven and Microsoft’s CMS, are expensive, difficult to maintain without paid support from their vendors, and limited in terms of their customizability,” John Bosso reviews three popular open source alternatives that give marketers maximal flexibility at minimal cost.
Google Instant Previews Makes Site Design A Priority by MediaPost Online Media Daily
Frequent best-of contributor Laurie Sullivan explains how the Instant Preview feature in Google search works, and why it “could prompt an increase in demand for designers and put more emphasis on colors and page layout…(and) have brands scrambling to redesign Web sites.”
6 reasons to rethink your website by iMedia Connection
Frank O’Brien outlines six ways to develop an awesome website, “an experience that engages your audience,” from incorporating social elements and creating an integrated marketing network (hmm, sounds a bit like web presence optimization), to rewarding your brand advocates.
Mobile Website Design
How to Create a Mobile Version of your Website by 1stwebdesigner
Abhishek Bhardwaj discusses “key aspects & techniques that a web developer/designer must follow to have a clean & professional looking mobile version of any website,” with sections on layout, coding and tools.
8 Tools for Easily Creating a Mobile Version of Your Website by American Express OPEN Forum
Jacob Gube (busy guy) here reviews eight tools for creating mobile websites that are “all aimed at site owners who don’t have any web development/coding experience. They’re perfect solutions for small- and medium-sized businesses because of their cost effectiveness.”
10 Excellent Tools for Testing Your Site on Mobile Devices by Six Revisions
As you work on building a mobile version of your site (see the posts above), you need to test it to assure it displays properly of course. But how do you test for the vast number of different mobile devices and platforms out there? John Pring reviews 10 tools that can help you make sure your site renders properly on the mobile web, without forcing you to buy one of every mobile device on the market.
Custom 404 Error Pages
Weekly Inspiration: 22 Awesome 404 Error Pages – N.13 by Underworld Magazines
As if the funny, bizarre, creative and otherwise unusual 404 error pages covered here weren’t enough, this post features almost two dozen more inspiring and off-the-wall alternatives to the boring, standard 404 error page.
50 Outstanding and Stylish 404 Error Pages by DesignsMag
Sure, custom 404 pages are fun, but they’re practical as well as pointed out in this post: “many designers these days are taking a little extra time and effort to get creative with the 404 page. Doing so helps ease frustration by the user and shows an attention to detail.” The noteworthy examples shown here can help keep visitors on your site when they end up in the wrong place due to a typo, out-of-date link or other error.
