Making Material Design

A behind-the-scenes look at building Google’s visual framework. Find out more about material design at www.google.com/design.

What Makes a Great 404 Error Page?

No one wants to think website visitors are spending time on error pages, but it happens. The 404 error page is one place that these interactions happen rather frequently. Design it in a way that speaks to users rather than encouraging them to leave your site.

More memorable and less frustrating 404 error pages are the most successful. They can also be the most fun to design. So what can you do to create the best 404 page for your site? Here are a few tips, tricks and gallery of great examples.

What is a 404 Error Page?

Website visitors land on a 404 error page when they try to visit a page that does not exist. This can be because the page has been removed, the server or internet connection is down, users have clicked a broken link or typed a URL wrong.

Typically 404 error pages result in one of the following messages:

• 404 Not Found
• HTTP 404 Not Found
• 404 Error
• The page cannot be found
• The requested URL was not found on this server

When it comes to the overall design of 404 pages there are two options – a generic 404 page or a custom 404 page. Generic pages just spit out the messages above with no regard to the design. Custom pages are those that you design and create options for. You must have access to the host server to do this. (That is not something we will go into here, but you can learn more about it from A List Apart.)

Good custom 404 error pages tell users what to do if they get misdirected in some way. Pages should include usable information that will help a visitor stay on your site and find the information they are looking for. (Hopefully they will have a nifty design as well.)

Basic Must-Have Information

To be most effective a 404 error page should be somewhat simple in nature. It should tell users that there is an error (obviously) and what options they have to move forward from this page.

What a 404 page should not have is a bunch of technical jargon. (You don’t want to scare users, do you?) In all reality, you probably should not even use the headline “404 Error” because many of your users won’t have any idea what that means. Stick to something with more meaning, such as “The page can’t be found.”

There are some other pieces of information that you must have on the 404 page. Remember, the point is to keep visitors clicking if they found the page in error, not lose them.

• A strong headline or text explaining to a user why they are here. It is jarring when you land on a webpage that is not what you intended. Make sure users know they are not on the right page, but they are on the right website.
• Search. Make sure the 404 error page has the same search functionality (and in the same location) as the rest of your site. That way users can look for the page they intended to visit.
• Links to your homepage and sitemap. Likely this will happen as a design element that includes a header or footer that matches the rest of the site.
• Minimal information otherwise. Consider stripping away complicated navigation. If a user gets to a page in error, only give that person a few options that will result in success. Too many options here could further frustrate or confuse the user.
• Include a obvious call to action. Tell users what to do next.

Make 404 Pages Usable

Part of the design process when thinking about 404 pages should be usability. Include features that make the page both visually appealing and functional for the lost user.

Google has a list of great suggestions for information to include on a custom 404 page in its webmaster tools. These tips include:

• Tell visitors clearly that the page they’re looking for can’t be found. Use language that is friendly and inviting.
• Make sure your 404 page uses the same look and feel as the rest of your site.
• Consider adding links to your most popular articles or posts.
• Think about providing a way for users to report a broken link.
• Make sure that your web server returns an actual 404 HTTP status code when a missing page is requested so that it does not show up in search results.
• Use the Enhance 404 widget to embed a search box on your custom 404 page.
• Use the Change of Address tool to tell Google about your site’s move.

To that list of tips is one more for designers: Be creative. A 404 page does not have to be boring if it is technically sound.

Design 404 Pages With Purpose

When you are thinking about the design of a 404 error page, first consider how it works in relationship to the rest of the site. What is the mood or tone of your overall design? How can this page match that feel?

Great error pages mesh seamlessly with the site they live on. If your site has a light and humorous tone, so should the 404 page. The colors and imagery should also have a consistent design. Be careful though in the design not to blame the user for landing on the wrong page. (This happens more frequently than you might think.)

Think about the design for an error page as you would any other page in the overall design scheme.

