articles on

Real Scale Drawings

Real Scale Drawings

I always do appreciate when artists, designers, architects (for this case) takes a different approach to their design process. To allowed yourself and your team to try what we could do to be better next time or the next project. We are featuring Vardehaugen approach at including  Real Scale Drawings and as I quote: "...the bodily sensation of scale or the notion of simply walking through a room cannot be experienced through traditional 3D visualizations or scaled models." Architecture is not an abstract geometrical size, but something concrete that relates to our bodily existence and the world around us. (adsbygoogle = window.adsbygoogle || []).push({}); About Vardehaugen Vardehaugen is an architectural studio based in Oslo, Norway. From private houses to urban planning, this team conduct their work both abroad and domestic projects and they thrived themselves to the design process and well-tailored projects. Every client is different; every place is in some way peculiar and unique. We aim to embrace this in all of our projects. For more information: http://vardehaugen.no

Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days

Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days

I finally finished reading Sprint, a book published by the Google Venture designers Jake Knapp, John Zeratsky and Braden Kowitz. I knew about design sprints, and have had the chance to participate in a few, including one with Jake himself. The process works great if you have the right number of people that are excited about the endeavor of a week of intense and gratifying work. Their book, titled Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days gives all the details and story behind how they came up with and perfected the design sprint. It's a must read for designers willing to improve their skills on problem solving and the design process in general. Read this book and do what it says if you want to build better products faster." – Ev Williams, founder of Medium, Blogger, and Twitter About the book Entrepreneurs and leaders face big questions every day: What’s the most important place to focus your effort, and how do you start? What will your idea look like in real life? How many meetings and discussions does it take before you can be sure you have the right solution? Now there’s a surefire way to answer these important questions: the sprint. Designer Jake Knapp created the five-day process at Google, where sprints were used on everything from Google Search to Google X. He joined Braden Kowitz and John Zeratsky at Google Ventures, and together they have completed more than a hundred sprints with companies in mobile, e-commerce, healthcare, finance, and more. A practical guide to answering critical business questions, Sprint is a book for teams of any size, from small startups to Fortune 100s, from teachers to nonprofits. It’s for anyone with a big opportunity, problem, or idea who needs to get answers today. The key to success, often, is building the right habits. But which habits work best? Sprint offers powerful methods for hatching ideas, solving problems, testing solutions—and finding those small, correct habits that make all the right behaviors fall in place." – Charles Duhigg, author of The Power of Habit Buy now

Gingerbeard Logo Design Process

Gingerbeard Logo Design Process

Chris Bernay, an American designer, has designed a super sweet logo for a film and motion graphic studio called Gingerbeard. He documented the process for our delight, showing his skills and a sweet before and after comparison. Check it out! The final result Sketches and annotations The final sketch Isolated vectors Layouts and monograms Color scheme The evolution Mad skills! GingerBeard's New Logotype - Final Draft from Chris Bernay on Vimeo. For more on the process of the Gingerbeard logo design, please visit Chris' portfolio at Behance. There you'll also find design processes of more logos! I hope you enjoy this! Cheers. ;)

Abduzeedo Material Design - App Navigation

Abduzeedo Material Design - App Navigation

Last weekend I started the process to design the Abduzeedo mobile app and web for Android. The goal is to apply Google's Material Design style to the new app, but in order to do that we have to rethink quite a few things. The first thing we did last week was to get used to the spec, get files, assets and resources ready to start exploring. This past weekend, I spent more time thinking about how the navigation would be and then designing the look of the app. In this post I will walk you through some of the basic concepts I have in my head for the navigation of the app. Navigation One of the apps that I think has a great navigation is Newstand and the Play Store. There are a few things that I like about them: Gestures for navigation Seamless transition for different verticalsl The experience feels natural This model is not new, I remember some of the first iPad apps, was Wired Magazine, if I am not mistaken, used the same style. Actually magazines on tablets still use the same model. Vertical scrolling for the content about that topic and horizontal for different verticals. Some things bother me a little bit: The horizontal navigation limits the interactions for the specific vertical, we wouldn't be able to have another horizontal navigation Discoverability: It gets complicated for users to see all categories, either horizontal or vertical. If users scroll 3 panels to the right, it would take them another 3 screens to expose the navigation. Simple prototype in Keynote Keynote is a great tool for simple motion studies. You can simply create slides and use Magic Move to animate the objects from one slide to the other. Below you can see the simple prototype I put together to see how this idea would look. Based on the blog's stats, we know that users pretty much pass the second pagination. We also know that they don't click on the navigation very often either. The site is pretty much what they see. Because of that I think making the app more browsable will make a big difference. The cost of gesture seems to be much cheaper than the burden on clicks and page requests. The top navigation still bothers me. I would love to have just the content, and not navigation at all. One of the apps that does that really well is Facebook Paper. I like the way they handle the navigation by using real content. There are a few ideas to consider: Expose the navigation when user scrolls, both vertically or horizontally Use the pull to refresh style to expose the navigation Based on simple keynote animations I think a mix of both cases might do the job. The simple wireframes gave me an overview of how the navigation might work. In terms of UX/navigation, the app is quite straightforward and it won't have more than 2 levels of hierarchy. Users see an article teaser and then the full view. The full view might have some related articles, but the idea is that every article details would be a modal, by clicking on related articles, users would leave the modal. By clicking on a different article, users would go back to a modal again. Next week my goal is to prototype this model with HTML and Javascript to test on my phone. Nothing fancy, I just want to see how it feels on hand. After that we can go back to visual and motion design. It's important now to see the big picture, before getting too immersed in the details.

