Join Scoop.it for Free
Share ideas that matter on the social web and experience
the benefits of curating the world's best content.
I don't have a Facebook, a Twitter or a LinkedIn account
Already have an account: Login
Examples, tutorials, insight and non-technical news about designing effective web pages
Curated by
Robin Good
|
Scooped by Robin Good onto The Web Design Guide and Showcase |
No comment yet.
Sign up to comment
Delete the scoop?
Are you sure you want to delete this scoop?
Yes
 Your new post is loading...
Scoop.it!
Robin Good's insight:
A must try-out tool for web designers. 
Dennis T OConnor's comment,
April 30, 3:08 PM
I signed up for a beta account. Hope I get my hands on this soon!
Paco Arcoleo's curator insight,
May 13, 3:49 PM
Strumento davvero fichissimo per creare mag interattive: ReadyMag Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
Robin Good's insight:
If you are looking for an effective tool to help the review of design drafts, providing the ability to add comments, suggestions, to highlight problems or to contribute new ideas, Concept.ly is definitely worth a try. This new web app allows you to upload just about any type of image file that needs to be showcased, organize it with other related files and to share it with your selected teammates or customers. Key additional features include: - Compare multiple designs back to back - Support for mobile devices - Link different images and pages easily - Track progress and statistics - Full support for Dropbox, GDrive, Box. P.S.: Free to use for a lifetime if you join the beta program now. Try it out here: http://concept.ly/ Tour: http://concept.ly/features.html 
Brian Yanish - MarketingHits.com's curator insight,
April 10, 11:24 AM
Interesting, I'll have to give it a try. Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
In “Storytelling in Web Design,” I explained the three most basic aspects of storytelling — character, setting, and action — and offered ways to begin including storytelling in web design using basic design elements..." Via Gregg Morris, Karen Dietz
Robin Good's insight:
Here are ten illustrated examples of how storytelling can be an integral part of any web design and communication strategy. For each one of these you also get to know the character, setting, and action found in each story. Very useful. Excellent examples. 8/10 Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
From sketching on the go to choosing colours and fonts, these awesome iPhone apps will speed up your workflow and help you make the right design choices. Via Tocquigny, Brian Yanish - MarketingHits.com
Robin Good's insight:
Good short info about many apps I didn't know about. Reference of price, author and download/buy link. Very useful. 7/10 Original list: http://www.creativebloq.com/design-tools/best-iphone-apps-812522 
Tocquigny's curator insight,
March 19, 5:24 PM
Good things come in small packages, and though you may not have considered it, the iPhone can be a pretty handy design tool. Stocked with the right apps it can pack some real punch in the studio - and more importantly, out of it. Despite some strong competition from recent new phone launches, the iPhone continues to be the main smartphone of choice for the design world, and so we've rounded up the very best iPhone apps around to help your day to day design workload. So whether you plan to do some sketching on the move, are after a particular tool to aid your daily design work, or prefer to take things more seriously with something to help you manage your projects, time and money, there’s a great selection of must-have apps here.
Brian Yanish - MarketingHits.com's curator insight,
March 19, 6:29 PM
Find some great app in this article.
Paco Arcoleo's curator insight,
March 28, 6:08 PM
Certo l'iPhone come display limita parecchio, però si sà siamo sempre più smanettoni! un pò tutti!!! :D Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
Gridset is a tool that allows you to create sets of grids for your site.
Robin Good's insight:
Gridset is a commercial web-based app for web designers for making grids, designed and built by the team at Mark Boulton Design. Gridset allows you to create grids for a number of different breakpoints. Each grid can be different – from ratio grids, to simple column grids. This set of grids is then compiled to one fully responsive CSS file for your site. From the official site: "With responsive design forcing us into working and thinking differently about web layouts, the maths involved in designing for a plethora of different screen sizes started to take up valuable time and cause more than a few headaches. We were hitting the same hurdles as everyone else. So when we looked to the web for a tool to help simplify the process and realised there wasn’t anything out there, we decided to make our own. And that’s how Gridset came to be." Free 30-day trial Features: https://gridsetapp.com/features/ Examples of grids: https://gridsetapp.com/#specimens Pricing: https://gridsetapp.com/pricing/ FAQ: https://gridsetapp.com/faq/ Find out more: https://gridsetapp.com/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ 
Philippe Trebaul's curator insight,
February 27, 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/... Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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) Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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
Delete the scoop?
Are you sure you want to delete this scoop?
Yes
|
Scoop.it!
Robin Good's insight:
Niice is a new highly specialized search engine, tapping into the heart of three first class design & inspiration sites: Dribbble, Designspiration and Behance. If you are looking for design inspiration on just about anything, search with Niice and you'll likely find some wonderful references, if not a designer or illustrator to hire right now. Excellent design resource. Free to use. Try it out now: http://www.niice.co/ 
Paulo Tomás Neves's curator insight,
April 19, 4:06 PM
The internet is full of inspiration, but since Google doesn't have a ‘Good Taste’ filter, finding it means jumping back and forth between blogs and gallery sites.
Niice is an inspiration search engine, letting you search across multiple hand-picked sources (Behance, Dribbble, Designspiration, Fubiz & Minimalissimo for now, but we're working to add more).
Paco Arcoleo's curator insight,
April 21, 9:07 AM
Niice motore di ricerca per design ispiration! Niiiice :) Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
Generate a color palette from PNG, JPG or GIF image/photo. Receive color suggestions, download Photoshop swatches (.ACO)
Robin Good's insight:
Pictacolous is a free color palette generator which allows you to easily find matching color schemes for any image you submit. Courtesy of Mailchimp (the email newsletter distribution service) the new free service analyzes your image (any JPG, GIF or PNG not larger than 500K) for individual colors before tapping into Adobe Kuler and ColourLovers public collection of color palettes and suggesting the most relevant ones. Essential. Simple. Very useful. Try it out now: http://www.pictaculous.com/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
Build high-fidelity fully interactive mobile app prototypes in minutes. Prototypes can be viewed on browser or device giving a real experience to the user how the app will look like and behave.
Robin Good's insight:
Turn your wireframes and designs into interactive prototypes that you can actually see, in the same way that your users will with Proto.io. See exactly how your app will work and look. Swipe, tap, rotate and examine your app inside out the same way your end user will. Proto.io is also the first web protoyping tool that supports full feature animations and touch events. Proto.io is an excellent platform to prototype your new app across all kinds of devices and screens from smartphones, to smart TV. refrigerators, car screens, etc. Basic free account available. Examples: http://proto.io/en/examples/ Features: http://proto.io/en/features/ Pricing: https://proto.io/en/signup/ Tutorials: http://docs.proto.io/tutorials/ Help: http://docs.proto.io/ Find out more: http://proto.io/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
Robin Good's insight:
Michael Locke highlights with some valuable visual exmaples, five UI design trends that characterize beautiful, clean designs. These are: 1) Large Image Backgrounds 2) One Page Designs 3) Textures, patterns and noise 4) Responsive Web Design 5) Flat UI Design Original video: http://youtu.be/bKrY0o_3TqU Original article: http://www.mlwebco.com/2013/03/12/my-top-5-favorite-web-ui-design-trends-for-2013/
Paco Arcoleo's curator insight,
March 15, 12:00 PM
Trends del design di UI (User Interface) nel 2013 
Trompetista De Jazz's curator insight,
March 15, 12:17 PM
Visita http://www.dweb3d.com Diseño web en Colombia Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
They say a picture is worth a thousand words. True or not, images are an important part of any website we create. Since it is so easy to embed an image in a website (even the process of creating your
Robin Good's insight:
If you want to learn how to use images effectively inside your website or blog here is a truly excellent guide by Chistian Vasile on 1WD. In the guide you will find rational and fact-supported advice on how to choose, place and test image use inside web-based content as well as lots of extremely relevant examples of effective image use online. From the original article: "...if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others." Well written. Informative. Resourceful. 8/10 Full guide: http://www.1stwebdesigner.com/design/images-on-web-design-usability-guide/ 
Martin (Marty) Smith's curator insight,
March 9, 2:54 PM
Confessions of A Director of Ecommerce 2. Gaze directly at a Call To Action - promotes clicks. 3. Gaze at other people in same picture - promotes connection.
We used #1 for pages with broad reach such as our homepage and category top-level pages. Websites communicate SO MUCH in covert ways. Balancing what you say with one image such as the people looking at each other with another image to promote engagement is the game you play, the inside baseball "secrets" that separate teams capable of making millions in profits online from those who won't and wonder why :).M
Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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_ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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, 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 Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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 Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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/ Delete the scoop?
Are you sure you want to delete this scoop?
Yes
Scoop.it!
"Responsive WordPress themes are those that adopt to different web surfing devices like mobile phones, tablets." Via Brian Yanish - MarketingHits.com Delete the scoop?
Are you sure you want to delete this scoop?
Yes
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 Delete the scoop?
Are you sure you want to delete this scoop?
Yes
|
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/