• Maintain design consistency. Use the same color, typography and image styles that are integrated on other pages of the website.
• Maintain branding. Using the same logo, header and footer treatment will help users recognize your site.
• Keep it simple visually. Less is more when it comes to error pages.
• Don’t make users scroll. This is a one-screen design.
• Avoid too many gimmicks. While it is a good idea to maintain the tone and feel of your site and brand, too many “extras” can make users forget what they were looking for in the first place.
• Apologize and be empathetic. It’s ok to be sorry that a user landed in the wrong place.
• If your site requires a login, add a place for it. (Did the error happen because the user needed to be logged in?)
• Be creative. Or funny. But test the page first. Make sure random users “get it.”
• If you uses “404 error,” add a second line of text telling users what it means or what they need to do next.

12 Great Examples

There’s nothing like hitting a great 404 error page. It eases the frustration of a bad or broken link. Here are a dozen pages that are sure to make you want to stumble upon an error.

Deviant Art

Gig Masters

iFolderLinks

Lego

LimpFish

Magnt

Mattel

ModCloth

NPR

Steve Lambert

Titleist

Tobi

Conclusion

It can be hard to think of designing a page that is the result of an error as fun or a place to showcase some creativity, but it an be. Designing an effective 404 page is a mix of simplicity, usability and design flair.

via design shack

Advertisement

BLOKK – a font for quick mock-ups and wireframing

BLOKK fontBLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.

Download font

15 Websites Free Design Resources

Keeping costs low and clients happy with the work you deliver can be a very difficult balance to strike, especially for freelance designers. Fortunately, there are great free design resources online to help you out.

It won’t be a stretch to say that most creatives – whether you’re a web designer, illustrator, photographer, developer, etc. – know what it’s like to work with limited budgets. It can often feel like clients barely have enough to even pay you for your time, let alone have the budget for the truly unique resources that can make a project really stand out.

Thankfully, there are some great places on the web that can provide some relief. Having these sites bookmarked can help you finish your project on time and under budget.

The following list is for all my fellow freelancers. Included are different websites that offer free, high-quality design resources. Most of the websites on this list are some of the lesser known design resource websites, along with a few well-known websites simply because they are my favorites and are too good not to mention. Hopefully, you’ll be able to find some great freebies to help you take your projects to the next level.

Free Vectors

Vecteezy

Vecteezy is definitely a more well-known resource for both premium and free vectors. If you don’t yet have this one bookmarked, you may want to do so now. Started by the same owner of Brusheezy, Vecteezy is easy to use with an advanced search feature. All of the vectors display their License and explain it so that you know exactly how you can use the vector in your designs. Best of all, they seem to have just as many, if not more, free vectors as they do premium, and the premium vectors are clearly marked with a banner.

Alphateck

Nick G. Botner is a UI/UX designer with additional skills in areas such as identity/ print design, photography, and HTML/ CSS. His website, Alphateck.com, includes a blog on which he hosts free vector packs that he designs. All are available for use with only a payment of a Tweet or Facebook post. A few even allow you to skip the social sharing payment and pay a few dollars or less.

Images and Photos

Picjumbo

PicJumbo is a rare website that provides high quality stock photos free for commercial use. Victor Hanacek is the amazing photographer behind this site, and uploads a new photo every day. If you find yourself using his photos often, be nice and donate a portion of your profits. It’s quite amazing that he offers such beautiful photos with no strings attached.

Getty Images

While Getty Images is certainly one of the most well-known resources for stock photos, it is not known for free photos. Until just last month, if you wanted free use of the photographs, you had to be comfortable with the Getty watermark. Getty changed this with an embed link that displays a credit footer at the bottom of the photo. This is perfect for your blogging clients or even those who really want the wow factor of high resolution, quality photos and don’t mind the footer. The images just can’t be used for commercial purposes.

FireShot