Abduzeedo Material Design

Abduzeedo Material Design

This weekend I started working on an Android mobile version of the site using the Material Design spec. The style-guide is super complete and covers a lot of basic visual design needs like grid system, typography and color palettes. Besides that Google was awesome to provide sticker sheets in Photoshop, Illustrator and Sketch. So for the next couple of weeks I will be exploring some new designs for Abduzeedo and will be sharing with you here. In this first post I will share my first steps, downloading fonts, files and basic layouts. I would love to hear your feedback and also if you want to join the redesign of Abduzeedo please do share and we can definitely apply your design tips and give all the credits to you. Getting started The first thing to do is head over to Google Design (http://google.com/design/) and check out the spec, communities and everything available. After that focus on the spec because there are so many cool things already done for you so you can spend time trying to solve your design problems and improving your product. Typography My idea is to design an Android app, so I will first try to stick with Roboto for the font, but later on I might try to bring back some of our current design which used Varela Rounded. So again, download the font and install it so we can get started. Resources Besides downloading Roboto, make sure you get other resources available on the site as well, including layout templates, sticker sheets and icons. I downloaded the Components sticker sheet for Sketch for my project. Example of the sticker sheet in Sketch. All components I need to start designing my mobile app. References Another important thing is to know where to look for some references. Of course there are much more than just digital references but it's good to see what others have been doing with the Material Design spec. That said, Materialup is a great website with tons of amazing examples from visual to motion design. Designing the app Abduzeedo is a website that is all about images, we started it as a way to share images and other things that inspired us and because we decided to write it in english we were always trying to be short because of the limits of our english skills but also because we knew that there was a universal language commonly understood by all and images do an amazing job of speaking to that. That said for the mobile app, based on stats, we believe there are some things we could explore: Horizontal navigation for different categories (tabs) Full screen images for the featured content like Flipboard Simple yet elegant grid for verticals. Questions we always ask ourselves: Do we need description text besides the title? What metadata do we need to display? Could we not show title at all, just the image? How will we handle ads? Those questions are extremely important for us to set some constraints. Advertising is always the most complicated, at least on desktop, due to the format sizes that usually are fixed and not responsive. For mobile, at least for the first part, I won't bother with ads. I know it's wrong but I want to focus on creating a super compelling visual experience. The first thing I did was to get one layout template. The dark theme looks interesting, but it's quite different from the desktop experience. I won't scratch it off my list but I decided to try a light theme using the tabs navigation. As you can see below, it definitely looks very coherent with our current experience. One version I also explored with the Abduzeedo symbol in the center of the app bar. I know that it's not in the spec, but as I said, I want to explore ways to apply the style but not get limited to it. Another thing that you can see in the mocks, is that I tried to use cards. I am not a fan of cards, but it's important to explore all possibilities. Explorations The navigation with tabs feels good to me, especially in apps like Newstand and Flipboard. There are a couple of issues I encountered: The navigation tends to take a lot of real state. Is there a smarter way to solve that? Facebook Paper does a great job with gesture navigation and pretty much a transparent UI. How discoverable will it be for the users and also how many tabs should the app have? Below you can see some explorations with the Featured screen which would have 1-3 articles using full screen images with big and bold text. Swiping to the left we would have the Recent tabs, which is the current stream of our website. For this session my idea is to have full width content with 8dps space between content inspired by the Inbox. For the vertical areas I explored a grid with just images. The idea sounded good in my head, but the first exploration looked a bit too overwhelming for the users, especially due to the lack of text. It's hard to understand what's going on. These explorations gave me some clear understanding of the direction to follow and that I had to simplify the design even more. Simplifying By removing the navigation the design gets to a level of simplicity that really pleases me. The featured screen really makes the image shine. The grid seems a bit weird, I tried to keep the 72dps left alignment for the title, it works for that screen, but for the Recent screen it was a bit to much, so I moved back to 16dps. To increase contrast, I decided to put the text over the images on a overlay block using a color extracted from the image. The first one you can see has a green color. To make it more subtle I changed the opacity to 70%, that way we can see the photo but still read the text quite well. The logo on the top right works really well, but I have to think about the navigation, that will be a much longer conversation To be continued... This is just the beginning of this process. I will try to keep this going for the next couple of weekends, going through the whole process and ending with dynamic prototypes. As I said, I would love to see you guys trying as well. I am curious to see what you guys would come up with for the Abduzeedo mobile design. So feel free to share with me via comments or via email at abduzeedo@gmail.com. Thanks so much and till next Sunday.

Great Horned Owl Illustration

Great Horned Owl Illustration

Alexis Marcou shared a really cool illustration project on his Behance profile, the work was commissioned by Torre Lazur-McCann for Boehringer Ingleheim. The quality and level of details is quite remarkable and definitely worth checking it out. Commissioned work by Torre Lazur-McCann for Boehringer Ingelheim. Designed 7 different perspectives of a Great Horned Owl that holds the Hepatitis-C Virus in its talons. These designs are to be used for the HCV (Hepatitis-C Vaccine) product. For more information about Alexis, check out his website at http://www.alexismarcou.com/

The Vignelli Canon

The Vignelli Canon

The book suggestion of this week is The Vignelli Canon by the famous Italian designer and legend, Massimo Vignelli. In the book Vignelli shares a little bit about his design process and despite the fact it's focus on graphic design and visual identities, the lessons can be easily applied to any design project. The famous Italian designer Massimo Vignelli allows us a glimpse of his understanding of good design in this book, its rules and criteria. He uses numerous examples to convey applications in practice - from product design via signaletics and graphic design to Corporate Design. By doing this he is making an important manual available to young designers that in its clarity both in terms of subject matter and visually is entirely committed to Vignelli's modern design. Buy now

Visual Identity Process: The PopChicken Gourmet Express

Visual Identity Process: The PopChicken Gourmet Express

The design process behind visual identities are always inspiring. It's never enough to have references about how designers tackle the difficult task of translating products, services and companies into a visual identification. The PopChicken Gourmet Express branding work that IndustriaHED put together is a great example of the many different phases of the creative process. For more information check out IndustriaHED's website http://industriahed.com/

Tupper_PRO - Typography

Tupper_PRO - Typography

I have seen my fair share of amazing typography projects and it's always incredible to see the depth of work behind the creation of a font. Mateusz Machalski illustrates that extremely well with his project title Tupper_PRO. With images showcasing all steps of the process, Tupper_PRO is a great reference to everyone out there trying to learn or improve their typography skills. This project was created by Mateusz Machalski the CEO of BO­RUTTA, a cre­ative pro­duc­tion studio spe­cia­lizing in ma­king still and mo­tion campaigns. For more information visit: http://borutta.pl/ Sketches Construction Weights and Widths Final result For the full project make sure to check out the Behance page at: https://www.behance.net/gallery/Tupper_PRO/14218345

Colorado Identity by Berger & Föhr

Colorado Visual Identity by Berger & Föhr

Yesterday thanks to a tweet from @brunoberger I saw this fantastic branding work done for Colorado state by Berger & Föhr. They were selected to participate in Making Colorado and to contribute to the creation of a new Colorado state identity and ultimately, a new visual Colorado brand, with the goal of “bringing to life an engaging and resilient Colorado brand that will inspire our residents, unite our state programs and attract businesses, talent and tourists from around the globe.” The case study they share on their web site is a mandatory read for those trying to learn or improve their branding skills. For enthusiasts, it's an amazing source of inspiration. The Challenge "Colorado is our home. It’s a beautiful place, simultaneously wild and technologically forward – diverse, and boasting a rich history. Shaped in equal measures by Mother Nature and its residents our great state embodies exploration, expansion, and opportunity while commanding a respect for the environment and highlighting a need for responsible resource management and conservation... the challenge of “bringing to life an engaging, resilient and distinctive Colorado brand,” capable of inspiring our residents, uniting our state programs, attracting businesses, talent and tourists from around the globe, is not a simple one. We chose to focus on achieving an approachable simplicity while creating a cohesive and aspirational visual state brand evoking all that Colorado has to offer." - Berger & Föhr Case Study There are many more images and information about each step of the process. It's again a fantastic example of branding and visual identity work from the Berger & Föhr team. For more information visit http://coloradoidentity.tumblr.com/

Design Staff Logo Case Study

Design Staff Logo Case Study

Creating a visual identity is always challenging, there are values and messages to pass through the logo, colors and all the branding assets. We try to share all sorts of case studies for different branding projects in order to illustrate the subtleties of each project and how designers approach these constraints. So for this post we will share the creative process behind the Design Staff logo. Design Staff is dedicated to helping startups design great products. We’re a community of designers, researchers, and entrepreneurs who have helped build some of the products you probably use everyday. For more information about Design Staff visit http://www.designstaff.org/

Visual Identity Inspiration: Maurer by Hidden Characters

Creating visual identities for corporations or even personal projects is always very challenging and time consuming. It goes much farther than just designing a simple logotype, but it's the base of the branding strategy of any company. With Maurer Identity we have a great example of an really well done visual identity project created by Hidden Characters, from Budapest, Hungary We have designed an identity for Ákos Maurer Klimes an award-winning hungarian product designer and design strategist. While creating the identity, Hidden Characters designers regularly talked with Ákos next to a cup of coffee. This strategic attitude, the linkage between two points, between people, was their very first source of inspiration. This little momentum had an impact on their work during the whole design process. Project Logo Animation Maurer logo animation from HIDDEN CHARACTERS on Vimeo. For more information visit http://www.behance.net/gallery/Maurer-Identity/2385026

Starting a Design Project

We have been posting tutorials pretty much every week for the past 6 years. We believe tutorials are an amazing way to learn how to use the software we need to do our design work. But as you can see, software is just a part of the design process, important but without a good foundation and design principles you won’t be able to translate a good idea into a cohesive design...even if you are a master of Illustrator, Photoshop or any other software. With this in mind we wanted to go a bit deeper in terms of the tutorials we post here on Abduzeedo. Our goal will be to alternate tutorials showing techniques and how to use software with posts on the theory behind the design process. For this first post we want to talk about the first step of a design work. From understanding what the project is all about, to briefing. This is probably one of the most important parts of the creative process because it’s how you will set your strategy in terms of what to explore. The first priority when getting a new project underway is to understand exactly what the project is about. I know it might sound obvious but it’s a little bit more complicated. Below I’ve listed a few important questions I ask myself prior to embarking on a certain design project : What exactly is the product or service I will be working on? Can I explain the product or service to other people clearly and concisely? Who will be using the product? What the audience accustomed to and what we think would be better if we used this product ourselves? What is the vision the company has for their product or service? How much are they willing to commit in terms of radical changes? What’s the product or service? Having a deep understanding of the product you will be working on is vital for your design work. Not only because it gives you the information you need to start designing but this tactic will also give you the motivation to challenge yourself in creating a better product or service overall. If you think about personal projects, we always do things we like because we challenge ourselves to learn something new while making our ideas come true in our personal work. We have all the motivation we need to do that. We control the whole process of the creative process. For professional projects it is the same, once we have an idea of the scope of the project and the possibilities we can strive and innovate. Otherwise frustration ensues and we end up chasing our own tail. “A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.” - Dieter Rams Who will be using the product or service? What is the audience accustomed to and what do we think would be better if we used this product ourselves? We always mention this in our posts or any event we have the chance to speak at but it’s the number one rule for any designer: Who is your audience and what’s the problem you are solving for them with your design? Drawing another parallel with personal projects. When we are doing work for ourselves we are our own audience and that gives us freedom to do things we want or apply our personal style. Rawz - personal project to help users share their inspiration With professional work it is different. That might be a bit of a controversial statement but I believe when designing something for a particular audience we have to understand their needs and the best way to reach them. My personal style might be completely useless. The same applies to trends. As Dieter Rams says “Good design is long-lasting”. Make your design useful and efficient. Trends come and go and if you make yourself a product of a trend you might be useless as well. “It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.” - Dieter Rams What is the vision the company has for their product or service? How much are they willing to commit in terms of radical changes? Gathering all the information about the project is not only mandatory in understanding the product or service but also enables a clear idea of what the company you are working for is willing to commit to the design work. What is the posture towards radical changes? Questions about marketing and branding strategies is very important because this will give you hints on what to explore in terms of design but also on how to justify your design decisions. A lot of frustration we hear from other designers is that people they are working for don’t understand the importance of the change in colors or attention to minute details, or even radical changes such as redesigning from scratch. In really I believe it’s not that they don’t get it, they just need a good reasoning behind such change. In the end, design is not art but business and it has to be treated like that. Innovation comes from change, but we designers find that through iteration, A/B testing, interviewing the audience and a bevy of other ways to justify our work based on real data. Here are some simple questions that the super talented designer and branding expert Roger Oddone usually ask his clients: What's the name of the company/ product? What service do you offer? Who are your main competitors? How does your service differ from them? Who is your target/ existing audience? Do you have any benchmarks? Corporate and brand identity Taiama by Roger Oddone Corporate and brand identity Taiama by Roger Oddone Corporate and brand identity Taiama by Roger Oddone Clearleft, one of my favorites design studios, has a very complete design brief that they share on their Web site. You can download it here With all this information, we hope that you will have all you need to start your creative process and move to the second phase: Research and Inspiration. Stay tuned for more on that topic in our next post....and as always, if you have anything to add to this tutorial, please don’t hesitate to share with us here via comments and external links.

Abduzeedo Redesign Case Study

After months of study, designing, and developing, the new Abduzeedo is up. I know it might sound quite dramatic but this probably was the design I put most thought into. I tried to define exactly how the user experience would be and also what I could do to make that happen without losing reference from the previous designs. Now that the site is up, even though I am still fixing some minor issues and I know that will never end, I will share with you here a little bit of my creative process and what directed me to make some of the design decisions I made. Goals The first thing to do on any design project or anything you want to do is to define the goals of the project. For this new version of Abduzeedo I had tons of ideas and things that I wanted to do, but I am only one so I picked up just a few that I considered the most important, so the goals of this new design were: SIMPLICITY SHOW MORE CONTENT EASY TO BROWSE Simplicity The design must be simple in all senses of the word, the UI must be almost invisible in my point of view for a site like Abduzeedo in which the content is what matters and the only way to drive the user’s attention to the content is to make the UI as simple as possible. Show more Content After almost 4 years we have an incredible amount of content, and the best part is that most of this content is atemporal, they are pure inspiration and they will always be, so we needed to find a way to make this content more reachable to the readers like even random articles. Easy to Browse I love some iPad apps like Pulse for example because they are easy to browse through the content. Abduzeedo’s previous layout was very blog style with all the posts piled in a column. It was necessary to scroll down a lot to cover 10 articles. We needed to find a way to make that less of a hassle. Defining Constraints With the goals defined it was important to set some constraints so I would be able to start the labor work. In order to make a site simple my decision was to simply not use any graphics on the interface. The UI would be simply text and some gradients on the navigation to separate it from the rest of the content creating a hierarchy. To be able to show more content the site would have to use more screen area and also be fluid for some resolutions. Another really important thing in my case was the resources I had in terms of who would do what. Basically this was a project I did solo, with some feedbacks from Fabiano Meneghetti and a jQuery help for the User News form from my brother Eduardo Sasso, and I have to work with my available skills and also learn things that were necessary to make it happen, however I couldn’t try to reinvent the wheel because I wouldn’t be able to make it. It’s always good to know your limitations so we know where we can improve ourselves too. The visitors statistics were really important to set some constraints in terms of browser and resolution usages, important areas and what to show to them. Inspiration As I mentioned before tons of things inspired me for the new design. First and foremost I wanted to change the grid style to a more magazine-ish grid style, therefore I could present more content. Below you can see some of the references I took in consideration. Before going to Fireworks I sketched quite a lot especially trying to come up with a fluid grid. I also did something that I think was very good and I will definitely do that more often. Before designing the UI in Fireworks I went straight to HTML first. So I played with solid colors and basic shapes in order to have a look and feel of the real deal and not a static mockup. My first concept was a total fluid layout that would adapt to any resolution and fill the screen with content. I really like that idea, however after testing the HTML I noticed that in certain resolutions the main content was sort of weakened by the amount of content next to it on the sidebar. Once again, that was only possible after testing the HTML, because in my static sketches the idea looked killer but in reality it would be a flaw. Below you can see some of the sketches and the first HTML concept. Click on the image to see the grid in action. Resize your browser window to see what happens. I also tried some jQuery plugins for fluid layouts like the Masonry one, which looked awesome in their demo pages, however once again, as I tested it with the real Abduzeedo content it didn’t work well. I mean, the plugin did what it was intended to do, what happened was that some content would radically change its position depending on the resolution, weakening the consistency of the UI. For example, in my computer the User News is in the top left and in my iPad it’s in the bottom right. That would make the user think too much in order to surf the page and what I want them to do is to get inspired and not to learn how the Abduzeedo UI works. We use this plugin for the User News section. Final Design As you can see the final design is what your looking at right now. Just a few highlights about the design. Header The new header now uses much less of the screen, in the past it was like 250 pixels high, now we shrank it to 110 pixels. Therefore we gain more space for the content. We kept the original black style and added a gradient for the navigation bar so it differentiates itself from the content area. Background I am a huge fan of noisy backgrounds especially dark grey ones, probably because they remind me of the Atari 2660 console which has that rough texture very alike the noise background we have on Abduzeedo now. Home-page and Section pages The posts now have a smaller thumbnail with description and title. They are organized next to each other instead of piled up in a gallery style. We had this sort of style in the previous version but it was a different view option for the home-page and a laboratory for us :) User News and Tutorial of the Week This area is really important because every week we have a cool tutorial and lots of user generated content. In the former design the tutorial of the week was buried a day after it was published, which is really bad. Now it will be visible on every page till a new one comes along. The same applies to the User News...they will be visible on all pages. Random Inspiration This is a little experiment I wanted to do. We want to show you some random inspiration, let the odds show you what's cool and inspiring for you at any given moment :) Footer The tags are now in columns, the end of the tag cloud hehehe, and we have some other blocks with the link to our iPhone App, which wasn’t promoted in the previous design, and of course our magic mug for you to buy us some coffee because we are all human beings in the end and not aliens. Resolutions The site now has 2 layouts for different resolutions, so those with higher resolutions which represents more than 65% of our audience will have less scroll with the same amount of content. Layout for iPads, Mobile Phones, Netbooks based on 1024x760 pixels resolution Layout for resolutions higher than 1024x768 pixels Well there are many more new features like focusing all the sharing features to the Meebo Bar, the new post design with larger images, tons of CSS3 little effects and transitions such as the Not-found page and we are also working on new features while fixing some minor bugs the site might have. I hope you all like the new design and feel free to send us suggestions, opinions and critics about it. Our goal is always to deliver the best content to you and to ourselves because we use the site for inspiration as well, so it's as much mine as it is yours.

