“For the 16th year in a row we decided to show you a taste of what OFFF preparations seem like. The school of Atelier worked on a campaign with a twist to show off the reality of every OFFF member and OFFF speaker every year: a mix of pure craziness, hard work, adventures, nervousness and fun! Watch this only at OFFF next May 2016!”
A behind-the-scenes look at building Google’s visual framework. Find out more about material design at www.google.com/design.
Whenever you are a newbie designer, or an advanced pro, the Web always has some interesting reading for you. Looking for a little experience in wiring SVG, building web apps or becoming a full-time freelancer? Well, there is no need to drown in hefty books. There are a lot of short, but useful ebooks which can help you become a pro in a particular subject. And the best part of these ebooks is that all of them are completely free to download!
So, scroll down and enjoy a showcase of 15 free ebooks for web designers and developers to take your skills to the next level. Some are available as PDF and other formats, while others can only be read online.
In this guide, you’ll find a detailed introduction to writing SVG (Scalable Vector Graphics) and get an understanding on where to start. Using clear examples of fruit images and brief description of attributes, you’ll learn SVG step by step with this handy pocket guide. Also available in Portuguese.
Author: Joni Trythall
Available: Read Online
This ebook would be useful for both newbie Javascript programmers and for seasoned JavaScript programmers as it features the topic in-depth. The author continuousyly blog about Javascript and his other interests on his blog2ality.com
Author: Dr. Axel Rauschmayer
Available: Read Online
Learn the origins of progressive enhancement, its mechanism, philosophy, and a lot of practical ways which you can apply progressive enhancement principles using JavaScript, HTML, and CSS in this 6-chapter book.
Author: Aaron Gustafson
Available: Read Online
The 27 pages of this short ebook will walk you through the key classifications for typography. It covers a quick history for each classification and core characteristics of the style.
Author: Jacob Cass
Available: PDF
This guide includes 11 awesome tips on how to build a great WordPress site. If you’re a newbie on this matter and who is just going to install WordPress, this ebook was written for you.
Author: iThemes Media
Available: PDF
This is a 15-chapter ebook by Jeremy Saenz, which will teach you how to quickly build web applications using the Go programming language.
Author: Jeremy Saenz
Available: PDF | ePUB | Mobi | Read Online
It’s never too late to turn your site mobile. Learn what is responsive design, mobile sites and mobile apps, and the tips you need to turn a site mobile-friendly.
Author: iThemes Media
Available: PDF
It contains exercises, interactive examples and walkthrough lessons to get you started on building your canvas app. It is advised that you should know a bit Javascript and HTML before going into this book.
Author: Josh Marinacci
Available: Read Online
In this really short ebook you’ll get to know the key differences between landing pages and home pages, why they are so important, and how to build smart cool landing page, all in less than 20 pages.
Author: iThemes Media
Available: PDF
The book of speed by Stoyan Stefanov is an online, free ebook about web performance. It begins by focusing on the business implications of web performance: why speed matters to the bottom line, and then moves on to changes that can make the performance better.
Author: Stoyan Stefanov
Available: Read Online
This ebook written by Five Simple Step’s founder Mark Boulton. The ebook covers 5 main chapters including topics like research and ideas, colors, typography, layout and what to expect if you are going into the world of web design.
Author: Mark Boulton
Available: PDF
There is so much outdated info on the Web that leads new PHP users astray. This ebook if here to stop that. PHP: The Right Way is an easy to read and understand ebook with PHP best practices and links to authoritative tutorials.
Author: Josh Lockhart
Available: Read Online
This book was written by the founder and CEO of iThemes, specifically for developers. It will tell you how to build your portfolio, work with clients, develop good communication skills, and inspire you to keep learning and exploring.
Author: Cory J. Miller
Available: PDF
Do you want to be a full-time freelance web designer, but have no idea where to start? This ebook will tell you all pros and cons of a freelance web designer career, along with some practical tips how to build a strong business in this field. You’ll learn how to make money, be more organized, find new clients, and more.
Author: iThemes Media
Available: PDF
There are six chapters encompassing the box model, layout, table layout, color, typography and CSS transitions. The book is easy to understand, well written and full of interactive examples to keep things interesting.
Author: Adam Schwartz
Available: Read Online
via hongkiat.com
Most logos aren’t designed in fifteen minutes, but most designers aren’t Aaron Draplin. Aaron’s a Portland fixture by way of the Midwest, the owner of Draplin Design Co., and an advocate of “blue collar” design: design that works. Here he takes our logo design challenge, creating a dozen iterations of a logo for a fictional construction company. Not inspired? Just wait. Watch as he sketches, brings his ideas into Illustrator, and tests and tunes the different iterations. The logos Aaron creates prove design can elevate any company or brand. Along the way, he provides tips for freelancing, finding inspiration, and providing clients context for logos that won’t just live in PDFs.
Here we present an inspiring collection of interface designs for mobile devices, which we’re sure will give you some ideas. Enjoy!
In October 2013 frog founder Hartmut Esslinger will publish his new book Keep It Simple – The Early Design Years of Apple, an insider’s account of the origins of Apple’s iconic products and brand. “Keep It Simple” is the story of Steve Jobs’ quest in the early 1980s to bring a radically new design language to the historically desert-dry sensory experience of computer technology. This process started with the so-called “Snow White” project, a design competition won by frog. Eventually, Snow White would change the trajectory of the company’s future, and redefine the way we think about consumer electronics and technology today. We invite you to read an abridged chapter from Hartmut Esslinger’s new book.
+++++++++
The Snow White project briefing was thorough and well-written but I knew that the process and setup it proposed would prove inadequate to the task of meeting Steve Jobs’ goal of creating designs that were “the best in the world.” I was determined to help him achieve that goal.
It became very clear to me that we were competing for an opportunity to help Steve Jobs create much more than a visual design language. Apple needed a cutting-edge system that would enable Steve to translate his vision into marketable products, and frog was in the process of helping him build it. We were involved in a real revolution – one that would extend well beyond the changes our work would bring to Apple. The work we were doing both in our Black Forest studio in Germany and in that small office in Cupertino would go on to reshape the way design was seen throughout America and the world.
Setting Goals for Apple’s Design Language and Visual Brand DNA
In the most simple terms, a design language is a visual system made up of defining signature and shape elements, materials, colors, patterns and textures, which provides a line-up of products with a unique but consistent look and feel. A design language isn’t about a specific product or style; it’s about forming a visual brand DNA that expresses a company’s true potential, as well as the founders’ unique values and (hopefully) visionary goals.
For high-tech-industrial companies, any design language must be both special and simple, because the lifecycles of strategy, design, production, usage and recycling attached to these products are extremely long. And, because the products’ precious technology has to be enclosed in some form of housing, the design language expresses its semantics through the character of the product shapes and human/machine interface. Designers in this arena are faced with the challenge of synchronizing the lifecycles of the products with that of their design. Technology changes at a fast and furious pace, but human change is very slow. Through some very hard lessons, I’ve learned one key principle for dealing with this lack of synchronicity: technologies come and go, but brands have to live on. Put simply, culture always wins.
I saw the historic opportunity Apple offered in 1982: only three or four product lines and a dynamic startup with an ambitious, visionary founder who wanted design to carry Apple’s products to international prominence. But, I also saw Apple’s organization-wide lack of design and supply-chain savvy. Steve and I were looking to each other to fulfill our most pressing needs; together, we had to innovate a means for bringing the expression of “the invisible” to the realm of design. We wanted Apple’s design language to go beyond its products’ functional and aesthetic aspects; we also wanted it to express the new spirit of computers as “thinking machines,” by both rooting them in history and projecting them as extensions of the user’s psyche.
Moreover we wanted Apple’s design language to converge physical and virtual statements into a holistic experience, which posed challenges of incredible complexity. Steve’s passion for closed (versus open) systems was based on his understanding that such complex functionality can be humanized only by controlling all aspects of technology, including hardware, software and content.
As a result of that passion, I believe it’s accurate to say that we set a benchmark for human-driven, high-touch design for the entire digital consumer industry. I take some personal pride in the fact, that when Steve returned to Apple in 1997, Jonathan Ive—Steve’s choice for Executive Vice President of Industrial Design—picked up where we had left the company’s design language in 1985 and continued the basic “Keep it Simple” rule that Steve and I had established. The process of formulating and following that goal involved multiple phases, a lot of frustration, but—ultimately—many victories.
Phase One: Developing Options
Each design project starts with research to discover what’s out there, and to explore the possibilities of what could be out there, but isn’t. When we launched the Snow White project, my intuition told me that the possibilities for improving the design and manufacture of personal computers were almost limitless. At the time, computers offered little in the way of design capabilities, but the technology was advancing rapidly. Computer performance was growing, physical sizes were shrinking, and—thanks to “professional” pricing vs. “consumer” pricing —the industry’s profit margins were still healthy. Personal computers were in their infancy, and Apple had an edge in that arena with its use of Xerox Parc’s bit map user interface that would appeal to everybody.
At the time, most of Apple’s products were primitive in their mechanical design, and their manufacturing costs were absurd: the Apple IIe’s housing alone cost more than $100 net, and the Apple III’s cost even more. I knew we could do better in both quality and cost. By leveraging the advanced production methods of electronics in Germany or Japan, I projected that Apple could lower its housing costs by 70 to 80 percent. So we decided to use the same technically radical design approach for Apple’s products that we used for Sony’s. In fact, we could make the designs even better and more ecologically sound by avoiding metallic paint, which had become the standard for consumer electronic products.
Essentially, we had to create a new paradigm for computers as the first mass-produced, industrial form of artificial intelligence. As I explored ideas for designing the “face” of this new product paradigm, I looked at history, in particular Native American mythology, because I thought that Apple’s design should be rooted in the West Coast’s past. I discovered the geometric sand paintings of the Navajo, and then the art of the Aztecs, whose anthropomorphic reliefs often resembled astronauts. Those images inspired us to design Apple’s computers to look like little people, and to transform the display screen into a face. We were taking our first steps forward.
After talking to Steve and other executives at Apple, frog identified three concepts that we would explore for further development. One of these three would represent frog in the Snow White competition.
The breakthrough moment in the development of Concept 3 actually came to me one day when Steve Jobs called to check in on my progress. I hadn’t been making much progress on the concept and so, having no idea what to say, I scribbled some designs on paper while Steve talked. Suddenly, I thought about “lines”—lines of printed text, lines of code, always of equal length—that could be used like a grid. The lines created a geometric form, so I sketched a Mac with an integrated monitor in the shape of a “T”, with the upper bar being the front of the monitor. I completed the sketch within seconds, and when I described it to Steve, he said “great! I want to see it.” Glancing at my rough sketch, which was all I had to show for Concept 3 at the moment, I asked when he would be coming back, feeling very grateful for the distance that separated my Black Forest studio and Steve’s California offices. That feeling vanished when Steve replied: “I just checked the flight schedule here in London, and I can be in Stuttgart later this afternoon…why don’t you pick me up.” Now, I had a problem.
I made some quick technical drawings based upon a modified layout of the computer and monitor; the lines and stepped slabs actually worked really well on paper. With our model-makers hard at work on a couple of quick foam models in three variations, I set out on the hour-long drive to the Stuttgart Airport. When I returned with Steve on his first visit to the frog studio in Altensteig, our model-makers had worked a miracle: three nicely shaped and painted models were on the table, along with some rough-cut sketch models they had used to test the variations (I had left them measurements for the variations, but no drawings). Steve loved the models. Then he looked around our model shop and right away insisted that I bring the same set-up to California, near Apple headquarters.
We’d done it. Steve was excited and, with his input, we obviously had a direction worth pursuing. As a nice side effect, the stepped slots in the line-based design for Concept 3 enabled us to reduce the wall thickness of the case by nearly 40% and place well-hidden ventilation openings in any location where they were needed. Ventilation had been the focus of many of our discussions with Apple’s engineers, because the hardware would generate heat in so many places. Steve was so happy with the lines-and-slates approach, that he insisted we also apply the design to a new Macintosh (a decision later dropped due to internal opposition). While some might rightfully point out that a few hours of frantic work under stress cannot be called “strategic,” I contend that the stress of that day brought weeks of work into a clear focus, and our process remains a great example of the genesis of a creative design strategy.
I was happy that we could continue developing our best design idea. Concepts 1 and 2 had been well–founded, proven design statements, but Concept 3 was our ticket for a voyage toward a mysterious destination. It also would become the DNA for the Snow White design strategy and visual language.
Phase 2: Defining Concepts and Strategy
We shipped the first set of models to California, and after discussions with all of Apple’s teams, we agreed that Concept 3—lines, slates, no angles (except for transitions), and white (or as nearly white as possible)—was the way to go. The next phase was about getting feedback and input from Apple’s key people. Steve wanted us to look years ahead in our design process, so it was important that we hear as many ideas as possible, no matter how crazy or off-the-wall they might seem. Programmers like Andy Hertzfeld and Bill Atkinson spoke about software almost poetically, though their screens showed only lines of abstract looking code—the very lines that had supplied one of the initial inspirations for Concept 3.
I was also inspired by Bill’s prediction that the computer’s bulky, physical technology of monitors and CPU boxes would eventually give way to elegant “slates” or “pads.” Almost twenty years later Apple would introduce these innovations in form with its iPhone and iPad.
The visual DNA for Concept 3 was a good start. But, after I’d had multiple discussions about the technology and possible trends with Apple’s managers and engineers, Bill Atkinson challenged me to take my designs further. He encouraged me to focus more on projections for future developments, such as flat screens, touch interfaces and devices that merged telephones with computers. Back in Germany, frog went to work again, responding to this challenge with
conceptualizations of a wireless-mobile flip-phone, a touch pad computer—labeled Mac Slate—and a laptop computer that had a large screen the same width as a standard QUERTY keyboard and a touch interface—a design we labeled the “Mac Book”
Once again, we went to California loaded down with models, sketches and presentation materials. When Steve presented the Mac Book model to the Mac team as “the next Macintosh we will build,” a product he assured them was created just for journalists, they gasped in disbelief. But, I knew this work was extremely important. After more than a decade in electronic design, I had seen many technologies and tech companies come and go, and I was sure that Steve was moving Apple in a necessary direction—toward a design strategy that went beyond computer boxes, keyboards, mice, and monitors—that would bring the company success, not just survival. Steve loved the progress we were making although I had gone too far for some of Apple’s designers and their engineering bosses.
Phase 3: Final Design
Now we went into the final stage of the competition. We created a complete list of the product lines that would carry the Snow White design language by adding product categories such as connectors, ergonomic workstations with integrated phones, and innovations for portable computers and touch-tablets. Once again, we fine-tuned the designs and built myriads of foam models that were perfectly accurate in both scale and appearance. After shooting photos of our work, we packed up all of the materials for our final presentation to Steve and Apple’s board of directors. We put our logistics in place, also making sure that no glue, paint or filler would bubble or dissolve in the belly of a cargo airplane, and that we had an extra window of time for our materials to pass through customs. The models still arrived at Apple just two days before the Board meeting in March.
Our final presentation consisted of more than 40 hard models, a slick, professionally photographed slide presentation, and full-scale technical drawings. To showcase the presentation, we turned a room at Apple’s Mariani Building into a show room; even by today’s high standards, it was one of the best presentations I can remember. Steve was really excited and so was Apple’s Board. An hour later, we learned that we had won the competition. Although I had never doubted the outcome, it was a very exciting moment.
To make our success complete, Steve and I negotiated a sound process for implementing the Snow White design language. We agreed that frog would provide full design services under his direct report, and that Apple’s designers would be integrated into one group, reporting directly to me. We also defined design’s relationships with Apple’s engineering and marketing teams as collaborations. We knew these fundamental changes would provoke some resistance within the company, but Steve and I agreed that we had to move forward with them. I also created an economic plan for the work ahead. Steve stood by his word: Apple awarded frog an annual $2 million contract (close to $5 million in 2013 dollars) and put us in charge of all designs at the company. Even though, legally, I remained a consultant, I was named Corporate Manager of Design. Now, the real work would begin.
Steve Jobs had acquired a new look and direction for his company, but he had also advanced his understanding of his products and their effects in the marketplace. He had embraced a new way of design management and the new concept of simple, additive shapes, standing boldly in white, with no added color. For Steve, everything was black or white. That kind of direct, take no-prisoners mentality, combined with his unique ability to listen to new ideas and eventually change direction when confronted with a better way, made him an ideal partner for progress.
With our guidelines in place, we were ready to begin our work at Apple. Snow White had been kissed awake—not by a prince but by a frog.
+++++++++
Original Sketches, made during meetings with Steve Jobs
Original meeting notes, made during meetings with Steve Jobs
Apple FlipPhone 1984
Apple Minimal Phone 1984
Apple Wrist & Ear Phone 1985
Apple //c Studies 1983-84
MacSlate Touchscreen 1984-85
Could you imagine landing on a website with no navigation? It would be like trying to find your way in the ocean with no compass. It would be terrible.
Lucky for you, most sites have at least some kind of navigation, so you’re not completely lost. Recently, the Betterment blog featured a UX Flows post on navigation, where we discussed the importance and function of navigation in a web site. Navigation is critical — and it’s safe to say that some sites do it better than others. For this post, we’ve decided to take a look at some navigation that’s breaking the mold.
Take a look, and say “ahoy” with your thoughts in the comments!
1. Disqus
Disqus offers simple and effective navigation. The streamlined header is highlighted in white, which stands out against the blue background, and a footer navigation also appears with more options after scrolling down.
With a different approach, Big Spaceship offers left sidebar navigation that expands from a menu icon that is similar to what you see on mobile sites. The nav is easy to find in the upper left hand corner of the main landing section, which displays a paint splash animation against a black background.
3. Dataveyes
Upon loading, the Dataveyes navigation is conspicuously displayed in the center of the header, but then shrinks to a mobile navigation icon, allowing you to easily access the information without intruding on the content.
4. Glossy Rey
With contrasting white text against a black background, the split navigation header is easy to locate and offers a really cool hover animation for each menu option.
This single page, anti-navigation website is captivating and organized — users can still find their way around the site with ease.
6. Equus Design
Simple, clean, and minimalist, the navigation design for Eqqus Design pops against the page’s dark background.
When you land on Miss Julia Piep’s page, the company logo is centered with a row of five menu options below it, and when you select an option, the responsive navigation moves to the top of the page. Neat.
8. Teehan + Lax
Teehan + Lax’s mobile navigation icon flies out to offer six menu options that you can later close.
Danielle LaPorte’s nav is fancy, as the navigation responsively appears in both the header and the footer as you scroll. Best of both worlds!
10. Olympic Story
A mobile nav icon flies out to be a substantially sized sidebar menu that also can be closed. Boom — mobile can be anywhere and now it is.
11. Curad Mir
Users’ attention is drawn to the upper left hand navigation icon, and without even clicking — just hovering over the icon — a menu sprawls out along the top bar while a white frame outlines the page.
Neatly tucked under the company’s logo with an arrow that implores you to click, the mega- navigation flies out to offer three main categories of navigation with multiple options below it. For sites that have a ton of content, neatly organized mega-menus with flyouts are where it’s at (jussayin’).
13. Lexus
This navigation is different from most top bar menus. Lexus layers it up with a full navigation bar that flips out directly below the “MENU.” Layers of navigation = layers of fun. (Plus the option to use your keyboard!)
14. P’unk Avenue
P’unk Avenue’s navigation keeps it easy breezy for users with a horizontal grid-esque design at the top of the page that’s also numbered, titled, and provides a short, one-sentence description of what you’ll find.
15. SRG
It’s the circle of navigation! The pageless design is navigable by way of a responsive hero area circle navigation. I clicked to learn more — would you?
16. I Think I Might
Easy to use icon navigation in the upper right hand corner of the page makes navigating this site caveman-picture simple.
17. Zaarly’s Employee Handbook
Zaarly’s nav starts out as a boring mobile icon — then BOOM! Fun, full-screen navigation with color bar menu that cascades down and across the screen. I love it when designers realize the nav doesn’t have to be boring.
18. Editer
Speaking of top bar navigation menus, Editer provides us with just that, but the flyout feature enhances the experience and organizes the content, which is essential for mega-sites.
19. Firestorm
The Guardian’s completely interactive site is exploding with drool-worthy design aspects. The vertical navigation menu is easy to see but doesn’t take away from what’s going on visually — and it’s educational! Bonus!
Petersham Nurseries gives you two navigation menus: vertical navigation menu on the left, providing new users with information on the company, and a horizontal navigation menu on the top right for account holders.
21. NKI Studio
This site’s navigation commands attention from a different perspective in the bottom left of the page.
22. Cloud Nine
Cloud Nine has left side icon navigation in a blue colorblock bar, which nicely complements the responsive, pageless design.
23. Pervasive Light
Pervasive Light’s light bulb nav is exciting with an electric wiggle mouse over feature. The nav also smartly flies up and out of the way when users reach their destination.
via dtelepathy.com
BLOKK fontBLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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 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.
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.
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.
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
espaco99 