Many clients need to display screenshots of their app or software on their website. FireShot is an excellent tool for capturing high quality screenshots and making edits immediately without using another program. Right on the screenshot, you can make edits and add text annotations and then save, copy, send by email, share, or upload to FTP. If you feel like you waste a lot of time copying screenshots to your image editor only to make minimal edits, then FireShot could be the time-saving tool you need.

Free Fonts

Open Font Library

Open Font Library is an excellent source for some really unique and creative fonts. While the catalogue is not huge, it still contains several hundred unique font families. But the really big perk of this free font website is that it contains a number of fonts from different languages, such as Latin, Persian, Farsi, and more.

Fonts for Peas

If your client is in need of scrapbooking type fonts, then you may want to check out Kevin and Amanda’s website and their Fonts for Peas. They recently added in a new batch of fonts just a few months ago. All of their fonts are free for commercial use as long as you include their button on the website either in the sidebar or on a credits/ links page. They also offer more free fonts on their Free Scrapbook Fonts page and all follow the same Terms of Use as the Fonts for Peas.

Various Resources

Creative Alys

Creative Alys provides a variety of resources which include PSD and Mockups, vectors, fonts, and programming/development resources, like their definitive guide to MongoDB. While their selection is not huge, it is still a great place to look if you have exhausted all of your other resources or simply want to browse for something more unique.

Brankic 1979

It is rare to find a web design company that will offer their old resources for personal and commercial use. Brankic 1979 is one such web design/development team that offers a rather large collection of design freebies, including widgets, UI kits, icons, and more. And all are, as to be expected from professionals, very high quality.

Sallee Design

Sallee Design is the website of another generous designer, Jeremy Sallee. As a designer with an engineering background, Jeremy provides some incredible, top notch web design resources. Included in his list are icons, PSD files, and even a wallpaper.

Pixel Buddha

All of the freebies on Pixel Buddha are completely free for commercial use, which is amazing because they are all very impressive and original. Included in the list of free resources are icons, UI kits, effects, animation, templates, and mockups.

Dreamstale

Still in Beta, Dreamstale is a very new resources roundup website that also publishes articles, tips, and tutorials. The Dreamstale freebies is an already impressively large list of free downloads, such as icon packs, Photoshop actions, backgrounds, vectors, mockups, and much more.

KL-Webmedia

KL-Webmedia is yet another design studio that offers an awesome list of freebies. Patrick M., the incredible designer behind the studio and free resources, provides such free web design goodies as icons, buttons, PSD templates, UI templates, and more website elements.

Eamejia

Eduardio Mejia is an engineer and designer and also founder of an incredible website store called eamejia that also offers freebies for more than just web designers. In his free list, you will find mockups for book covers and other print designs, UI kits, website backgrounds, PSD web templates, and more, all listed under a Creative Commons Attribution 3.0 License.

Graphic Burger

Many of you may already know about Graphic Burger, but it is just an amazing site that I couldn’t help but mention it here. Everything on the site is free for both personal and commercial use and every few days they post something new. Included in their resources list are mock-ups, UI kits, text effects, icons, PSD files, and much more.

Be sure to bookmark either this page or the above websites to make completing your web design projects much faster and, therefore, more profitable.

via designinstruct.com

Is Flat Design Already Passé?

MAYBE IT’S TIME TO GIVE SKEUOMORPHISM ANOTHER TRY?

Over the last few years, we’ve seen an upheaval in the way computer interfaces are designed. Skeuomorphism is out, and flat is in. But have we gone too far? Perhaps we’ve taken the skeuomorphic death hunts as far as they can go, and it’s high time we usher in a new era of post-flat digital design.

Ever since the original Macintosh redefined the way we interact with computers by creating a virtual desktop, computer interfaces have largely been skeuomorphic by mimicking the look of real-world objects. In the beginning, computer displays were limited in resolution and color, so the goal was to make computer interfaces look as realistic as possible. And since most computer users weren’t experienced yet, skeuomorphism became a valuable tool to help people understand digital interfaces.