Thoughts on Creativity and Design Process

I will start this post off by saying that everybody is creative and for some that might come as a surprise, but I believe in the idea of creativity as a means of solving problems; the easiest and most efficient way possible. When I say easy I'm referring to the timeframe that it takes to complete the task, and efficient to how well received the work is from the target audience. But the question is what to do when we cannot come up with any good idea or the so terrified creative block. The creative process is something unique because it’s personal, we cannot teach someone how to come up with ideas but we can learn how to organize our thoughts in order to make our ideas easier to achieve in the form of a good design. At least in my opinion and let me explain why. Overflow of Inspiration We are bombarded with information all day long and even when we are sleeping we might dream and have ideas and therefore inspiration. That is good in terms of having lots of resources available but it’s really bad as well because with that amount of information it’s pretty hard to make a decision. That’s why I believe that our decisions have to be made with goals in mind and these goals alongside with a clear idea of our target audience will help us filter this avalanche of ideas and inspiration. ...designers give form to products, interiors, and visual communications, and satisfy the functional, psychological, and aesthetic needs of users... http://design.osu.edu/dept_what.html Create Constraints In order to overcome this problem it’s really important to define some constraints. If we have too much freedom again it’s hard to make a decision because it tends to fall to our personal opinion and we can't rely that everybody will like the same things we do. The book Making Ideas Happen covers this topic really well saying that in a specific research with designers, they were much more productive when they had more constraints in a project than those who had more freedom. My suggestion to creating these constraints is to fall back to the importance of having a good design briefing before starting any sketch or firing up the computer. Talk with the client, try to understand exactly what you have to do and for whom you will do it. That is key. Before starting anything I asked all questions I had and defined the constraints, that made the whole process a lot easier Try, try and try some more I've already said this in some speeches I gave, but it’s true. The only way to come up with something cool is by trying, testing, and evolving ideas. If you just wonder and never do, you will have nothing to evolve upon. It’s like the fear of the blank page. Once you start adding things to it, it's not that complicated anymore…it’s all about playing with the elements, right? Or like the inertia principle, once we get the object moving it’s hard to stop. When I was in college I had an amazing professor and he used to make us sketch at least 150 variations for a logo project, he used to say that the first ideas we have are always based on something we saw and it’s already known and popular, that’s why we did it. Only after we run out of ideas is when we will start innovating. Delivering I tend to think that the next idea will always be better, which in reality most of the times is and that’s why I had so many projects that were never finished. As I mentioned in the last post we have external factors that might make us unsure and insecure of our ideas. Now, I believe that we have to think of design as an evolving process that means once we have an idea and have gone through the creative process with the right constraints and we know that we did our best we must deliver. Once we deliver we can start thinking on improving upon it. Seth Godin mentions that he is successful because he delivers more while other people keep postponing the delivering in order to finish a master piece which might never happen. He also talks about the last minute questions before delivering what he calls the Lizard Brain calling. Amazing talk about delivering by Seth Godin You don't need to be more creative, all of you are too creative.... what you need is a quiter lizard brain... - Seth Godin" Creating something is always exciting, and having ideas is super easy that is why I am sure that everybody is extremely creative. Now the secret of success is making these ideas come true. The most comforting thing is that we start a project with at least 50% chance to succeed without even doing anything. Now try to imagine if we give it our best, how much that percentage would chance in our favor. Top image courtesy of Shutterstock.

