sign
Portfolio IGNACIO BRITO 2012 - 2018
LOGO DESIGN BRANDING -
2012-2018
UI/UX & WEB DESIGN EDITORIAL -
Des
-
& EXRAS
PACKAGING
Ignacio Brito 3
Table of Contents 006 - LOGO INDEX
014 - BRANDING 054 - UI/UX & WEB 082 - EDITORIAL 123 - PACKAGING
4
design portfolio
WEB DESIGN &
Experience & Services
UI/UX DESIGN User interface (UI) relates to the look, feel, presentation and interactivity of the product. User experience (UX) then optimizes the interactivity and flow by using evidence-based research to combine business and user needs to create the best possible experience. As consumers, we have all come to expect products which are userfriendly and appealing. Taking UI/UX into consideration at the early stages of development is crucial. A customer visiting a website wants to feel like it is simple to navigate and like they instantly feel comfortable doing so. When this is not the case, it causes frustration and is likely to result in customers looking elsewhere. EXPERTISE
Research Storyboarding Sketching Wireframing Interaction Visual Design
EDITORIAL DESIGN Editorial design lends consistency and character to a publication’s visual identity. A compelling and aesthetically pleasing presentation of texts, infographics, illustrations, and photographs are key elements to a project success.
Ignacio Brito 5
LOGO & BRAND IDENTITY Your brand identity system is a unique and unified visual language that boldly represents your brand across all touchpoints. It encompasses distinguishing colors, typography, and symbols that evoke your brand’s unique ethos and authentic expression. More than just a logo, your identity should foster immediate recognition and elicit emotions of identification and preference within your customers. Ultimately, it’s a visual metaphor designed to convey your brand’s authentic essence in a way that resonates with your audience on a deep and personal level. Driven by these insights, the Brand Identity phase is nothing less than the creation of your visual DNA, this is what we call a visual identity system.
EXPERTISE
Book Covers
EXPERTISE
Graphic Design
Brochures
Brand Identity
Magazines
Corporate Identity
Annual Reports
Logo Design
Catalogues
Typography
6
design portfolio
Logo Design CONCEPT CREATION LOGO REDESIGN BASIC BRANDING SERVICES
2012-2017
Description A logo is the chief visual component of a company’s brand identity. It appears on stationery, websites, business cards, and advertising. For those reasons, a well-designed logo can contribute to business success while a substandard logo can imply amateurism and turn off potential customers. However, a logo should work well with all the other aspects of a company’s visual presentation: No logo, however well designed, can look good when surrounded by contradictory or arbitrary graphical elements or inconsistent design rules. This is why a logo is the basic unit of a larger brand identity that includes company fonts, colors, and many complex brand guidelines.
Tools Adobe Photoshop and Illustrator Phase Freelance
14
design portfolio
I g n a c i o B r i t o 15
Branding Projects LOGO DESIGN CORPORATE IDENTITY STATIONERY
2012-2017
Description Only by truly understanding a brand can you effectively craft its image. So, the process of developing an authentic identity is founded on the discoveries made in the Brand Strategy phase. The central elements of the Brand Brief—personality, positioning, and differentiation—are leveraged to define your brand’s aesthetic core. Driven by these insights, the Brand Identity phase is nothing less than the creation of your visual DNA—what we call a visual identity system. Your brand identity system is a unique and unified visual language that boldly represents your brand across all touchpoints. Including distinguishing colors, typography, and symbols that evoke your brand’s unique ethos and authentic expression. More than just a logo, your identity should foster immediate recognition and elicit emotions of identification and preference within your customers. Ultimately, it’s a visual metaphor designed to convey your brand’s authentic essence in a way that resonates with your audience on a deep and personal level.
Tools Adobe Photoshop and Illustrator Phase Freelance
La Casa De Los Pisos LOGO DESIGN CORPORATE IDENTITY PACKAGING - STATIONARY
Description La Casa de Pisos is a hardwood floor selling company. Their business niche included construction companies and wealthy homeowners. They wanted to differentiate themselves from other construction businesses and to be seen as a high-end lifestyle brand.
I g n a c i o B r i t o 17
18
design portfolio
I g n a c i o B r i t o 19
20
design portfolio
Wonder Adventure LOGO DESIGN CORPORATE IDENTITY PACKAGING - STATIONARY
Description Wonder Adventure is a paper craft store where each type of paper and color is crafted by hand and is unique. Playing with custom inks, unusual materials, and experimental printing processes were the main focus of this project.
Tools Adobe Photoshop and Illustrator Website link www.wonder-adventure.de
I g n a c i o B r i t o 21
22
design portfolio
02
PAPER PACK AGING
Packaging Challenge As part of the project, we had to design several types of custom-made packaging assembled by hand. They were done mostly for hand-crafted papers and powder ink. The boxes were made using custom cardboard/paper produced by the client and the labels are simple and small to keep the focus on the material and colors of the actual packaging.
I g n a c i o B r i t o 23
03
MATERIAL
Handmade Products Special care was put into ensuring the tactile qualities of the material were reflected on the packaging because it was going to be the main selling point of the products. The same attention to the material was put into the business cards, paper bags, and all other collateral. Digital presence wasn’t a top priority for the client.
24
design portfolio
CapitalCasa: Real Estate LOGO DESIGN CORPORATE IDENTITY PACKAGING - STATIONARY
Description CapitalCasa is an Italian real estate company. Their main goal was changing the way the future homeowner could access and interact with all of their property information. This included blueprints of the building, property images, and even “do not disturb” signs for the apartments.
26
design portfolio
02
ONLINE ADS
Banner Design One of the client’s main concerns was creating high quality images for property listing websites to stand apart from the competition and obtain a greater number of leads. We worked with a local photographer to ensure all images would be on-brand and followed the image guidelines.
I g n a c i o B r i t o 27
03
STATIONERY
Business cards, envelope, cd case, map tube For the general stationary, we focused on using the blueprint of buildings as the main graphic element of the visual identity. Kraft paper was used to give the brand a warmer feel and to make the brand easy to recognize and stand out from the local competition in the same sector.
28
design portfolio
I g n a c i o B r i t o 29
The Art of Print: Vomela LOGO DESIGN CORPORATE IDENTITY EDITORIAL DESIGN - BROCHURE
Description Vomela is a holding company that overtakes smaller printing companies and reworks their entire business plan and platform. For their identity, we decided to focus on the possibilities of printing. Color, gradients, and overlaying of layers of ink along special printing techniques were used to achieve a unique look and feel.
I g n a c i o B r i t o 31
32
design portfolio
I g n a c i o B r i t o 33
34
design portfolio
INT: Instituto de Teatro CORPORATE IDENTITY POSTER DESIGN EDITORIAL DESIGN
Description As part of an internal restructuring, they went through a major rebranding process to generate a more visually-appealing and dynamic identity. Simple but versatile geometric shapes were used to create a system of editorial and poster templates, as the assets needed to be handed to local theater groups to adapt and use for their own productions
36
design portfolio
I g n a c i o B r i t o 37
38
design portfolio
True Road Chocolate BRANDING PACKAGING DESIGN ILLUSTRATION
Description True Road is a premium chocolate brand where unexpected flavors clash. Each combination was represented with the mix of unique, custom-made pattern that could show the synthesis between very different elements and flavours.
40
design portfolio
I g n a c i o B r i t o 41
42
design portfolio
I g n a c i o B r i t o 43
Archiprix: Brand Identity LOGO DESIGN CORPORATE IDENTITY POSTER DESIGN
Description Archiprix is an annual competition held between several university students from different countries in Southeast Asia. They wanted something edgy and modern, so we went with 3D graphics, showcasing geometric shapes and plastic materials. It was a great opportunity to enhance my illustration skills.
I g n a c i o B r i t o 45
48
design portfolio
50
design portfolio
Art Exhibition: Maciek Jasik IDENTITY DESIGN POSTER DESIGN FLYER’S DESIGN
Description Souls was an art exhibition by photographer Maciek Jasik. The typography was distorted to reflect the eerie and ethereal feeling in the artist’s work. Color Gradients were also used to reinforce the colorful nature of his photographs.
design portfolio
Ui/UX Design USER RESEARCH INTERACTION DESIGN VISUAL DESIGN
Description
2012-2017
54
User interface (UI) relates to the look, feel, presentation and interactivity of the product. User experience (UX) then optimizes the interactivity and flow by using evidence-based research to combine business and user needs to create the best possible experience. As consumers, we have all come to expect products which are user-friendly and appealing. Taking UI/UX into consideration at the early stages of development is crucial. A customer visiting a website wants to feel like it is simple to navigate and like they instantly feel comfortable doing so. When this is not the case, it causes frustration and is likely to result in customers looking elsewhere.
Tools Adobe Photoshop and Illustrator Phase Freelance
I g n a c i o B r i t o 55
Web Design WEB DESIGN DIGITAL STRATEGY SOCIAL MEDIA
Description Web design encompasses many different sets of skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardized code and proprietary software; user experience design; and search engine optimization. Often, many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing markup. Web design partially overlaps with web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability.
Tools Adobe Photoshop and Illustrator Phase Freelance
56
design portfolio
Vayu: Sports Match Finder APP DESIGN UI DESIGN PROJECT MOCKUP
Description Vayu has functionality similar to apps like Happn or Tinder, but its purpose is very different: playing sports and making friends. It allows the user to find the nearest sports game available with an easy interface that shows the type of game a group is playing, how many people they need, and to get in touch with them using the integrated chat service.
58
design portfolio
01
CHALLENGES
Ease of Use A custom-made icon system was developed so the user could tell at a first glance what type of games were happening around him. The users’ profiles also included critical information (name, age, past reviews, etc.) to ensure people were comfortable before meeting and the integrated chat function was made as easy-to-use and as straightforward as possible.
I g n a c i o B r i t o 59
03
APPLE WATCH
Adaptation This was my first time adapting an app for the Apple Watch. It was an interesting challenge to figure out how to reduce the app to its most basic features while still maintaining functionality, clear navigation, and usability.
60
design portfolio
I g n a c i o B r i t o 61
62
design portfolio
Velociraster: Web Design WEB DESIGN ANIMATION PROJECT MOCKUP
www.velociraster.com Velociraster is dedicated to becoming your principal marketing advisor for custom branding strategies, technology expertise across multiple platforms, results-focused marketing messaging, and consistent design application. They wanted to focus on business solutions and end-goals since their business begun to gravitate more toward marketing solutions.
I g n a c i o B r i t o 63
01
VISUAL STYLE
Visual Style We created a geometric icon system that was in line with the low-poly logo. Each shape and color was assigned to a different category and type of service. We also used slanted masks for the images across the website to maintain brand consistency, as each showcased project was unique and had its own identity.
64
design portfolio
I g n a c i o B r i t o 65
66
design portfolio
Marathon App: KYR APP DESIGN UI DESIGN PROJECT MOCKUP
Description Know Your Race has maps of running courses as well as expert tips inserted at key points. The main problem the app solves is that athletes at these types of events get printed physical briefs before the race with all the details of the course.
68
design portfolio
02
KEY FEATURES
Key Features - Integrated maps of the courses they run / bike/swim, as well as expert tips inserted at key points on the course. - Updated event list and live changes to the tracks and routes as they come up. - Personal Profile listing events, best times and track record.
I g n a c i o B r i t o 69
01
HOW IT WORKS
Function As the race approaches, however, that information can often change and it’s hard to get every necessary update. KYR addresses this issue. Athletes can purchase access to a race and see the most up-to-date course. In this project, we went through a variety of wireframes for the app and a web admin for data entry.
Mirzam: Web Design WEB DESIGN PHOTOGRAPHY PROJECT MOCKUP
www.mirzam.com Mirzam is a chocolate company based in Dubai. They wanted to play with the romanticism and myths behind the old spice-trading routes. Old maps, vessels, and monsters are just some of the elements we experimented with to create the right illustrations and general identity of the brand. The research process was rich and full of discoveries.
72
design portfolio
I g n a c i o B r i t o 73
74
design portfolio
Smacker: School Chat APP DESIGN UI DESIGN MOCKUP
Description A social platform where each class could create private forums and discuss several school-related matters. It is for high school students in the United States. The main challenge was ensuring transparency and supervision tools were offered to avoid bullying and to ensure it was a safe space for the students.
76
design portfolio
01
HOME PAGE
Home Page This website was designed for video submitting contest, the target audience is teenagers, so the visual identity needed to be clean, trendy and modern. Bright colors, wild shapes and a very precise use of whitespace were the main elements selected.
I g n a c i o B r i t o 77
02
ABOUT US
Description For this section, we needed to tone down the Visual elements, it was important that the requirements and prizes for the contest were clear and easy to understand. were used the abstract shapes as the second level of visual information.
78
design portfolio
Cinimaker: Films & Art APP DESIGN UI DESIGN MOCKUP
Description A creative network for the motion picture industry. Directors, writers, producers, actors, cinematographers, and more all in one place. Manage a professional identity with profiles tailored to the motion picture industry.
80
design portfolio
02
KEY FEATURES
Key Features
Unlimited portfolio media streaming, private messaging, collaboration and general networking makes easier than ever to find new collaborators and your next gig.
I g n a c i o B r i t o 81
01
HISTORY
History The site was the LinkedIn for creative people. There were a lot of complex features and it was a large scale project. The client started early testing of the site but decided there were some major flaws in their business plan. They had to shut down the company before launch.
82
design portfolio
I g n a c i o B r i t o 83
Editorial Projects BROCHURE DESIGN MAGAZINE DESIGN BOOK COVER DESIGN
2012-2017
Description The amount of content included in the publication of things like books and magazines demands strict guidelines and rules for the use of typography and layout. The success of these publications depends on clear communication and consistent storytelling, both of which demand rigorous applications of grid layouts and the establishment of visual hierarchies in order to keep readers entertained while they consume the content. The slow pace of book design and the lengthy schedules surrounding their creation are a stark contrast to the world of magazine and newspaper design in which strict guidelines and a quick turnaround time are a must in order to meet press deadlines.
Tools Adobe Photoshop and Illustrator Phase Freelance
84
design portfolio
Cassariat: Catalogue BROCHURE CORPORATE DESIGN IN-DESIGN
Description Cassariat is a tailor-made furniture company. Their growth encouraged them to update their outdated brand identity. We created a new logo, several types of collateral (including business cards, letterhead, and flyers), and a corporate brochure/catalogue showing their process and the quality of their work to their newly-acquired client base.
I g n a c i o B r i t o 85
86
design portfolio
I g n a c i o B r i t o 87
88
design portfolio
01
BOOK COVER
Swiss Style book cover design The client released one real estate-related ebook per week over a period of months. I was hired to design the series of covers inspired in the Swiss design style. The resources selected were clean geometric shapes and a lot of white space.
I g n a c i o B r i t o 89
02
BOOK COVER II
Swiss Style book cover design One of the main challenges was making each cover unique and interesting while using a limited color scheme and number of geometric elements. The covers were well-received and the feedback from many attendees to the client’s seminar indicated that they were attracted by how modern and clean the books looked in the social media mockups.
90
design portfolio
Mirzam: Catalogue BROCHURE CORPORATE DESIGN EDITORIAL DESIGN
Description Mirzam is a chocolate company based in Dubai. They wanted to create a catalog to attract high-end consumers from the high-income 35- to 50-year-old niche. I assisted in both the editing of the brochure as well as in the photography.
I g n a c i o B r i t o 91
92
design portfolio
I g n a c i o B r i t o 93
94
design portfolio
I g n a c i o B r i t o 95
96
design portfolio
01
COVER SYSTEM
Vomela Printing Company - Brochure cover system Vomela is a printing company. They wanted to convey perfectionism and technical expertise in their craft while also a creating a ludic state of mind. We used geometric shapes and gradients to showcase the capabilities of print.
I g n a c i o B r i t o 97
02
INSIDE SPREAD
Visual System As a printing company, the main focus was showcasing the printing processes they could offer. We decided to use a minimal amount of text and a lot of white space for Impact titles and graphics.
98
design portfolio
RAW: MAGAZINE MAGAZINE DESIGN EDITORIAL DESIGN PHOTOGRAPHY
Description Raw is an experimental magazine focusing on social fetishes. In each edition, the focus is on the attraction that certain social taboos have, how they modify our world perception, and how diverse reality is. I had absolute freedom on this project, we decided to play with a very agile layout, and use very bold, shaking images for the title images.
100
design portfolio
I g n a c i o B r i t o 101
102
design portfolio
Cooking & Recipes Book COVER DESIGN BOOK DESIGN EDITORaIAL
Description From the Market is a cookbook focusing on simple recipes using high-quality ingredients. It is a book for beginners and the recipes are simple. We created a clean icon system so the recipes were easy to understand and look at while cooking. The client provided high-quality images that we wanted to capitalize on throughout the entire publication.
I g n a c i o B r i t o 103
104
design portfolio
I g n a c i o B r i t o 105
106
design portfolio
03
BOOK COVER III
Book cover Secret Theater of Work is about the secrets of the workplace. The main theme of the book is that any corporate environment is like a theater and that each employee has a different role to play. The premise and content of the book were dramatic, so a mysterious cover both reflecting the theatrical and business-related content of the book was preferred.
I g n a c i o B r i t o 107
04
BOOK COVER IV
Cover Design Beasts of No Nation follows the journey of Agu, a young boy who is forced to join a group of soldiers in Sierra Leone. While Agu fears his commander and many of the men around him, his fledgling childhood has been brutally shattered by the war raging through his country and he is at first conflicted by simultaneous revulsion by and fascination with the mechanics of war.
108
design portfolio
Archiprix: Event Booklet ILLUSTRATION BOOK DESIGN EDITORIAL
Description Archiprix is an architecture competition held in Indonesia. The booklet was distributed during the event and showcased all of the student projects. The visual language used was related to the architectural nature of the event: abstract and with references to functional architecture
I g n a c i o B r i t o 109
110
design portfolio
I g n a c i o B r i t o 111
112
design portfolio
Moscardulito: Illustrations ILLUSTRATION BOOK DESIGN EDITORIAL
Description Estomago de Mosdardulioto is a children’s book about a savage forest where the food chain is more than just a concept. The project consisted of fun, handmade illustrations made for a very charming (and scary!) story.
I g n a c i o B r i t o 113
114
design portfolio
I g n a c i o B r i t o 115
116
design portfolio
Magazine: David Lynch EDITORIAL STUDENT JOB MAGAZINE
Description Editorial project based on the work and life of filmmaker David Lynch. His bizarre, tortured and non-linear storytelling was reflected in the modifications and alterations done to the images and the chaotic layout used. This was a university project.
I g n a c i o B r i t o 117
118
design portfolio
I g n a c i o B r i t o 119
120
design portfolio
Fanzine: Richard Nixon EDITORIAL STUDENT JOB MAGAZINE
Description The Last Report is a documentary about Richard Nixon’s time as the President of the United States. The main themes of the film are the Vietnam War, capitalist society, and the Watergate scandal. The content is sardonic and carries a sarcastic undertone. This is why absurd collages with very dark undertones were preferred as the visual style.
I g n a c i o B r i t o 121
122
design portfolio
I g n a c i o B r i t o 123
124
design portfolio
I g n a c i o B r i t o 125
Packaging Design FOOD PACKAGING RETAIL PACKAGING BRANDING
2012-2017
Description Packaging design is the connection of several elements. Form, structure, materials, color, imagery, typography, and information with design elements to make a product suitable for marketing. Its primary objective is to create a vehicle that serves to contain, protect, transport, dispense, store, identify, and distinguish a product in the marketplace. Ultimately, the goal of a packaging design is to meet marketing objectives by communicating a consumer product’s personality or function and generating a sale.
Tools Adobe Photoshop and Illustrator Phase Freelance
126
design portfolio
True Road Chocolate BRANDING PACKAGING DESIGN ILLUSTRATION
Description True Road is a premium chocolate brand whose goal is to find the perfect match between unexpected flavors and arrive at new flavor destinations through the honesty of the ingredients. It is a high-end product for high-end consumers.
128
design portfolio
I g n a c i o B r i t o 129
130
design portfolio
I g n a c i o B r i t o 131
132
design portfolio
Katerlos: Energy Shot PACKAGING DESIGN LOGO DESIGN BRANDING
Description Katerlos is a modern and buzzing hangover shot. The client wanted a clean and modern design that would separate his brand from similar products. As part of the design process, the logo and a set of cans were designed with different patterns and colors, each for unique flavors.
134
design portfolio
I g n a c i o B r i t o 135
RadioPro: Adapter PACKAGING DESIGN LOGO DESIGN BRANDING
Description Box design for a radio adapter. The visual elements were simplified from the previous version of the packaging and a darker color scheme was used to make the product more appealing to high-end consumers.
138
design portfolio
Grumpy Goat: Roasted Nuts LOGO DESIGN PACKAGING DESIGN TEXTURE DESIGN
Description Grumpy Goat is a hip, locally-grown roasted peanut brand. Each flavor had a unique pattern created for the packaging, inside card, and bag. The main challenge was taking a product perceived as low-end for the Dubai market and rebranding it for high-end consumers.
140
design portfolio
I g n a c i o B r i t o 141
Mirzam: Emirates Pack PACKAGING DESIGN LOGO DESIGN ILLUSTRATION
Description The project consisted of creating in-flight small packaging for Emirates Airline. The product had to follow a lot of airline regulations and the challenge was to show Mirzam’s identity in such a small format while at the same time including all obligatory information like ingredients and nutritional value.