But skeuomorphism didn’t make sense once photo-realistic computer displays became ubiquitous. Computers have no problem tricking us into thinking that we’re looking at something real so we don’t need to use tacky design tricks like fake stitching or Corinthian leather to fool us into thinking our displays are better than they are. In addition, most people have grown up in a world where digital interfaces are common. UI elements don’t haveto look like real world objects anymore for people to understand them.

This is why Jony Ive took over the design of Apple’s iOS and OS X operating systems and began a relentless purge of the numerous skeuomorphic design elements that his predecessor, skeuomaniac Scott Forstall, created. To quote our own John Pavlus, “skeuomorphism is a solution to a problem that iOS no longer has”… and that’s true of other operating systems and apps too. Google, Microsoft, Twitter, Facebook, Dropbox, even Samsung, they’re all embracing flat design, throwing out the textures and gradients that once defined their products, in favor of solid hues and typography-driven design.

This is, without a doubt, a good thing. Skeuomorphism led to some exceedingly one-dimensional designs, such as iOS 6’s execrable billiard-style Game Center design. But in an excellent post, Collective Ray designerWells Riley argues that things are going too far.

Flat design is essentially as far away from skeuomorphism as you can get. Compare iOS 7’s bold colors, unadorned icons, transparent overlays and typography-based design to its immediate precessor, iOS 6. Where once every app on iOS had fake reflections, quasi-realistic textures, drop shadows, and pseudo-3-D elements, iOS 7 uses pure colors, no gradients, no shadows, and embraces the 2-D nature of a modern smartphone display. But while flat design has made iOS 7 look remarkably consistent, it has also removed a lot of personality from the operating system. It’s like the Gropius house, when the old iOS 6 was a circus funhouse. Maybe it needs to get a little bit of that sense of madness back.

Here’s how Riley defines elements of a post-flat interface:

• Hierarchy defined using size and composition along with color.

• Affordant buttons, forms, and interactive elements.

• Skeuomorphs to represent 1:1 analogs to real-life objects (the curl of an e-book page, for example) in the name of user delight.

• Strong emphasis on content, not ornamentation.

• Beautiful, readable typography.

Riley’s argument is that flat design has allowed digital designers to brush the slate clean in terms of how they approach their work, but it has also hindered a sense of wonder and whimsy. Software should still strongly emphasizes content, color, and typography over ornamentation, but why is, say, the curl of a page when you’re reading an e-book such a crime, when it so clearly gives users delight?

“Without strict visual requirements associated with flat design, post flat offers designers tons of variety to explore new aesthetics—informed by the best qualities of skeuomorphic and flat design.” Riley writes. Dust off your drop shadows and gradients, and introduce them to your flat color buttons and icons. Do your absolute best work without feeling restricted to a single aesthetic. Bring variety, creativity, and delight back to your interfaces.”

Maybe Riley has a point. Why should mad ol’ Scott Forstall be allowed to ruin skeuomorphism for everyone? With the lightest of brush strokes, skeuomorphism can be used to bring back a sense of personality and joy to our apps. For those of us growing listless in the wake of countless nearly identical “flat” app designs, he makes a good point. It is time for the pendulum towards flat and away from skeuomorphism to swing back, if only a little bit.

via fastcodesign.com

Bam! OFFF 2014 Teaser!