5 Steps to Streamline your Creative Process

As a designer I’m always trying to optimize my creative process. Since I started, lots of things have changed in my workflow, some things got simpler while others got a little bit more complicated. With these changes came the experience of learning from the mistakes but also from the successes. In this article I will summarize how I try to streamline my creative process to make it as efficient as possible. Basically everything consists of 5 steps: 1- Understand the work "A well-defined problem is half solved."Michael Osborne - Principal, Michael Osborne Design It might sound obvious but sometimes we tend to assume that we know what we have to do when we simply don’t. It’s really important to know exactly what it is that you have to do before you start doing anything. If you don't, it would be like going to the supermarket when you’re hungry. You want to buy everything... The understanding of the project will filter exactly what you have to look for, it will give you directions and the context of the work you will have to do. But what's the use in knowing what you have to do if you don't know who you're doing it for? That will lead us to the second step... 2- Audience "A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools."Douglas Adams - Creator of The Hitchhiker’s Guide to the Galaxy So, you now have a firm understanding of the work, but now the question has come to: for whom will the work be intended? The audience is key in this equation because it filters and reduces even more the range of your search for inspiration. Once you have the audience figured out, you really have to get in your mind that it's 100% about them, which will lead us to the third step. 3- Business "Every night I pray that clients with taste will get money and clients with money will get taste." Bill Gardner - Principal, Gardner Design The biggest difference between commercial design and art, for me, is that we design something for the audience and not as a means of self-expression for ourselves. We solve problems for them, we make it easier for them. As far as graphic and visual design goes, most of the problems arise in communication. Essentially, we’re the middle man between the client and the consumer. Our goal is to make the communication better for them (which in most cases means simplifying), and not to interfere in the communication with our own personal tastes and influences. 4 - Challenge "We spend a lot of effort trying to make things look effortless." Alexander Isley - Principal, Alexander Isley Design With a solid understanding of the work, the audience, and the question of solving problems, we now face the challenge: the designing part. The challenge creates the motivation to look for the details that will make your work better and superior. 5 - Try "You will never really like anything you do, and you will die knowing that you still have to do your best." Garth Walker - Orange Juice Design The previous steps won’t necessarily guarantee that you'll come up with a good design, they're merely there to form a foundation, or a stepping stone, if you will. To recap, the understanding of both the work and the audience will create the context. Keeping in mind the business perspective will avoid you losing focus on what's important. And, finally, the challenge will give you the motivation to look for the most innovative and efficient solutions. But the only way for you to come up with a good design is to take all these things and TRY. This is the workflow I’ve been using since I graduated from college. Like I said, this workflow has been modified based on what I have learned throughout these years, through the wins and losses. The process should change depending on your personal way of working, but I think the one thing that will always be the secret to a good design and therefore should be a key in everyone's workflow is simplicity.

