Making Material Design

Vídeo

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

Anúncios

What Makes a Great 404 Error Page?

Imagem

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?

404 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

404 page

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

404 page

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

404 page

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

404 page

Gig Masters

404 page

iFolderLinks

404 page

Lego

404 page

LimpFish

404 page

Magnt

404 page

Mattel

404 page

ModCloth

404 page

NPR

404 page

Steve Lambert

404 page

Titleist

404 page

Tobi

404 page

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

BLOKK – a font for quick mock-ups and wireframing

Imagem

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

Imagem

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

01-free-web-resources-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

02-free-web-resources-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

15-free-web-resources-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

03-free-web-resources-getty

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

04-free-web-resources-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

05-free-web-resources-openfont

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

06-free-web-resources-kevinandamanda

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

07-free-web-resources-creativealys

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

08-free-web-resources-brankic

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

09-free-web-resources-sallee

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

10-free-web-resources-pixelbuddha

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

11-free-web-resources-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

12-free-web-resources-klwebmedia

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

13-free-web-resources-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

14-free-web-resources-graphicburger

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é?

Imagem

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!

Vídeo

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

Vídeo

wordcamp-porto

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 osdevelopersdesigners 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:

  • Hugo trabalha na Automattic, directamente na equipa de aplicações móveis,
  • Américo é nada mais nada menos do que o co-fundador da Comunidade Portuguesa de WordPress,
  • 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,
  • 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,
  • 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,
  • 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  na WordPress Portugal