In its fourteenth edition, OFFF Festival represents another pleasurable experience for its audience. But then again, what is OFFF? The perfect place to taste the inside scoop of talented people from all around the world? An awesome line up of speakers leaving you hungry for more? Or is it some kind of festival that makes you come every year? Find out about that in Barcelona on May 15-16-17, because it will just turn you on.
A Teaser by Lorem Ipsum / Atelier
Directed by: Alessandro Novelli
Produced by: Aimée Duchamp & Héctor Ayuso
DOP: Laura Sans
Music & Sound Design: Simon Smith BCN_Sound
First Assistant Camera: Alejandra Rodríguez & Ivan Obara Ulrich
Second Assistant Camera: Angela Bardakjian, Nandini Barnes, Tarini Dii & Karno Guhathakurta
Compositing & Animation: Rafael Mayani, Mar Gascón & Joao Brás Lucas
Art Direction: Nandini Barnes, Angela Bardakjian, Liliana Diaz & Rafael Mayani
Script: Tarini Dii, Karno Guhathakurta, Joao Brás Lucas & Ivan Obara Ulrich
Illustration & Story Board: Rafael Mayani & Liliana Diaz
Producer Assistant: Natalie Melville & Enric Isern
Voice Over: Zakir Maqsood
Characters: Alejandro and Juan aka Brosmind
Lorem Ipsum are students of Atelier 2013/2014: Alejandra Rodríguez, Angela Bardakjian, Ivan Obara Ulrich, Joao Bras Lucas, Karno Guhathakurta, Liliana Diaz, Mar Gascón, Nandini Barnes, Rafael Mayani, Tarini Dii.
Atelier’s Director: Aimée Duchamp
offf.ws
lawebdelatelier.com

via vimeo.com

WordCamp Porto 2013: Sem ti, não se faz

Nota prévia

Este artigo é da minha exclusiva responsabilidade e não compromete mais nenhuma pessoa ou entidade; venho cansado de organizar um evento enorme que se transformou numa festa de amizade e boa vontade, dando de caras com um Portugal conformado, de costas viradas uns para os outros, à espera que um hipotético “outro” qualquer se mexa primeiro. Não gosto e não me conformo.

Vamos chamar as coisas pelos nomes

Depois de ter passado meses a organizar o WordCamp Europa 2013 e estar agora a analisar tudo o que se disse e publicou sobre o evento, chego à curiosa conclusão de que este evento foi mais falado em Portugal, do que um WordCamp em território nacional, o WordCamp Porto 2013.

Não vale muito a pena investigar porquê; provavelmente acabaríamos todos a abanar a cabeça, depois de ter ponderado longamente as palavras de Pessoa,  ou mais ainda as de José Gil, lamentando esta tão lusitana imobilidade:

Nisso, como em tantos outros aspectos, o Portugal de hoje prolonga o antigo regime. A não-inscrição não data de agora, é um velho hábito que vem sobretudo da recusa imposta ao indivíduo de se inscrever. Porque inscrever implica acção, afirmação, decisão com as quais o indivíduo conquista autonomia e sentido para a sua existência.

José Gil — Portugal Hoje, O Medo de Existir

Ou ainda, posto em música:

Tenham santa paciência.

O WordPress 3.6.1 em Português de Portugal já foi descarregado mais de 45 mil vezes e tem pouco mais de um mês. No WordPress.com existem mais de 200 mil sites em Português de Portugal.

São milhares, mesmo descontando os “puros” utilizadores que nunca mexem em código nenhum, os que usam o trabalho de dezenas de developers internacionais e de outros tantosdevelopers e tradutores nacionais, doado gratuitamente para que possam prosperar nos seu negócios (e não só).

Os organizadores do WordCamp Porto 2013, fizeram um esforço extraordinário para proporcionar a todos um evento que possa servir de ponto de encontro a todos osdevelopers, designers e utilizadores finais do WordPress, e que lhes possa aumentar exponencialmente o número de contactos e alargar os seus horizontes, com conhecimento que muito provavelmente não iriam obter em mais sítio nenhum. Esforço esse, uma vez mais, doado, claro está.

Isto sem falar do ambiente de festa típico de qualquer WordCamp que, e após ter estado pessoalmente em mais de 20, posso garantir que não vai falhar.

Há jogo, é?

Não? Então qual é o problema?

• É conhecer uma comunidade única de simpatia e simplicidade?
• É aprender coisas novas e potencialmente rentáveis?
• É fazer contactos que se podem revelar cruciais para o futuro?
• É conhecer algumas das pessoas mais visíveis na comunidade?
• É passar um Sábado descontraído com festa e tudo no final?

