This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
Popular tags in this category: Web design, Typography, Design Legacy, Navigation, Forms, Mobile, Techniques, Showcases, UI Design.
Your invoice should be prim and proper, so that you can get paid by your clients efficiently. While invoicing is not a fun task, it's a necessary one: by keeping clients informed of your expectations, you will get paid punctually and reinforce your professionalism. After going over some best practices for creating invoices, we'll review some great (and not so great) online invoicing tools, so that you can spend less time creating invoices and more time doing the things you love!
Their details and yours. This is Mickey Mouse stuff, but you can't afford to forget it. In addition to the client's address, make sure to include the name of the client's contact person who handles your account! A company with three employees can figure out what you're doing; but in big companies, invoices get misplaced, especially if there's confusion over who belongs to which project. Read more...
One of the biggest advantages of online media over print is the ability to change, update, and enhance online media at virtually anytime, with virtually no negative side effects. In fact, if a website or web application does not continually offer its users an ever-evolving and growing experience, that site or application would soon become insecure, unusable, and out of date.
In this article, we will discuss ways that web designers and front-end coders can keep their websites relevant, timely, and accessible long after a site's launch. This guide goes beyond simple text and graphic updates, common "best practices" for CSS and XHTML, or other things you might see in a typical website checklist. We'll expand on many of the basics, and provide some effective tips for website maintenance geared towards front-end designers and coders. Read more...
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs. Until display manufacturers produce affordable 200 or 300 PPI monitors, we'll have to rely on software advances to fix these problems.
Enter anti-aliasing: the next best thing to a world of higher-resolution monitors. The concept of anti-aliasing is fairly simple: add semi-transparent pixels along the edges of letterforms to smooth the appearance of the "stair-step" effect.
However, many factors and technologies determine the actual effectiveness of the process: hinting, subpixel rendering, software capabilities and operating system specifications, to name a few. Here, we'll look at what you as a designer can do to improve the results of anti-aliasing with Photoshop, Flash and CSS. Plus, we'll explain the constraints of hardware, browsers and operating systems. Read more...
A lot of designers think CMYK is the way to go when designing for print. We will, of course, always use CMYK-based ink, but this does not mean you have to work with CMYK files. You can work with RGB images to perfectly optimize your print colors and save a great deal of time in the process.
For several of the following tips to work, you will have to create and save all of your Photoshop images and artwork in RGB color mode. If you're a veteran designer, you probably think this goes against what you've been taught, which is to use CMYK color mode. Well, technology has come a long way, and nowadays RGB color mode is better because it produces a wider range of colors and allows you to use one image for several media, including print and Web.
You may be interested in the following related posts:
There he goes, the web designer, stepping up to the counter of an empty McDonald’s at 3 o’clock in the morning. He is scanning the overhead menu, putting a cheeseburger in his mental shopping basket. “Cheezubahga, onegaishimasu,” we hear him say, “with an iced tea.”
Waiting for his order, he examines the wireframe of the display on the cash register, the mechanical logic of the deep fat fryers, the input/output logic of the ice cream dispenser. Coming late from work, with his mind still in design mode, he starts tracing the restaurant’s interaction model, drawing arrows from the entrance to the counter to the tables to the trash cans; seeing how the conveyor-belt kitchen, the trays with the paper liners, the bolted down seats and the meals comprise a single, complete customer interface. “They must have run usability tests,” he thinks, taking his tray to the table. Read more...
Let's face it: Web-safe fonts are very limiting. Maybe a dozen fonts are out there that are widely enough adopted to be considered "Web safe," and those ones aren't exactly spectacular for much other than body type. Sure, Georgia, Arial or Times New Roman work just fine for the bulk of the text on your website, but what if you want something different for, let's say, headings? Or pull quotes? What then?
You have a few options. Many people just opt for more elaborate CSS font stacks, with their preferred fonts up front. But that still leaves a big chunk of your visitors seeing the same old Web-safe fonts.
Enter dynamic text replacement. In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don't use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text. Read more...
What would you do if you were suddenly stranded on a desert island in the middle of nowhere, with only a USB drive, a dial-up internet connection, and a barebones computer with no software outside the operating system installed? Of course, you'd use the internet connection to call for help first, but what about after that? How would you keep your design business going?
Okay, maybe a scenario that's a bit more likely would work better. What if your computer crashed, wiping out all of your data and programs, and you have a deadline in two days? Or maybe you want to be able to pick up and leave at a moment's notice without taking anything more than a change of clothes and a USB drive. If you have the apps below, neither of those scenarios would be much of a problem.
The apps on this list can help you with everything from coding to graphics to running your business and managing your projects, all from a single USB drive. And while USB drives are getting bigger all the time (last I checked a 64GB one wasn't too badly priced, and that's 4GB more storage than my current MacBook has), you still need special programs in most instances to have true portability. The apps below are just that: truly portable and small enough to fit on a USB drive (often a very small USB drive). Read more...
Smashing Magazine has been on Twitter for about a year now (@smashingmag), and it turned out to be a great medium to communicate with our audience, build connections, discuss design-related topics and give away some nice prizes. However, even a year later, we still don't have a Twitter background page and now is a good time to change that. So because we decided to create our own Twitter page, we wanted to first find out how other designers do it and what tips and techniques they use to create a truly outstanding, beautiful Twitter page.
Your profile page is the only place on Twitter where you get opportunity to showcase your visual brand and possibly communicate additional information that can last longer than a tweet. You can customize your profile page by changing background, text and link colors. It's as simple as changing the skin, but ability to change background image has allowed designers to create really unique profile pages.
Primary focus of this article is to explore various techniques to create unique, memorable and effective Twitter profile pages. However, before proceeding to the list, it is important to briefly discuss the structure of the Twitter profile page. Read more...
In our recent study on Typographic Design Patterns and Best Practices, we asked our readers about case studies they would like us to conduct. One of the most popular suggestions was a detailed case study of portfolio websites. Following the requests of our readers, we have carefully selected 55 design agencies and Web development agencies, analyzed their porfolio websites and identified popular design patterns. The main goal of the study was to provide freelancers and design agencies with useful pointers for designing their own portfolio.
This post presents the initial results of our big portfolio design study. Below, we discuss the visual design, structure, layout and navigation of portfolio websites. We also get into the design details of every single section, including the about, clients, services, portfolio, workflow and contact pages. Of course, you do not necessarily have to follow the findings presented here; rather, use them to get a general idea of what other portfolios look like, and then come up with something of your own that is usable, distinctive and memorable. We would like to thank Mark Nutter for helping us gather data for this study.
The second part of the study will be published here, on Smashing Magazine, in two weeks. Hence, please subscribe to our RSS-feed and follow us on Twitter.
Any ideas or suggestions? Maybe there is something else that you would like us to analyze additionally in this study? Comment on this article — we are listening! Read more...