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.
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
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."
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.
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."
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).
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?
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.
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)."
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
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.
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.
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.
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)."
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,
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."
Sharing your scoops to your social media accounts is a must to distribute your curated content. Not only will it drive traffic and leads through your content, but it will help show your expertise with your followers.
How to integrate my topics' content to my website?
Integrating your curated content to your website or blog will allow you to increase your website visitors’ engagement, boost SEO and acquire new visitors. By redirecting your social media traffic to your website, Scoop.it will also help you generate more qualified traffic and leads from your curation work.
Distributing your curated content through a newsletter is a great way to nurture and engage your email subscribers will developing your traffic and visibility.
Creating engaging newsletters with your curated content is really easy.