É que francamente não percebo. Quero dizer: o preço não pode ser de certeza. Não sei de nenhum outro evento com este monumental retorno, e que custe 20€. É um preço mais simbólico do que outra coisa (e não nos esqueçamos que inclui almoço, coffee-breaks e uma t-shirt).

Do lado dos oradores, também não pode ser:

• O Hugo trabalha na Automattic, directamente na equipa de aplicações móveis,
• O Américo é nada mais nada menos do que o co-fundador da Comunidade Portuguesa de WordPress,
• A Ana Aires, além de ser co-organizadora dos WordCamps Lisboa 2011, Lisboa 2012 e (sim) Europa 2013 tem muito a dizer sobre pequenas empresas dedicadas a WordPress,
• A Siobhan, além de também ela co-organizadora do WordCamp Europa 2013 e Londres 2013, está a escrever um livro sobre a história do WordPress e é team-lead de todo o esforço de revisão da documentação,
• A Ana Neves é perita em knowledge management, com vários eventos de renome organizados, especialmente o Cidadania 2.0,
• Ter que apresentar o Hugo Fernandes é quase um insulto: designer de interacção,Creative Technologist, criador de apresentações únicas e memoráveis, guru de WordPress,
• O Mario Peshev é o lead da Comunidade Búlgara, core-contributor do WordPress, trabalhou na WPML e colaborou com a Automattic, além de ter desenvolvido plugins que provavelmente usas neste momento.
• … e mais todos os que ainda não foram anunciados

Então?

Anda lá, que isto sem ti não tem piada.

(PS: se não podes mesmo vir, há outras maneiras de ajudar)

Publicado por Zé Fontainhas na WordPress Portugal

15 Inspiring Videos for Web Designers

THE BEST TALKS ON WEB DESIGN AND DEVELOPMENT FROM 2013

There is a recurring tendency among many web designers, developers, and agencies to get stuck in the occasional rut, become stagnant, and sometimes even lose perspective about the evolution and direction of web design today.

We believe it is absolutely fundamental to dedicate time to listening to the great visionaries of your chosen field who can help you see things from a different, innovative, and enriching viewpoint. These forward thinkers can help you attack projects with a renewed determination and encourage you to step out of your comfort zone – dive in head first to an unfamiliar sector, or experiment with the latest technology or programing language!

We have hand-picked 15 videos of the most important creative thinkers for today’s article which features the likes of Jeffrey Zeldman, Ethan Marcotte, Simon Collison, Shelly Bowen, or Bruce Lawson. We hope they can inspire you and give you a clutter-free vision of the current state of all-things web.

Content First by Jeffrey Zeldman – An Event Apart Boston: The rules of design engagement are changing. You may no longer be in control of the user’s visual experience. Learn the number one job of every web designer, how to persuade clients and bosses not to subject users to dark patterns, why the days of “Best Viewed With…” are finally behind us, and how a mobile (or small screen) strategy can help you improve your content, rethink your web experience, and put the user first.

 

Ethan Marcotte – The Map Is Not The Territory – Build Conference: When we create for the web, we participate in a kind of public art. We code, we design, we build for an audience, and our work feels successful when—if—it’s met with their delight. We shape digital experiences that provide a service, or that create joy, or that simply connect readers with words written half a world away. But in this session we?ll instead look at some ways in which our audience reshapes the way we think about our medium, and see where they might be leading us—and the web—next.

 

The Curious Properties of Intuitive Web Pages by Jared M. Spool – An Event Apart Boston: When a web page works, your users know exactly what to do. Everything makes sense, and they accomplish their goal, pleased with your site. Yet, often pages don’t work, and users get flustered and confused. It turns out that intuitive web pages abide by a set of curiously unintuitive properties. Watch Jared explain how to merge interaction design, visual design, information architecture, and other skills together to assemble web experiences that delight your users.

 

