This tutorial will teach you how to create a responsive web page with buttons which take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “purchase” or “delete” where it’s wise to confirm that the user indeed wants to take a specific action. This interaction is one that many are familiar with; you can see a similar effect in Apple’s app store when purchasing apps.
A portfolio is a must-have for any designer or developer who wants to stake their claim on the Web. It should be as unique as possible, and with a bit of HTML, CSS and JavaScript, you could have a one-of-a-kind portfolio that capably represents you to potential clients. In this article, Daniel Sternlicht will show you how he created his 2-D Web-based game portfolio.
While certainly not as well known as Photoshop, Adobe Fireworks is a great tool for creating user interfaces, website designs and mock-ups, wireframes, icons and much more. However, most designers who have been using Photoshop for years may find Fireworks a bit awkward at first. Fireworks does have a slightly different workflow and requires a slightly different approach than you may be used to.
Interaction designers create wireframes in tools such as Adobe Illustrator, OmniGraffle and Microsoft Visio. Originally, these wireframes were primitive shapes drawn to represent various UI elements. Many of us cannot imagine life without them.
BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. This article will elaborate on the theory as well as the practice of building websites at Yandex—one of the leading internet companies in Russia. To begin, let’s first put BEM in some historical perspective. Varvara Stepanova first began sketching out the internal front-end framework at Yandex around the year 2007, starting with a robust CSS naming convention, and a file system layout that was associated with it.
The Web font revolution that started around two years ago has brought up a topic that many of us had merrily ignored for many years: font rendering. The new found freedom Web fonts are giving us brings along new challenges. Choosing and using a font is not merely a stylistic issue, and it’s worth having a look at how the technology comes into play.
Some type effects are so common that you may not even notice them in design. Bolding and italics, for example, have dedicated keyboard shortcuts in most all editing software. Many font families also include many variations of the same typeface with multiple widths and slant options. So what do you choose? Where do you draw the line when it comes to good versus poor typography? Simply, keep it simple. Limit yourself to two or three typefaces on your site. Then limit yourself some more and try to avoid using more than three additional type variances. The toughest decision you will be left with is which effect(s) to use.
Responsive web design has been a hot topic for the last couple of years. And why not? The ingredients of a flexible grid, flexible images and media queries are a powerful recipe to help us serve websites to screens of varying sizes. But you should not stop there. To be truly responsive, you must meet your users where they are. Truly responsive sites adapt themselves not only to the screen size of a device, but also to its broader capabilities and settings.
A few months ago Antony and Jerome Ribot decided to rename the "Mobile" section in the mag's showcase gallery as "Responsive". Whether you agree with Jakob Nielsen and Josh Clark, or you are somewhere in the middle, Responsive Web Design is an important concept and more and more businesses are taking the leap. It's a development that's not going to go away and one that deserves more coverage.