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.
Popular tags in this category: Web design, Typography, Design Legacy, Navigation, Forms, Mobile, Techniques, Showcases, UI Design.
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...Data visualizations and infographics can make complex datasets easier to understand and comprehend. By creating a graphical represenatation of data and statistics, complicated concepts and information can make more sense in less time. Many visualizations focus on representing a specific set of data or statistical information. Others focus on less-concrete topics, providing a visual representation of abstract concepts. Generally speaking, the first type appear more like graphs or charts and the latter are often more creative and imaginative.
But visualizations and infographics can be used poorly, too. Putting in too much information (or not enough), using improper formats for the information provided, and other failures are common. Below are more than 25 useful resources for infographics and data visualization. Most are galleries of effective graphics though some also provide how-to information for information designers.
Also consider our previous articles:
Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site's architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.
Below are more than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available. There’s information on everything from paper wireframing techniques to using programs like Adobe Illustrator for the wireframing stage of your designs.
Read more...Even with a relatively limited set of options in CSS, typography can vary tremendously using pure CSS syntax. Serif or sans-serif? Large or small font? Line height, spacing, font size and padding... The list goes on and on.
To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We've chosen popular newspapers, magazines and blogs as well as various typography-related websites.
We've carefully analyzed their typography and style sheets and searched for similarities and differences. We have also put together a spreadsheet of the study that displays the websites' various values (for example, the ratio between the line height and line length).
Read more...There are thousands of good websites out there offering web design and development tips. It's a bit much to sift through in most cases. There must be an easier way. Enter the email newsletter. What could be better than sitting back and waiting for the newest design and development news to be delivered to your inbox? Here is a rather short list of great newsletters devoted to web development, design, and related topics.
To keep track on our next posts, subscribe to our RSS-feed 
and follow us on Twitter 
. Any ideas or suggestions? Comment on this article!
Every now and again we take a 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 the time you should be investing in your current projects. We search for them and we find them, so you don’t have to.
In this selection we’re glad to present you Calluna, Andika Basic, Mentone, Sovereign Regular, Medio, Tiresias Infopoint and many other high-quality free fonts. Please read the license agreements carefully before using the fonts — the license can change from time to time.
Read more...This post is a second part of the article Clever PNG Optimization Techniques that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.
This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size.
You may want to take a look at the following related articles:
Read more...
Opportunity: WellnessFX, a fast-growing health 2.0 company based in The Mission District in San Francisco, is looking for an engineer with skills in front-end…
YAGER is currently seeking a talented and experienced Game Systems Designer to join our pre-production team of yet unannounced title. Join us in shaping the direction…
With a commitment to quality content for the design community.
Smashing Media Made in Germany. 2006-2013. Impressum