Research and publish the best content.
Get Started for FREE
Sign up with Facebook Sign up with X
I don't have a Facebook or a X account
Already have an account: Login
The Web Design Guide and Showcase
32.8K views |
+0 today
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...
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/ 
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/
Scoop.it!
![Wireframing Tools: The Ultimate Visual Information Guide [Infographic] | The Web Design Guide and Showcase | Scoop.it](https://img.scoop.it/4l2NuNcpWlbWd9E0pTCdzjl72eJkfbmt4t8yenImKBVvK0kTmF0xjctABnaLJIm9)
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/
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: 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/
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. 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)
Scoop.it!
From
vimeo
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: "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/
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
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/
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
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:
Must watch. 9/10
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/
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
|
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/
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_
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
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
Scoop.it!
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. 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
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/
Scoop.it!
"Responsive WordPress themes are those that adopt to different web surfing devices like mobile phones, tablets." Via Brian Yanish - MarketingHits.com
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
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/
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/
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/
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/
Scoop.it!
Robin Good: A great showcase of one-page websites from which to draw inspiration. Full showcase: http://spyrestudios.com/35-new-and-fresh-single-page-websites/
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
|
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/