“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
Author: Dr. Axel Rauschmayer
Available: Read Online
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
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
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
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
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
10. Book of Speed
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
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
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
15. Magic of CSS
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
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.
- Concept 1 reflected “what Sony would do if it built computers.” I didn’t really like this me-too idea, but in 1982 Sony set the standard for producing high-tech consumer products that were smarter, smaller, and more portable, and Steve felt that their cool, sleek design language offered a good benchmark. One interesting feature we developed while working on Concept 1 was the modularity of cabinet elements, which enabled identical housing parts to be used on multiple products. This feature made the tools for the injection molding process more economical, but it also required longer assembly times, which raised production costs.
- Concept 2 was to express “Americana” by reconnecting high-tech design with classical American design statements, from (naturally) the Coke bottle to Raymond Loewy’s streamlined designs for office products and Studebaker and the Electrolux line of household appliances. This concept was most in-line with Apple’s thinking back then, but the asymmetrical monitor and otherwise somehow stylish shapes that we developed for this concept would have aged too quickly. At the beginning, though, this design was the most popular within Apple’s team.
- Concept 3 was left to me. It had to be as radical as possible—and that was a cool challenge.
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!
Yar, Matey! Let’s Set Sail to 23 Web Destinations.
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.
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 ReyWith 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’).
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.
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.
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.
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.
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.