The Web Design Guide and Showcase
30.2K views | +2 today
Follow
The Web Design Guide and Showcase
Examples, tutorials, insight and non-technical news about designing effective web pages
Curated by Robin Good
Your new post is loading...
Your new post is loading...
Scooped by Robin Good
Scoop.it!

The Free Web User Interface Toolkit: Flat UI

The Free Web User Interface Toolkit: Flat UI | The Web Design Guide and Showcase | Scoop.it
Robin Good's insight:



Flat UI is a free web kit of basic user interface elements that can be utilized on any web project.


The kit includes professionally designed buttons, menus, input fields, progress bars, social share buttons, tooltips, color swatches, vector icons and glyphs and more.


Clean, elegant designs.


Free to use: http://designmodo.github.com/Flat-UI/


More info here: http://designmodo.com/flat-free/


The free kit will be available for full download starting tomorrow March 6th 2013. Sign-up to get the link via email here: http://designmodo.com/flat-free/



more...
No comment yet.
Scooped by Robin Good
Scoop.it!

A Great Showcase of Popular Website Re-Design Mockups

A Great Showcase of Popular Website Re-Design Mockups | The Web Design Guide and Showcase | Scoop.it
Not every designer gets the chance to work on a high-profile redesign. In fact, the vast majority will never have that chance. At least not officially. But
Robin Good's insight:



Cameron Chapman does a great job of curating a showcase of great re-design mockups to get great inspiration from.


From Adobe to Amazon, YouTube and the NYT here are 25 great, uncommissioned re-designs of great, popular websites.


P.S.: This is not only useful from a design-inspiration viewpoint, but it provides a great example of how you can build a much richer and more interesting portoflio of your work even when nobody is yet knocking at your door.


Recommended. 8/10


Full showcase: http://www.webdesignerdepot.com/2013/02/25-awesome-redesign-concepts/



more...
Philippe Trebaul's curator insight, February 27, 2013 4:32 PM
A Great Showcase of Popular Website Re-Design Mockups.

"Not every designer gets the chance to work on a high-profile redesign. In fact, the vast majority will never have that chance. At least not officially. But"...
A Great Showcase of Popular Website Re-Design Mockups via @RobinGood http://sco.lt/...


Scooped by Robin Good
Scoop.it!

How To Make Your Content More Legible: A Web Typography Guide

How To Make Your Content More Legible:  A Web Typography Guide | The Web Design Guide and Showcase | Scoop.it
This article explains why, when designing for the reading experience, we shouldn't assume anything but learn everything we possibly can in order to establish a solid design concept.
Robin Good's insight:


Marko Dugonjić does an excellent job of explaining why it is very important to make very rational, objective and well-planned decisions when it comes to web typography, as the objective shouldn't be the one of "pleasing" or creating something "nice", but rather one of being accessible and readable for as many people as possible.


The guide covers everything from content strategy, to software and hardware concerns, accessibility, typeface selection, typeface combination, legibility issues and more.


Excellent introduction to typography and font usage on the web. 8/10


Full guide: http://www.smashingmagazine.com/2013/02/18/designing-reading-experience/





more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Wireframing Tools: The Ultimate Visual Information Guide [Infographic]

Wireframing Tools: The Ultimate Visual Information Guide [Infographic] | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you are looking for a web prototyping solution and wondering which other alternatives are available out there, the newsroom team at Usertesting.com has put together a truly great infographic guide, that showcases the best prototyping, wireframing and web site simulation tools.


From the official site: "If you’re into building websites, mobile sites, or apps, you probably use some type of mockup tool—prior to coding—to help you envision how a site will work and look.


But do you get customer feedback on them? In this ultimate guide, we’ll explore leading mockup tools — wireframing, prototyping, and simulating –and show you how to run user tests with them."


Informative. Resourceful. Well designed. 8/10


Full guide infographic: http://www.usertesting.com/blog/2012/10/23/the-ultimate-wireframing-tools-guide/



more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Design Your Web Site Mock-Up With One of These Free WireFraming Tools

Design Your Web Site Mock-Up With One of These Free WireFraming Tools | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you are looking for free tools that can help you draft the design of your web site or application, look no further as this is a good collection providing ten wrireframing alternatives.