Simon Collison — Crafting the Progressive Web // Ready to Inspire’12: For many of us, the work we most value is imbued with a sense of craft, honesty, and purpose. We’re at our best when responses are instinctive, not bound by rigid tools or inflexible methodologies. Craftsmanship makes our work more meaningful to us, and more valuable to those who commission or consume it.

 

Shelly Bowen — How Content Strategy Makes Design Shine // Ready to Inspire’12 A cohesive, effective design depends on all the parts in play … including content. But content is often left until last, isn’t well thought-out or well crafted, and then may even compromise the integrity of the design and the business. Shelly Bowen will share 5 simple steps to integrate content strategy into your process to ensure all the parts stick together nicely (and your business goals are achieved).

 

RDO – Bruce Lawson: Bruce Lawson is a married, 40-something year old English graduate and web developer. He has lived in Turkey, Thailand, India, Bangladesh and Russia, but now lives in Birmingham, UK. Bruce works for Opera as an evangelist of Open web standards, based on his firm belief that the web is a revolutionary communication mechanism and should be available to all

 

Karen McGrane: Adapting Ourselves to Adaptive Content – An Event Apart: For years, we’ve been telling designers: the web is not print. You can’t have pixel-perfect layouts. You can’t determine how your site will look in every browser, on every platform, on every device. We taught designers to cede control, think in systems, embrace web standards. So why are we still letting content authors plan for where their content will “live” on a web page? Why do we give in when they demand a WYSIWYG text editor that works “just like Microsoft Word”? Worst of all, why do we waste time and money creating and recreating content instead of planning for content reuse? What worked for the desktop web simply won’t work for mobile. As our design and development processes evolve, our content workflow has to keep up. Learn how to adapt to creating more flexible content.

 

Jason Santa Maria – On Web Typography – Build Conference Achieving a thorough grasp of typography can take a lifetime, but moving beyond the basics is within your reach right now. In this talk, we’ll learn how to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. Through an understanding of our design tools and how they relate to the web as a medium, we can empower ourselves to use type in meaningful and powerful ways.

 

Tim Brown — Universal Typography // Ready to Inspire’12The web is universal, so we should practice a typography that is equally universal. By focusing on traditional typographic principles, embracing progressive enhancement, and understanding how fonts, CSS, web-enabled devices, and user contexts coexist, we can reevaluate what it means to successfully set type — and inform the decisions we make about typefaces, font sizes, and white space. Let’s practice future-friendly, responsive typography.

 

Brad Frost — Death to Bullshit // Ready to Inspire’12More information exists now than ever before. 72 hours of video are uploaded to YouTube every minute. 10% of all photos ever taken were taken last year. 700,000 apps in the App Store. The list goes on. We’re being inundated with more information than ever, but there’s still only 24 hours in a day. With more stuff out there, people are forced to focus on what truly matters to them, and their tolerance of unnecessary noise is rapidly diminishing.

 

Tiffani Jones Brown – True Story – Build ConferenceWe are all storytellers. Everything we create—from opinionated tweets to designed products—says something about who we are. At their best, these stories help us relate and call us to great acts. At their worst, they reduce us to absolutes like “Top 10 ways to win” or “Here’s how to fail” when the truth is rarely so clear-cut.

 

Mandy Brown – The Cut – Build ConferenceTo edit is to cut: to remove, to shear away, to crumple up on the floor. We edit so that the message can get through, so that what we say is clear. It’s a necessary skill no matter the medium in which we work. Whether editing words or film or designs, a good edit requires the right combination of timing, compassion, and ruthlessness.

 

Luke Wroblewski – Mobile To The FutureWhen something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlines how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.

via awwwards

Mobile Design Kit

Free to use, real pixels screen sizes for 15 flat designed devices, in multiple colors, outlined and with grids.

danielchitu.com/mobiledesignkit.html

Are you thinking of doing something Responsive?

Here’s a great site with tips and tricks. I highly recommend.