Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Author:

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs front-end/UX workshops, webinars and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

Twitter: Follow Vitaly Friedman on Twitter

Google Profile: https://plus.google.com/101951294740286010890

18 Credit Card, Debit Card and Payment Icons [Freebie]

Today we are glad to release a Payment Icon Set, a set with 18 payment icons in PNG format, in the resolutions 32×32px — 128×128px. This set was designed by Phil Matthews and released especially for Smashing Magazine and its readers. The icons are inteded to be used on e-commerce websites where you can show what types of payment the shop accepts. Each icon comes in curved and straight edge variations. [Content Care Dec/24/2016]

Screenshot

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

Read more...

50 New Useful CSS Techniques, Tutorials and Tools

These are great times for front-end developers. After months of exaggerated excitement about HTML5 and CSS3, the web design community now starts coming up with CSS techniques that actually put newly available technologies to practical use instead of abusing them for pure aesthetic purposes. We see fewer "pure CSS images" and more advanced, clever CSS techniques that can actually improve the Web browsing experience of users. And that's a good thing!

Screenshot

[fblike]

In this post we present recently released CSS techniques, tutorials and tools for you to use and enhance your workflow, thus improving your skills. Please don't hesitate to comment on this post and let us know how exactly you are using them in your workflow. However, please avoid link dropping, but share your insights and your experience instead. Also, notice that some techniques are not only CSS-based, but use JavaScript, or JavaScript-libraries as well.

Our job is to promote good, high-quality content and resources. If you wrote or developed something useful, contact us — we will do our best to spread the word and help you out.

Read more...

Useful Photoshop Techniques, Tutorials and Tools

As web designers, we always have something new to learn. Over the last decade our workflow has changed dramatically — it's become more sophisticated and highly diversified. Not only do we have a much larger variety of improved tools to use; there's also an endless stream of new techniques emerging and spreading within the web design community via social networks. And this is where the opportunity to learn new useful, practical approaches and techniques comes in.

Create an Awesome Number-Based Illustration

We can learn by exploring the different design approaches other designers have taken, when solving their problems and apply these approaches to our work to become more productive and skilled. Therefore, our editorial team is permanently looking for interesting techniques, tools and tutorials, which we carefully select and present in round-ups on Smashing Magazine. You needn't love our lists, but they often will give you some useful ideas and advice.

Below you'll find an overview of new useful Adobe Photoshop techniques and tutorials that we've found and collected over the last months. We sincerely hope that at least some of the techniques presented there will help you improve your graphic design skills in Adobe Photoshop. And sincere thanks to all designers and developers whose articles are featured in this review. We respect and appreciate your contributions to the design community, folks!

Read more...

The Beauty Of Public Signage: Photo Contest Results

In August we announced the World Of Signage Photo Contest, in which we encouraged designers, artists and photographers to go out with their cameras, shoot attractive typography and public signage and send us the results. The more obvious subjects we received were street signs, building facades, highway markers and road signs, as well as wayfinding graphics (i.e. directional signage) in public venues, subway signs, hotel and office signs and signs in shops, too.

Wayfinding and Typographic Signs - Suicide Signage

The winner of the digital SLR camera, the Canon EOS Digital Rebel XS (EOS 1000D) is Julian Salaun for his photo "Suicide Signage", taken in the underground tube in Paris (see picture above). That's a sign you wouldn't normally notice; the unconventional perspective is attention-grabbing and makes the photo stand out with its almost ironic placement. Very unique, very original shot. Congratulations to you! (You should have been contacted by now.)

Read more...

iCandies Icon Set: 60 Free Icons For Your User Interfaces and Apps

Today we are glad to release iCandies Icon Set, a set with 60 high quality icons in 64×64px, 48×48px and 32×32px, available in .EPS, .AI and .PNG. The set is designed by the talented folks from IconEden on a sole purpose of giving your projects a sleek and geeky style or provide crisp, attractive icons for your modern and fashionable-looking interfaces. All the icons in this pack — 60 icons in total — are designed in Round Rectangle shape.

iCandies Icon Set

You can use the set for all of your projects for free and without any restrictions. You can freely use it for both your private and commercial projects, including software, online services, templates and themes. The set may not be resold, sublicensed or rented. Please link to this article if you want to spread the word.

Read more...