Definition of Wireframe:
A wireframe is a visual illustration of one Web page. It is meant to show all of the items that are included on a particular page, without defining the look and feel (or graphic design).


It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.


Source: usability.gov


Full guide: http://speckyboy.com/2010/01/11/10-completely-free-wireframe-and-mockup-applications/



more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Responsive Web Design: Ultimate List of Advantages and Disadvantages.

Responsive Web Design: Ultimate List of Advantages and Disadvantages. | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you are considering adopting a web design responsive solution to make your web site fully compatible with any type of screen and mobile device, you may want to give a good read to this excellent guide by Slavik Volinskion SEOMoz, which highlights all pros and cons of adopting this approach. Both from a design-usability and from a SEO viewpoint.

SEOMoz: "Responsive design is not a one-size-fits-all solution to mobile.


According to the author of the Responsive Web Design book, Ethan Marcotte:

"But most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites. [...] And as a development strategy, it's meant to be evaluated to see if it meets the needs of the project you're working on."


Must-read: 8/10


Full guide: http://www.seomoz.org/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers 


(via Brian Yanish)

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Prototype Web and Mobile User Interfaces Inside Your Favorite Presentation Program with Keynotopia

Robin Good: With the free Keynotopia Mockup Bundle, you can draft, edit and sketch highly-detailed elements of a user interface while using only Apple Keynote (but don't fret. There are libraries and themes also for PowerPoint and other presentation tools).


The Keynotopia Mockup Bundle includes:
-> Over 1,000 vector user interface components designed entirely in Apple Keynote. The following templates are included in the bundle:
->> iPhone Mockup Templates
->> iPad Mockup Templates
->> Android Mockup Templates
->> BlackBerry Mockup Templates
->> Web Application Mockup Templates
->> Facebook Mockup Templates
->> OS X Mockup templates
->> Windows 7 Mockup Templates
->> Windows Phone Mockup Templates


"Keynotopia is the largest collection of user interface design templates that enable you to prototype and test your app ideas in 30 minutes or less using Apple Keynote, Microsoft PowerPoint, or OpenOffice Impress.


The templates include thousands of wireframe and high fidelity vector UI components, meticulously designed from scratch in Keynote, Powerpoint and OpenOffice, and fully editable and customizable without needing additional design tools."


The Keynote Mockup Templates Bundle is available in exchange for a simple tweet (normally they are $49).


Find out more: http://keynotopia.com/keynote-mockups-templates/ 


Templates and Themese Gallery: http://keynotopia.com/themes/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Modal Windows in Web Design: Introduction, Use, Examples and Scripts

Modal Windows in Web Design: Introduction, Use, Examples and Scripts | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you are looking to understand how to create and manage those pop-up content windows that while dimming the stuff in the background, offer you an elegant peek at what you have clicked upon, this guide by Greg Bates will definitely provide you with all of the basic info you need.


What are modal boxes? What's the difference between Modal and Modeless? How can they be used? Where can I find some sample scripts to start using and experimenting with them?


Informative. Resourceful. 8/10


Full guide: http://webdesign.tutsplus.com/articles/modal-and-modeless-boxes-in-web-design/

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

The Disappearing Interface: Colored Content Blocks and Squares Are Next

The Disappearing Interface: Colored Content Blocks and Squares Are Next | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you have not noticed yet, the next design trend is all about “undesign”.


"Undesign, a minimalist, tablet-friendly approach to website design."


It's not, like Dylan Tweney writes on Venturebeat, that design has become less important, but rather that it is receding in the background to leave space for direct access to content.


"Instead of pages crowded with links, buttons, and display type of all different sizes, designers were simplifying their layouts. The smartest designers stripped away the nonessential elements of their designs, leaving clean pages that let the eye focus on whatever images or words had been put there by writers and editors.


Why?


Because if the designers didn’t simplify their web pages, readers were going to use utilities like Readability and Instapaper to do it for them."


...


"One of the first apps to embrace this sort of rectangularity was Flipboard, which launched in mid-2010. It transformed the process of browsing RSS feeds into a magazine-like experience by putting stories into a boxy, more readable layout.


Last year's big fashion trend was the color block, and this year's tech trend follows suit: It's the square. More precisely, it's the big, colorful rectangle filled with a solid color (like Windows 8) or a photograph (like Pinterest)."


Right on the mark. 9/10


Full article: http://venturebeat.com/2012/03/07/dylans-desk-design-goes-minimal-online-and-off/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

60 User Interface Design Tools A Web Designer Must Have

60 User Interface Design Tools A Web Designer Must Have | The Web Design Guide and Showcase | Scoop.it

Robin Good: Sonny M. Day at Tripwire Magazine has put together a very rich and potentially useful collection of User Interface Design tools that a web designer can use to evaluate, prototype, test, and realize his web design objectives.


The collection contains tools and web services to create user interfaces, mockups and prototypes, to receive comments and feedbacks on new drafts, to code more rapidly with snippet libraries and frameworks but for each tool very little information is provided and the collection is not organized in any meaningful way. 


Rich collection. Badly organized and commented. 5/10


Full set: http://www.tripwiremagazine.com/2012/03/user-interface-design-tools.html 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Gesture, Simplicity, Motion, Scale and Discovery: The New Design Guidelines

Gesture, Simplicity, Motion, Scale and Discovery: The New Design Guidelines | The Web Design Guide and Showcase | Scoop.it

Robin Good: An elegant and innovative visual solution, that communicates effectively and with simplicity the new key emerging design factors to pay attention to:

  • Gesture
  • Simplicity
  • Motion
  • Scale
  • Discovery


Must watch. 9/10


Original: http://thenewdesignguidelines.derekevanharms.com 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

The 7 Best WordPress Theme Designs From 2008 To Today | SmashingMagazine

The 7 Best WordPress Theme Designs From 2008 To Today | SmashingMagazine | The Web Design Guide and Showcase | Scoop.it

Robin Good: I think these are times in which we will see lots of changes in how content is published and displayed online. Delivery formats, website builders, templates and other tools to format and make your content accessible in a variety of ways will be soon appearing.


In this light you may want to look at what are some of key emerging trends as well as some of the best designed and most popular WordPress themes from the last four years in this SmashingMagazine curated showcase.


Full showcase: http://wp.smashingmagazine.com/2012/02/08/wordpress-theme-design-and-development-trends-for-2012/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Single-Page Portfolio Websites Design Showcase | DzineBlog.com

Single-Page Portfolio Websites Design Showcase | DzineBlog.com | The Web Design Guide and Showcase | Scoop.it

Robin Good: A great, valuable curated collection of one-page-only portfolio-websites illustrating with real-world examples how effective a site can be while keeping you always glued to the same page. 


Valuable. 8/10


Original collection: http://dzineblog.com/2011/09/42-awesome-single-page-portfolio-websites.html 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

A Wonderful Showcase of Useful Information on How Google Search Works: Curated by Google

A Wonderful Showcase of Useful Information on How Google Search Works: Curated by Google | The Web Design Guide and Showcase | Scoop.it
Robin Good's insight:



A fantastic, rich and elegantly organized showcase of everything you may possibly want to know about how Google Search works. From policies to algorithms, Google curates in this wonderfully designed website, all of his best assets and information to further educate its global audience.


Ever wondered how Google’s search works? The company launched a new website Friday, appropriately called How Search Works, to give you a behind-the-scenes look at the process from start to finish.


“Here you can follow the entire life of a search query, from the web, to crawling and indexing, to algorithmic ranking and serving, to fighting webspam,” Google Product Manager Jake Hubert said in a blog post announcing the page.


“The site complements existing resources, including this blog [Google’s Inside Search blog], the help center, user forums, Webmaster Tools, and in-depth research papers. We hope the site helps to illuminate the split-second journey from algorithms to answers,” he added.


Source: Mashable


Educating, in such fashion, is indeed the best marketing there is.



Must see. 9/10


Full showcase: http://www.google.com/insidesearch/howsearchworks/thestory/




more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Test Alternative Backgrounds On Any Website On The Fly with the SubtlePatterns Bookmarklet

Test Alternative Backgrounds On Any Website On The Fly with the SubtlePatterns Bookmarklet | The Web Design Guide and Showcase | Scoop.it



Robin Good's insight:


SubtlePatterns is a browser bookmarklet which allows you to test on-the-fly a number of alternative (300+), preset background styles, on basically any website you happen to be on.


Useful for testing backgrounds on new designs or for checking how much better a website would look with a different background style.


Free to use.


Try it out now: http://bradjasper.com/subtle-patterns-bookmarklet/#.USZy1Rl8t9_

(Thanks to Ana Cristina Pratas for first discovering this gem)

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Effective Home Page Design Showcase: 15 Examples To Look Up To

Effective Home Page Design Showcase: 15 Examples To Look Up To | The Web Design Guide and Showcase | Scoop.it



Robin Good's insight:



Jessica Meher at Hubspot has put together a really valuable collection of 15 home page designs to look up to. While the selected designs may not represent your ideal taste or style, they all integrate some of the key critical elements for a home page to be successful. Namely:


a. States clearly what the site is about, what problems it offers, who does it talk to


b. Uses visuals, possibly representing the object/focus of our interest or some "humans" that are doing what we are interested into


c. Provides info bursts that detail what the site is about, what it offers and more.


Excellent choices. 8/10


Full guide: http://blog.hubspot.com/blog/tabid/6307/bid/34006/15-Examples-of-Brilliant-Homepage-Design.aspx



more...
LLatipi's curator insight, January 6, 2013 8:18 AM

Great selections!

Florence Foënix's curator insight, January 24, 2013 11:43 AM

On n'a pas de seconde chance de faire une bonne première impression...

D'où l'importance de la page d'accueil pour un site de marque.

Celle-ci doit :

- exprimer clairement, dans le langage de sa cible, l'utilité du site : qui on est, ce que l'on fait, ce que l'on peut faire pour vous, visiteur

- faire rester les visiteurs et les diriger dans le tunnel de conversion : une ergonomie épurée et une navigabilité optimisée grâce à des boutons d'actions

- changer régulièrement soit grâce à de l'A/B testing, soit grâce à des contenus dynamiques

 

Article complet : http://blog.hubspot.com/blog/tabid/6307/bid/34006/15-Examples-of-Brilliant-Homepage-Design.aspx

Scooped by Robin Good
Scoop.it!

Web Design Is About Serving People's Needs: The Art of Web Design | PBS

Robin Good: A great short video from PBS brings together the views and opinions of three great web designers: Jason Santa Maria, Jeffrey Zeldman, Whitney Hess.

From BoingBoing.net: "The explosion of the internet over the past 20 years has led to the development of one of the newest creative mediums: the website.


Web designers have adapted through the technological developments of html, CSS, Flash, and JavaScript, and have mastered the balance between creativity and usability.


Now with the advance of mobile, the greatest websites have taken user experience and responsive design to the next level, and continue our evolution from print to a digital world."


Good stuff. Interesting. 8/10


Original video: http://youtu.be/3iVVM_DgWY4



more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Web Site Prototyping on Paper: Analog Tools for Web and Mobile Designers

Web Site Prototyping on Paper: Analog Tools for Web and Mobile Designers | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you like to go back to pen and paper to draw your sketches, rather than launching the latest web prototyping tool, you are probably still doing the best thing. 


As Milos Nedved writes on 1stwebdesigner: "...analog methods of prototyping are especially valuable right at the beginning of projects – when speed matters the most.


Working with paper, or perhaps a whiteboard, can accelerate the speed of our learning loops.


Sketch, feedback, sketch, feedback, sketch feedback – you can go through dozens of iterations in one day and you’ll set solid foundations for the rest of the work.


Consider it kind of premium insurance. Getting rough feedback quickly can save you a lot of work."


The article contains a short review of a set of analog, paper-based, web design/ mobile prototyping tools.


Useful. 8/10


Full article: http://www.1stwebdesigner.com/design/paper-prototyping-analog-tools-web-mobile-designers/



more...
No comment yet.
Rescooped by Robin Good from WebsiteDesign
Scoop.it!

Top50 Responsive Themes for WordPress

Top50 Responsive Themes for WordPress | The Web Design Guide and Showcase | Scoop.it

"Responsive WordPress themes are those that adopt to different web surfing devices like mobile phones, tablets.


Via Brian Yanish - MarketingHits.com
more...
No comment yet.
Scooped by Robin Good
Scoop.it!

The Official Google HTML & CSS Style Guide

The Official Google HTML & CSS Style Guide | The Web Design Guide and Showcase | Scoop.it

From the official guide: "This document defines formatting and style rules for HTML and CSS.


It aims at improving collaboration, code quality, and enabling supporting infrastructure.


...like other Google style guides, deals with a lot of formatting-related matters.


It also hints at best practices so to encourage developers to go beyond indentation.


Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write. Not surprisingly then, in our HTML and CSS style guide you’ll find both (as much as you’ll still find a lot of different development styles in our not entirely small code base)."


Full Guide: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

How To Design a Graphic HTML Newsletter

How To Design a Graphic HTML Newsletter | The Web Design Guide and Showcase | Scoop.it

Robin Good: If you are looking for good advice, basic technical and design tips and a good bunch of nice examples of how you coud design your own newsletter, this is a good tutorial to check out. 


It includes good tips, advice on use of tables, CSS and images, as well as how to avoid ending up in the spam folder plus an extensive graphic newsletter showcase.


Useful. 7/10


Full tutorial: http://www.hongkiat.com/blog/design-perfect-newsletter/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Mobile User Interface Design Patterns: 10+ Useful Resources

Mobile User Interface Design Patterns: 10+ Useful Resources | The Web Design Guide and Showcase | Scoop.it

Robin Good: Here is a valuable curated list of over 10 useful website resources dedicated to mobile UI design patterns. 


If you are looking for examples, models, patterns or just inspiration for the look and feel of your new mobile app, you may find what you are looking for in this good collection.


Useful. 7/10.


By Jacob Gube: http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

HD Web Design Is Coming: Web Designers Get Ready | Design Shack

HD Web Design Is Coming: Web Designers Get Ready | Design Shack | The Web Design Guide and Showcase | Scoop.it

Robin Good: As new iPhone and iPad screens are pushing the limits of screen resolution to millions of new users, web designers too will soon need to adjust their web site building strategies to take this major technical issue into consideration.


Josha Johnson at Design Shack writes: "...Think about what that means. Apple has retina displays on the full iOS line: iPod Touch, iPhone and iPad.


This means that millions of people are browsing the web every day on high resolution screens that won’t properly display your images.


Make no mistake, this trend will only get worse as other device manufacturers play catch up and Apple explores ways to bring more pixel density to the next obvious place: the laptop market.


...We’re witnessing the emergence of higher resolution screens, but our content is only optimized for the old screens.


...The good news is that we’ve been preparing for this in some ways for years and we didn’t even know it.


The rise of CSS3 and HTML5 have really pushed forward the notion of cutting down on the number of images that we use in our markup.


...It doesn’t matter if you love Apple or absolutely hate everything they stand for, the reality is that if you’re a web designer, the rise of the retina display is going to kickstart a trend that will fundamentally change the way you build websites.


At this point in time we have a few courses of action to explore:

a) HTML5 canvas,