Brainstorm #9 Logo Process

Last month Carlos Merigo, from Brainstorm #9, one of the biggest and most prestigious Brazilian blogs, contacted me asking if I would be interested in redesigning his blog brand. I was totally amazed by the opportunity to work on a project like that. I knew it would be challenging because of the target audience, mostly advertisers and people who really know about that matter. Briefing the design process The first thing when designing a logo, is to understand the context, history and what's the image it has to deliver to the audience. Asking Carlos about the meaning of the logo, he explained to me that the logo was, of course, related to “brainstorming”. Brainstorming is a group creativity technique designed to generate a large number of ideas for the solution of a problem. The method was first popularized in the late 1930s by Alex Faickney Osborn in a book called Applied Imagination. Osborn proposed that groups could double their creative output with brainstorming. - Wikipedia Now, about the number #9, it was a really nice story: he was looking for something that would make the name stand out, Brainstorm was way too simple. Then he saw on his table the famous White Album by the The Beatles. He decided to take a look at the name of the songs and found the Revolution #9. That gave him an insight, because even John Lenon himself once said that that song was the weirdest, longest and probably most hated Beatles song. John Lennon wrote this with contributions from Yoko Ono. It's a highly experimental piece, which Lennon once called "The music of the future." It is the most controversial and bizarre track on the album - you have to have a very open mind to appreciate it. The work is credited to Lennon/McCartney, though it was primarily the effort of John Lennon. (This was Lennon and McCartney's standard practice, to share songwriting credit on all songs written by either or both.) George Harrison, Ringo Starr, and Yoko Ono made small contributions, while Paul McCartney did not actively participate in the track's creation. Ono's avant-garde influence on Lennon's compositional style is clear throughout "Revolution 9." - Wikipedia I had to listen to the song, and it’s definitely a crazy song, full of looping and sort of a collage of different things, pretty much like a brainstorm. That was the current logo. So the keywords from my little brainstorm were: Loop Collage Avant-garde Logo References and Sketches Before going straight to the computer, I worked on some sketches, exploring a few concepts using the keywords that were selected before. Also I visit logopond.com for some logo references. You can take a look at some logos I used for reference at the Ultimate One Color Logos Inspiration article. Logos from logopond for design references The first idea was to keep the # symbol and add another element. In this case the lightning bolt. I know, I suck at that but it's helpful ;) First Idea After having some interesting ideas on paper, it was time to go to Illustrator and work on the symbols. Below you can see one of my ideas, mixing the # and the lightning bolt. The first symbol mixing the # with the lightning bolt It was a nice idea and a good symbol in my humble opinion. It had a nice link with the previous logo, but there was a big problem: the number 9 wouldn't work well along with that symbol. First Idea with the Logotype and versions Selected Idea Even though the first version came out quite nicely, I decided to work on another version, trying something different and using the number 9. With that in mind, I decided to mix the number and the lightning bolt symbol. Second idea mixing the number 9 and the lightning bolt Logotype With the Avant-garde influence on the song Revolution #9, I simply had to use that font. I really like it, despite the fact that here in Brazil it was a default font in Corel Draw, the most popular software for vector design here. But what does that have to do with the font? Well, imagine that this is the default font... so when people send business cards to the bureau and forget to send the fonts, which one is used instead? Yes, maybe it was the most used font ever here in Brazil, but with a few tweaks it would work fine. Exploring the idea of looping, I played with some characters, mainly in the word Brain because ideas and complex thoughts are born in the brain, so it had to have a clear relation between LOOPING in the Brain. Also I used gradients to add some depth to the connections between the letters. In the last letter, the "M", I nudged the symbol a bit over the letter, leaving a little gap between the symbol and the letters to avoid problems with the monochromatic version. Selecting and playting with fonts Final Result I really believe that the new logo achieved the goals we had set in the very beginning of the project. A simple and iconic logo, relating to the Beatles song, Revolution #9. Versions Braincast Braincast, the Brainstorm #9 screencast. Site Also I worked on the web site, but that's another story for perhaps another post in the future.