The World Of Signage Photo Contest: Join In and Win a Digital SLR Camera!

Typography and icons are everywhere: they surround us, guide us, help us find the right path every day. As Web designers and graphic artists, we can learn from observing the type and public signage around us. How do designers of those graphics combine type, visual design and pictograms? How do they guide us through our day? More importantly, how do they design their graphics to meaningfully serve their purpose in particular settings? [Content Care Dec/22/2016]

Amsterdam Schiphol Airport: Signs

Read more...

55 Beautiful Free High-Quality Fonts To Jazz Up Your Designs

Every now and then we look around, select fresh high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your current projects. We search for them and find them so that you don’t have to. [Links checked & repaired March/03/2017]

In this selection, we’re pleased to present Piron, Nobile, St Marie, Code, Arcus, Crimson Text, Quadranta, Juice, Prociono, Mr Jones, Ibarra Real and various useful symbol fonts. Please note that some fonts are for personal use only and are clearly marked as such. Please read the license agreements carefully before using the fonts; they can change from time to time.

Read more...

50 Useful Tools and Resources For Web Designers

An effective, well-organized workflow is an important asset of professional web designers. The more useful and time-saving your tools are, the more time you can focus on important things, thus creating a foundation for timely good-quality results. The problem is that there are just way too many tools, services and resources out there, so it has become difficult to keep track on them and find those tiny little time-savers that will spare you headaches and save time in a long run.

Screenshot

And this is where we come in. Back in old days, Smashing Magazine used to publish lists after lists, with plethora of links that covered different topics all somehow related to web design and development. We have undergone quite a development since then, and are now publishing almost only in-depth articles — written by some of the best professionals in the industry. However, useful, carefully prepared and filtered lists are still useful, and therefore we keep publishing them as well.

Below you'll find 50 useful tools and time-savers for web designers and developers. Among other things, you will find recently released tools, useful reference sheets, articles and further resources. Such posts are prepared over months, each containing resources found, reviewed or bookmarked by the Smashing Editorial Team. We hope that at least some of them will help you improve your workflow!

You may be interested in the following related posts:

Read more...

Free Full Layered Facebook GUI PSD Kit

In this post we release a free Facebook GUI PSD Kit, designed by SurgeWorks and released for Smashing Magazine and its readers. The main idea behind the kit is to speed up the prototyping of Facebook application UIs and Facebook fan pages, thus sparing you from drawing all the comps and letting you customize all the texts, buttons and data as you need. As usual, the kit is free to use in all projects, without any restrictions.

The kit brings the Facebook vector icon and logo. Also, since the focus of this resource are the UI elements, it brings a main window with the header, menu and the chat window for you to set up your realistic mock-ups. Plus all the modal components, comment boxes, buttons, message boxes, tabs, etc. All the components are full layered, built using vectors and blending options, so that scaling and editing the objects will not be a problem.

Read more...

50 Powerful Time-Savers For Web Designers

Being a web designer is not easy. Not only do we need to have a good understanding about visual design, typography, information architecture, psychology and a plethora of other disciplines; in our work, we need to take care of so many details, so that our job becomes more and more time-consuming, requiring dozens of tools, attention span and an effective workflow for beautiful, timely and functional results.

Screenshot

And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine's readers. Whether you like lists or not: this one will probably help you find those little nuggets out there that will help you avoid headaches and stress. Below we present useful time-savers for web designers.

You may want to subcribe to Smashing Magazine's E-Mail Newsletter (32,600 subscribers) to keep updated about new useful tools, techniques and resources. The newsletter is sent out once every two weeks.

Read more...

Start Using CSS3 Today: Techniques and Tutorials

We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn't make sense to use CSS3 today. Yes, Internet Explorer doesn't support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).

But it's OK to accept that Web is a dynamic medium, and it's OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn't make sense to keep looking back, being afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. And this is why we keep publishing articles about CSS3.

CSS3 Leopard-style Stacks

In this post we present an extensive round-up of CSS3 techniques, tools and resources that will help you learn how to use CSS3 in your designs right away. We have grouped most useful articles by the corresponding properties, described what browsers support what properties, presented alternative JavaScript-based approaches and workarounds for Internet Explorer and added a couple of links to useful CSS3 generators and tools in the end of the post.

You may be interested in the following related articles:

Read more...

↑ Back to top