b) JavaScript,

c) CSS3,

d) SVG, and

e) media queries

together comprise your arsenal of weapons with which to attack the problem of your content being viewed at upwards of 264ppi."


Informative. 7/10


Read the full article here: http://designshack.net/articles/html/ready-or-not-here-comes-hd-web-design/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Web Apps Design Guide in HTML5 Sauce

Web Apps Design Guide in HTML5 Sauce | The Web Design Guide and Showcase | Scoop.it

Robin Good: For web designers and web app developers. A great example of HTML5 design at work in this useful and information-rich "Field Guide to Web Applications" by Bert Appward.


Direct link: http://www.html5rocks.com/webappfieldguide/toc/index/ 

more...
No comment yet.
Scooped by Robin Good
Scoop.it!

Single-Page Websites Design Showcase | SpyreStudios

Single-Page Websites Design Showcase | SpyreStudios | The Web Design Guide and Showcase | Scoop.it

Robin Good: A great showcase of one-page websites from which to draw inspiration. 

If you are a web designer wanting to find an idea on how to build your own new site, you may find quite a few gems in here.


Full showcase: http://spyrestudios.com/35-new-and-fresh-single-page-websites/ 

more...
Martin (Marty) Smith's comment, February 10, 2012 12:42 AM
Cool idea that goes great with MaxOz's post on minimal design being where it is at now. Thanks. TY too for you entry into the contest you, maxOz, Anise and a group of other scoopers inspired. Marty