Salomon Ôn,nè,bu-lêm +980 250 4693 salomono.com behance.net/salomono ello.co/salomo
Portfolio
A Collection of Graphic design, Web design, User Interaction and motion design explorations. Salomon Onyegbulem
Graphic & Web Design Portfolio 2014 - 2018
Salomon Onyegbulem
Copyright Š 2018 Salomon Onyegbulem. All rights reserved. No portion of this publication may be reproduced, stored in a retrieval system, or transmitted in any form as well as by any means electronic, mechanical photocopying, recording, or otherwise without permission of the copyright holder. Salomon Onyegbulem -
hello@salomono.com + 980 250 4693 salomono.com / salomono.work
4
– Richard Feynman
Graphic & Web Design Portfolio
“I have approximate answers and possible beliefs and different degrees of certainty about different things, but I am not absolutely sure of anything and there are many things I don’t know anything about.”
2014 - 2018
Salomon Onyegbulem
6
Contents
06 07
Brandmarks
08 25
Timberlog
26 33
Apple IOS Clock
34 41
Queen B Film Hive
42 43
Insurable Risk Conference
44 49
Parallel Design
Pretiola ( Little Rewards )
54 59
IT Career Fair Brochure
60 61
Ava Films
62 65
The Art Guide
66 69
Better UX Principles
70 71
Aircraft Evolution
Graphic & Web Design Portfolio
50 53
2014 - 2018
8 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
Marks
Salomon Onyegbulem
Timberlog
What’s timberlog? Timberlog is a learning tool which also allows users to search and browse a library of over 4 billion identified tree species for diagnosis or educational purposes. With timberlog users can save their findings in their library ( log ) for sharing with other tree lovers.
Features Timberlog offers users the ability to sort and filter trees alphabetically, by physical dimension ( width / height ) growth habit, hardiness zone, soil preference and more. The application features a beautiful user interface with clean and well defined interaction elements complemented by a dynamic and geometric hierarchy. timberlog the built-in Ai visual recognition engine which provides users with the ability to identify trees in realtime using their mobile device’s built-in camera.
10
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
User Persona
Caroline Parish 21, Student
Charlotte, NC
12
“I want to learn how to efficiently plant and grow a healthy tree”
Goals
Personality
Caroline studies to become a licensed arborist
Extrovert
Introvert
Sensing
Intuition
Thinking
Feeling
Judging
Perceiving
( one that specializes in the care of trees and shrubs ). She’s an outdoor person who loves exploring nature,
Favorite Apps Caroline owns a smartphone and uses it to stay in touch with her friends and family, browse the internet, and listen to music.
Skills
Spotify, Tinder, Netflix and Snapchat
Apps
are among her favorites apps.
Internet
Graphic & Web Design Portfolio
taking photos and collecting interesting leaves.
Social Memorization
2014 - 2018
Salomon Onyegbulem
On-boarding flow map Educational moment about Browsing Features & search
App Launch
Add Facebook
Onboarding #1
Login
Educational moment about scan & identify
Onboarding #2
Sign Up
First Name
Last Name Educational moment about general settings
Onboarding #3 Address
Password
Confirm Yes No / skip User Break Start
14
End
The onboarding process allows us to initially explain a new product to first-time users, and “show them the ropes� when it comes to its functionality.
FB Details
Success
Error Prompt
Mandatory form fields, Street, Apt, City, Zipcode
Re Submit
Submit
Confirm Email
Enable Location Service?
Confirmation Email sent. User breaks to view email
Graphic & Web Design Portfolio
+ Email address
Timberlog Home
2014 - 2018
Salomon Onyegbulem
Overview
Quick access Provides users with access to most relevant functions.
Image slider Allows user to swipe through pre-selected images / photos of identified tree.
Add to Library Saves Current Tree / plant in view into user’s library or other predetermined location.
Description Provides a quick / at a glance introduction for the identified tree. User is able to scroll to read more information
16
← swipe →
disabled Done Normal
Graphic & Web Design Portfolio
button states
2014 - 2018
Salomon Onyegbulem
Characteristics
Add to Library Saves Current Tree / plant in into user’s library or other predetermined location.
Visual Depictions Provides a visual comprehensive for understanding information.
Hardiness Zone Average annual extreme minimum temperatures. Outlines different temperature bearing areas ( zones ) in which tree can be found.
18
35 to 40˚ F
Map is the standard by which gardeners and growers can determine which plants
Graphic & Web Design Portfolio
The 2012 USDA Plant Hardiness Zone 40 to 45˚ F
are most likely to thrive at a location. 30 to 35˚ F
0 to -10˚ F
The map is based on the average annual minimum winter temperature,
-45 to -50˚ F
divided into 10-degree F zones. 2014 - 2018
Salomon Onyegbulem
User-flow: Browse
Select Function
20
Search
Discover new tree species by searching using most common name or scientific name.
Graphic & Web Design Portfolio
Learn
2014 - 2018
Select
Salomon Onyegbulem
NightMode
22
For when the urge arises to become one with nature in its dormant form; or for low light learning instances.
Graphic & Web Design Portfolio 2014 - 2018
Salomon Onyegbulem
https://goo.gl/tCJ7s6
Timberlog remains an active on-going project. Visit the link above to view the prototype in-progress.
24
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Leaf Green #5fb246
c-67, m-5, y-100, k-0
Branch Green #eef5e0 c-6, m-0, y-14, k-0
26
Branch Green #34451e c-72, m-48, y-99, k-51
Circular STD
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Well cut clean typeface; chosen for its rounded geometric form and low x-height which provides an overall friendly appearance.
2014 - 2018
Aa
Graphic & Web Design Portfolio
The quick brown fox jumps over the lazy dog and eats it!
Salomon Onyegbulem
IOS Clock
What’s so great about this? Radically elegant and minimal with a rebellious tone. I wanted to create an alternate mode for the classic IOS clock application. I called it lightmode. Dozens of wireframes later, I decided to experiment with the entire layout and User Interface. The following screens are a result of these explorations. I hope you enjoy.
28
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Editing Alarms
More options Edit, move and delete alarms on new screen.
Activate / Deactivate Allows user to turn preset alarm on or off.
Add New Simple plus button indicates add function for setting new alarms.
30
Confirm Changes It is a User Experience principle to provide users with the ability to make mistakes without having to commit to them.
more options Tapping on dots reveals
Classic toolbar
Graphic & Web Design Portfolio
edit and delete functions.
The default IOS main function selection area. Most users are familiar with this area.
2014 - 2018
Salomon Onyegbulem
Setting up an Alarm - User Flow
Select Alarms
32
Add
Simple and light iconography guides the interaction process while boosting user’s confidence.
Graphic & Web Design Portfolio
Select Tone
Confirm
2014 - 2018
Salomon Onyegbulem
Stopwatch
34
Simplicity is not the goal. It is the byproduct of a good idea. Typography = Helvetica Neue
Graphic & Web Design Portfolio 2014 - 2018
36 Salomon Onyegbulem
Queen B. Film Hive Objective
group based in Los Angeles, California which specializes in cinematography, and film directing. The group had been active for 8 years and had amassed a respectable reputation. Their previous logo however, despite it’s quirkiness did not reflect Queen B’s slick and modern aesthetic vision. I was asked to create a clean, simple and visually
Graphic & Web Design Portfolio
Queen B Film Hive is a production studio /
compelling solution for their visual identity.
Solution I re-designed the mark using alternating geometric lines at a diagonal to give the identity a refined, precise and sophisticated appearance.
2014 - 2018
38 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
40 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
42
faux black #202222
c-6, m-0, y-0, k-87
Honey Yellow #d3c22c
c-0, m-8, y-79, k-17
Helvetica Neue
ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
The ultimate expression of modernism, leading the information age with a precision and objectivity that commands respect through clean confidence.
2014 - 2018
Aa
Graphic & Web Design Portfolio
Float like a butterfly, sting like a bee.
Salomon Onyegbulem
Insurable Risk Conference
Visual Identity for Insurable Risk Group I designed this graphical logo for the Insurance group conference of 2017. A proportional abstract lock representation using the first individual letters of the event.
44
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Parallel Design
What’s Parallel Design? Sometime mid 2016, I and a gutsy group of developers and designers assembled to form a multidisciplinary design group which we called “Parallel.” We were tasked with the Re-branding of the Old Courthouse Theatre of Concord North Carolina. The 11 of us were tasked with marketing, website design, and development, and the production of promotional collateral in support of the theatre. The following pages detail the visual identity I proposed for our group.
46
Graphic & Web Design Portfolio
2014 - 2018
48 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
50 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
52 Salomon Onyegbulem
Graphic & Web Design Portfolio
Pretiola
About pretiola Pretiola ( little rewards / little bracelets ) is an Italian pastry company that sells delicious and expertly crafted pretzels and pastries. This company has been delighting its customers and with its delicious pastries for over 20 years.
2014 - 2018
54 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
56 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Career Quest at BAE Systems
All-Day Job Shadow Event Bae Systems recently hosted a job shadow event at the Enterprise Shared Services functional site in Charlotte NC where we invited army veterans and university students to learn what it’s like to work inside a BAE Systems’ functional team.
58
Graphic & Web Design Portfolio
2014 - 2018
60 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Job Shadow Day Brochure
62
Graphic & Web Design Portfolio
BAE System’s 2016 career intro Flyer / Brochure for the Information and Technology brand identity and create an impression of continuous movement at a glance.
2014 - 2018
functional team. Clean lines and strategic use of negative space to reinforce BAE’s
Ashlyn Austin
64 Salomon Onyegbulem
Graphic & Web Design Portfolio
Ashlyn Austin’s Personal Website Ashlyn V. Austin, a Film Maker and Photographer commissioned the launch of her personal website and
Check it out here:
invited me assist with its design and development.
www.ava-films.com 2014 - 2018
66 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
The Art Guide
68 Salomon Onyegbulem
Graphic & Web Design Portfolio
Artists Source of Information The Artguide combines the country’s most successful art organizations, museums,local galleries and artists into
Check it the previous site here:
one comprehensive resource of up-to-date listings.
www.theartguide.com 2014 - 2018
70 Salomon Onyegbulem
Graphic & Web Design Portfolio
2014 - 2018
Salomon Onyegbulem
Sources :
Berger, Jonathan. “Subjective Design & Objective Design”. pivotal.io. |
erview by Anna Winston. “People who don’t like comic sans don’t know anything about design.” |
Johnson, Joshua. “The Difference Between Good Design and Great Design.”
UX BEST PRACTICES Good
Bad
No visual treatment should ever be applied casually. Each element helps support a visual system that emphasizes the user
user
Color & Shape
Text Length
Certain colors and shapes have become synonymous with specific meanings in digital design. Be mindful of these norms, as mixing them up can cause confusion to the user.
If you’re working on a product that will be used internationally then consider how long the text content could be in other languages.
Text & Object Alignment
Visual Aids
Visual treatments are applied out of novelty, with little to no consideration to their effectiveness. User is emphasized second
interface
Alignment & Spacing
Color & Shape
user
Text Length
Settings
Align Text
interface
Alignment & Spacing
Configurações Make sure alignment and spacing are correct.
Accuracy
The example above shows what happens with the German and Portuguese translations of Settings — an increase of up to 75% in length.
Text & Object Alignment
Visual Aids
Align Text
14
Information
Green and ticks are commonly used to indicate good, Likewise red and crosses indicate bad. Jumbling the two up can create a mixed message. Similarly, yellow and triangles are often associated with warnings, blue and circles with information
6
There is an awkward sense of distance between objects
Accuracy 14
Information
6
Try to vertically center text to an object using The x-height, rather than the cap height, as it Gives a better optical alignment
Try to give users visual aids such as icons and colors to help them identify important content on a page.
The objective design process
Before starting any work, one must take the time to understand both the business and the audience in order to create a sensible set of goals. This ensures that the final outcome not only looks good but performs as intended too. Take the time to experience whatever you are trying to promote.
In the bad example above you can see that the main visual weight of the typeface, located in the x-height area, sits lower than the square.
Colour coding is a handy way to identify different types of content — something which can be especially useful for those with cognitive impairments.
Ensures the project is understood inside and out by discovering competition, target audience etc...
User Experience Rules 101
Idea Generation & Design
Incubation
Reference
Research & Discovery
Inaccurate representations can mislead and deceive viewers
This is where you explain how and why you made the design decisions you made. Let marketing handle this part ( no – seriously... leave the designers out
Brainstorming and word mapping sessions, a very organic process varying form projct to project. Continually experiment to ensure that ideas are presented in their best possible light
Creates the foundation for the decisions made during the design phase
Brief
Visualizations should represent their values proportionally
Revisions
Presentation
The subjective designer’s limbo. Every designers worst nightmare if previous (3) three steps are skipped, else it provides the opportunity to refine a great idea
Delivery
Support
Once the design is complete, assisst with any deployment / development processes. this is usually ongoing.
The infographic covers core principles and topics that apply to digital design and its relevant tools. Applicable to both experienced professionals and design students; it offers a quick start guide to some of the processes and thinking that results in better User Experience.
72
Primary Source: Modern Airplane Technology: 1950-1999 Science and Its Times . Gale group . 2001 Updated: January 01, 2010 . World History in Context . Nov 25, 2016 . Web
1780
1452
1800
1905
1930 - 2000
Leonardo da Vinci
Hot air baloons
Gliders
Wright Brothers
Bigger, Better, Faster, Safer
Many times throughout history, man has tried to copy birds' flight and failed. Italian inventor, artist, and scientist Leonardo da Vinci (1452-1519) sketched flying machines in the 1500s and even made some models.
The first successful flights, where in form of hot-air balloons. In the late 1850s, balloons were enhanced with steam engines to create airships
The English aeronautical pioneer Sir George Cayley’s glider was the first aircraft to take a man into the air.
Man's fascination with flight took off in 1903 when the Wright Flyer flew for a breathtaking 12 seconds.
In the 1920s and 1930s, planes became bigger, stronger, and faster, reaching speeds of up to 300 miles per hour (483 kph)
By 1905 the Wright Brothers, could keep their plane airborne for a distance of more than 20 miles (32 kilometers)
The emphasis in jet building was to accommodate a growing number of travelers and to meet the insatiable need for greater speed and reduced travel time
A hot air balloon is a lighter than air aircraft consisting of a bag, called an envelope, which contains heated air.
Evolution ofAircraft 1920s-2000s
The Spirit of St. Louis. is the custom-built, single engine, single-seat monoplane that was flown solo by Charles Lindbergh on May 20–21, 1927,
Maximum speed:
Range:
First flight Retired Produced Number built Unit cost
133 mph 2,150 lb
Empty Weight:
4,100 mi April 28, 1927 April 30, 1928 1927 1 $144,931.51
Heinkel HE-178
de Havilland Comet
Boeing 707-121
X-15
The Heinkel He 178 was the world's first aircraft to fly under turbojet power, and the first practical jet aircraft. It was a private venture by the German Heinkel’s emphasis on developing technology for high-speed flight
The de Havilland DH 106 Comet was the world's first commercial jetliner. It featured an aerodynamically clean design with four de Havilland Ghost turbojet engines buried in the wings, a pressurised fuselage, and large square windows
The Boeing 707 is a mid-sized, long-range, narrow-body, four-engine jet airliner built by Boeing Commercial Airplanes from 1958 to 1979. Its name is commonly pronounced as "seven oh seven"
The North American X-15 was a hypersonic rocket-powered aircraft part of the X-plane series of experimental aircraft. The X-15 set speed and altitude records in the 1960s, reaching the edge of outer space and returning with valuable data used in aircraft and spacecraft design.
Maximum speed:
380 mph
Maximum speed:
520 mph
Maximum speed:
570 mph
Maximum speed:
4,520 mph
Empty Weight:
3,572 lb
Empty Weight:
120,000 lb
Empty Weight:
109,700 lb
Empty Weight:
14,600 lb
Range:
125 mi
Range:
1,500 mi
Range:
2,300 mi
Range:
First flight Retired Produced Number built Unit cost
August 27, 1939 ??? 1939 1 ???
First flight Retired Produced Number built Unit cost
July 27, 1949 March 14, 1997 1939 ??? $275,000
Maximum speed:
391 mph
Empty Weight:
14,950 lb
Range:
14,154 mi
Sept 17, 1959 lol 42 Feb 8, 1998 $ 131.4 million
The Northrop Grumman RQ-4 Global Hawk is an unmanned (UAV) surveillance aircraft.The RQ-4 provides a broad overview and systematic surveillance using high-resolution synthetic aperture radar (SAR) and long-range electro-optical/infrared (EO/IR) sensors with long loiter times over target areas. It can survey as much as 40,000 square miles (100,000 km2) of terrain a day.
Dec 20, 1957 March 14, 1997 1958 1,010 $4.3 million
First flight Retired Produced Number built Unit cost
280 mi June 8, 1959 Dec ?, 1963 Sept 17, 1959 3 ???
UAV Hawk Research in subsonic military aviation technology has focused on the development and operation of unmanned aerial vehicles (UAV) The emphasis in jet building was not only to improve passenger safety but to accommodate a growing number of travelers and to meet the insatiable need for greater speed and reduced travel time.
Salomon Onyegbulem 2015 --- Aircraft Research Infographic
Evolution of Aircraft
Graphic & Web Design Portfolio
First flight Retired Number built Produced Unit cost
First flight Retired Produced Number built Unit cost
This infographic details some of the finest civil and military aircraft ever made, from classic 1920s general purpose light bombers to the latest military wonder planes like the UAV Global hawk. Unique specification tables provide 2014 - 2018
comprehensive information on origins, speed, weight, range, and more.
Salomon Onyegbulem
Thank you!
Acknowledgements
74
Mom & Dad
Mark Biller
Jorey Jones
Mrs. Kathleen brockman
Sheena Bright
Mr. Bob Franklin
Mr. Robert Jamieson
Alexander White
Mr. BelleIsle
Dr Tony Reese
Mr. Edwin Cousins
Almedina Gracic
Mr. Drew Kinney
Mrs. Leslie Warner
Zonta Baker
Mr. Zachary Nicholas
Ryan Dolan
Dana Al-husseini
Mr. Helms, James
Sarah McEntire
Hannah Byars
Mrs. Julia Winfield
Tyshon Coleman
Jesse Carboro
Ethan Vance
Mary-Mac Stallings
Colleen Carnaggio
Justin Lowery
Maria Cuebas
LaToya Chapman
Justin Brown
Valarie Udeh
Neese Walker
Audery Morgan
Tunde
Ty Adams
Krissa Gene Dover
Chasity Allman
Autumn Zizza
Vika Arkhipova
Ryan Hall
Mpho
Brenton Bent
Mr. William Black
Dennis Goldberg
Jhon Mudd
Darian Lawrence
Chris Brice
Stephen James
Mr. Todd Atkinson
Keston Blackman
Zac McElhaney
Jamil Metcalf
Vivian Onyegbulem
Almedin Gracic
Mrs. Elizabeth Jhonson
Josh Coen
Martin Palmeri
Charlie Jones
Blanca Hunter
Tabitha Leis
Tom Pham
Cole Brewton
Stephanie Robles
Kristine Maddix
Mr. Frank Pope
Jason Kelly
....
Herbert Murell
Phillip Eckles
Mrs. Pat Rose
Jay On Mitchel
Sarah Bush
Tara Wilson
Graphic & Web Design Portfolio
Mike Fernandez
2014 - 2018
Salomon Onyegbulem
Printing & Binding
Blurb www.blurb.com
Designer
Salomon M. Onyegbulem hello@salomono.com
Photographer
Ashlyn V Austin www.ava-films.com
76
Circular STD
Material
80# Matte ( 118 GSM )
Copyright
© 2018 Salomon M.O
Graphic & Web Design Portfolio
Typography
All rights Reserved
2014 - 2018