ivana_portfolio.pdf
Transcript of ivana_portfolio.pdf
IVANATODOROVSKIwww.behance.net/todorovski www.dribbble.com/ivanawww.daily-ui.com/ /
Mobile: +6584311136 Email: [email protected]
DAILY UIAUTHOR / UI DESIGNER
In order to improve my UI skills and experiment with different styles and solutions I started a blog www.daily-ui.com. Each day I spend up to 2 hours creating one UI element and share my progress on social media. I design UI elements or experiences I’ve experienced on websites or apps I use but wish to change, work I’ve previously done but have an idea how to do it better or get inspired on Dribbble.
Each task I start with a rough pen & paper sketch where I brainstorm potential features of the particular UI element. The idea is not to go to much in detail, but to have the usability and user in mind.After the sketch I create the design in Photoshop.
TASTY CARROTCOFOUNDER / LEAD DESIGNER / UI & UX
Startup launched in Croatia and Indonesia. E-commerce website that allows users to search through a number of restaurants and order delivery. Users can register and create their profiles, rate restaurants and dishes. Restaurants are accepting orders through a custom developed app with the detailed statistic information to track their profit. Menus have real photos of food from restaurants and an info about how many people liked certain dish, to make their decision process easier.
BRANDING
Tasty Carrot was created as a friendly, fun and “down to earth” brand. Besides the logo I created two characters who were introduced to all of Social Media and Marketing communication channels. Examples from the Croatian campaigns is on the next page.
RESTAURANT’S APP
Custom developed and designed application for Restaurants, for receiving orders. Restaurants received a sound signal with an incoming order and by clicking on the order could see all the details of the order and the customer. They received a map showing the location where they need to deliver.
CUSTOM PIZZA APP
By dragging and dropping ingredients users can create their own pizza and order it from their desired restaurant.
SERVICE CLICKSLEAD DESIGNER / UI & UX
Malaysian startup, an e-commerce website where users can buy or sell services like plumbing, baking, interior design etc. In a very easy way users can create their profiles and list a service or browse through different categories of listings offered from other users. Users can have private communication and negotiation about certain service and after the job is done they are able to leave a comment and rating.
TYPOGRAPHY GUIDEFOUNDER / AUTHOR / DESIGNER
Typography Guide is my personal project. It’s a guidebook on how to choose and combine typefaces for print and web. The idea came from a personal need to improve my process of choosing type - to make it faster, better and more creative. The book is a result of intensive research and numerous tests of good typeface combinations. Besides typeface combinations book contains important typography rules and theory that help designers and creatives recognise the right typeface. The book is about to be launched on www.typography.guide
Helvetica TITLE Helvetica Bold, 18/20 TEXT Helvetica Light, 9/11
Lorem ipsum dolor sit amet, inani doloreDemocritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum consequuntur. Reque consequat vituperata per id, ludus interesset interpretaris cu mei, has meis praesent ex. Qui ex wisi epicuri. Ius et meliore.
L O R E M I P S U M
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere do-
lores assentior mel, esse noster voluptar-ia an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum consequuntur.
Lorem ipsum dolor sit amet, inani doloreDemocritum interpretaris mel at, vix et discere ali-quam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum consequuntur. Reque consequat vituperata per id.
Lorem IpsumDemocritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior
mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex.
TITLE Helvet. Neue Cond. Black, 20pt TEXT Helvetica,10/13
TITLE Helvetica Bold, 18/21 TEXT Helvetica Light, 10/12
TITLE Helvetica Neue Ultralight 28 TEXT Helv.Neue Regular, 9/11
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z & $
1 2 3 4 5 6 7 8 9 0a b c d e f g h i j k l mn o p q r s t u v w x y z
ff fi fl ffi ffl. , : ; ! ? / “ ‘
4 good combinations with Helvetica
Characters in complete font
I new it!Aren’t you awesome
Jason Williams
43 Point, Helvetica Bold
24 Point, Helvetica Light Italic
24 Point, Helvetica
LOREM IPSUM
He walked slowly
REQUE CONSEQUAT VITUPERATA
35 Point, Helvetica Bold
17 Point, Hevetica Oblique
16 Point, Helvetica
Century
GothicTITLE Century Gothic Bold, 19 TEXT Century Gothic, 9/12
Lorem ipsum dolor sit amet
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nos-trum ex, mei ad tamquam democritum conse-quuntur. Reque consequat vituperata per id.
L O R E M I P S U M
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere do-lores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum consequuntur.
Lorem ipsum dolor sit
amet, inani dolore
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster vo-luptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum consequuntur. Reque consequat vituperata per id, ludus interesset interpretaris cu mei, has meis praesent ex. Qui ex wisi epicuri. Ius et meliore.
LOREM IPSUM
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam
democritum consequuntur.
TITLE Century Gothic Bold, 17pt TEXT Palatino,10/13
TITLE Century Gothic Bold, 19/23 TEXT Adobe Caslon Pro, 10/12
TITLE Bodoni Bold 21 TEXT Century Gothic, 9/12
-> MORE COMBINATIONS: Optima, New Baskerville
A B C D E F G H I J K L M N
O P Q R S T U V W X Y Z & $
1 2 3 4 5 6 7 8 9 0
a b c d e f g h i j k l m
n o p q r s t u v w x y z
ff fi fl ffi ffl
. , : ; ! ? / “ ‘
4 good combinations with Century Gothic
Characters in complete font
Morning coffee
Today is the day
BEAUTIFUL
33 Point, Century Gothic
22 Point, Century Gothic Italic Italic
45 Point, Century Gothic Bold
Days are long
I LOVE YOU
Superstar falls into the trap
16 Point, Century Gothic Regular
30 Point, Century Gothic Bold Italic
18 Point, Century Gothic Bold
Bodoni TITLE Bodoni Bold, 19/21 TEXT Bodoni, 10/12
Lorem ipsum dolor sit amet, inani doloreDemocritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum con-sequuntur. Reque consequat vituperata per id, ludus interesset interpretaris cu mei, has meis praesent ex. Qui ex wisi epicuri. Ius et meliore.
L O R E M I P S U MDemocritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tam-quam democritum consequuntur.
Lorem ipsum dolor sit amet, inani doloreDemocritum interpretaris mel at, vix et discere aliquam vo-cibus. Et discere dolores assentior mel, esse noster voluptar-ia an qui. Ius stet graeci nostrum ex, mei ad tamquam dem-ocritum consequuntur. Reque consequat vituperata per id, ludus interesset interpretaris cu mei, has meis praesent ex. Qui ex wisi epicuri. Ius et meliore.
LOREM IPSUMdolor sit
Democritum interpretaris mel at, vix et discere aliquam vocibus. Et discere dolores assentior
mel, esse noster voluptaria an qui. Ius stet graeci nostrum ex, mei ad tamquam democritum conse-
quuntur. Reque consequat vituperata per id, ludus interesset interpretaris cu mei, has meis praesent
ex. Qui ex wisi epicuri. Ius et meliore.
TITLE Bodoni Bold, 18pt TEXT Optima,11/13
TITLE Bodoni Bold, 22/23 TEXT Myriad Pro, 10/12
TITLE Bodoni Bold, 21/20 TEXT Palatino, 9/12
-> MORE COMBINATIONS: Berkley, New Baskerville
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z & $
1 2 3 4 5 6 7 8 9 0a b c d e f g h i j k l mn o p q r s t u v w x y z
ff fi fl ffi ffl. , : ; ! ? / “ ‘
4 good combinations with Bodoni
Characters in complete font
Dark streetsBeauty in your eyes
MASTER
50 Point, Bodoni Book
32 Point, Bodoni Italic
45 Point, Bodoni Bold
Lorem ipsum
CAN YOU DO IT
FASHION STREET
37 Point, Bodoni Book
30 Point, Bodoni Italic
29 Point, Bodoni Bold
Examples of Specimen Sheets containing some of the best typefaces with up to four successful combinations
COUNTER is the open space in a fully or partly closed area within a letter. The enclosed or partially enclosed circular or curved negative space (white space) of some letters such as d, o, and s is the counter.
Q XBASELINE is the invisible line where all characters sit. The baseline is the point from which other elements of type are measured including x-height and leading.
oAXIS is an imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis.
AMPERSAND is the typographic symbol used to designate the word and (& ) is the Latin symbol for et which means and.
&APERTURE is the partially enclosed, some-what rounded negative space in characters such as n, C, S, the lower part of e, or the upper part of a double-storey a.
nASCENDER is an upward vertical stroke found on the part of lowercase letters that extends above the typeface’s x-height. The height of the ascenders is an identifying characteristic of many typefaces.
h
CROSSBAR or BAR is the horizontal stroke in letters (usually in uppercase A and H). The horizontal or sloping stroke enclosing the bottom of the eye of an e is also a bar.
HBOWL is the fully closed, rounded part of a letters like of some letters such as d, b, o, D, and B. The shape and size of the counter and bowl can affect readability and is also an identifying factor for some typefaces.
pDESCENDER is the part of some lower case letters such as g and y that extends below the baseline. The length and shape of the descend-er can affect readability of lines of type and is an identifying factor for some typefaces.
q
DIAGONAL STROKE is an angeled stroke.
Z
OPEN COUNTER is the partially open space within a character that is open on one end.
EYE refers specifically to the enclosed space in a lowercase ‘e’.
e
C
SERIF is a little extra stroke found at the end of main vertical and horizontal strokes of some letterforms. A typeface that has serifs is called a serif typeface.
r
SHOULDER is the curved stroke aiming downward from a stem.
LIGATURE occurs where two or more graph-emes are joined as a single glyph. Ligatures usually replace consecutive characters shar-ing common components.
�
n
DESCENDER LINE is the invisible line marking the lowest point of the descenders within a font.
FINIAL is usually a somewhat tapered curved end on letters such as the bottom of C or e or the top of a double-storey a. Finial is also known as terminal.
CAP HEIGHT is the height of a capital letter measured from the baseline. It specifically refers to the height of capital letters that are flat—such as H or I—as opposed to round letters such as O, or pointed letters like A, both of which may display overshoot.
e
EAR is a small stroke extending from the upper-right side of the bowl of lowercase g; also appears in the angled or curved lower-case r.
g
HAIRLINE is the thinnest stroke found in a specific typeface that consists of strokes of varying widths.
MEANLINE falls at the top of many lower-case letters such as “e,” “g” and “y.” It is also at the curve of letters like “h.”ccurs where two or more graphemes are joined as a single glyph. Ligatures usually replace consecutive charac-ters sharing common components.
x
X
APEX is the point at the top of a character such as the uppercase A where the left and right strokes meet The apex may be a sharp point, blunt, or rounded and is an identifying feature for some typefaces.
AARC OF STEM is a curved stroke that is continuous with a straight stem.
jBALL TERMINAL is a type of curve. It is a design feature of a typeface or glyph where the end of a stroke takes a roughly circular shape, as opposed to a serif or a square end.
fCROSS STROKE is the horizontal stroke across the stem of a lowercase t or f is a cross stroke. The varying positioning, thickness, and slope of the cross stroke is an identifying feature of many type designs.
tARM of a letter is the horizontal stroke on some characters that does not connect to a stroke or stem at one or both ends.
VASCEDER LINE is the invisible line marking the height of ascenders in a font.
STEM is vertical, full-length stroke in upright characters. The stem is the main, usually vertical stroke of a letterform.
kl
N
p
Important Typography Anatomy elements
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Phosphate / Klinic Slab
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Phosphate / Klinic Slab
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Phosphate / Klinic Slab
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas dese-ruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Helvetica Bold / Garamond
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Frutiger Bold / Minion Pro
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Adobe Caslon Bold / Univers Light
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas dese-ruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Futura Bold / Bodoni
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Garamond / Futura
Lorem ipsumLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Gill Sans Bold / Adobe Caslon Pro
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas dese-ruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Minion Pro / Gill Sans Light
LOREM IPSUMLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Univers Light Italic / Adobe Caslon Pro
LOREM IPSUM
Lorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Bodoni Oldstyle Bold / Futura Light
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Myriad Pro Bold Condensed / Minion Pro Italic
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Adobe Caslon Pro Bold Italic / Franklin Gothic Book
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recte-que intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit sig-niferumque eum.
Trade Gothic Bold / Superclarendon
LOREM IPSUMLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii con-ceptam et sed, ad senserit signiferumque eum.
Baskerville Semibold / Univers Light
LOREM IPSUM
Lorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Superclarendon Bold / TradeGothic Light
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Franklin Gothic Medium / Baskerville
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Georgia / Arial
Lorem ipsumLorem ipsum dolor sit amet, option percipit defini-tiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
PT Serif / PT Sans
Buttermilk and Georgia
LOREM IPSUMLorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii con-ceptam et sed, ad senserit signiferumque eum.
Baskerville Semibold / Univers Light
LOREM IPSUM
Lorem ipsum dolor sit amet, option percipitdefinitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Droid Sans / Droid Serif
Lorem ipsumLorem ipsum dolor sit amet, option percipit defi-nitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit sig-niferumque eum.
Gabriola / Univers Light
Lorem ipsumLorem ipsum dolor sit amet, option percipit definitiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Gill Sans Light Shadowed / Arial
Lorem ipsumLorem ipsum dolor sit amet, option percipit defini-tiones sea ad, ea recteque intellegat scripserit pro. In etiam minim usu, fabulas deseruisse has id. Alii conceptam et sed, ad senserit signiferumque eum.
Outage / PT Sans
Typeface combinations and colors test
FREELANCINGILLUSTRATION / BRANDING / WEB DESIGN
Selection of few International Freelance clients with projects: - web design - branding - illustration - infographics
ABOUTWordpress Theme (business style) with all important UI details and subpages About, Service, Blog, Contact.The theme is designed for the company Invento and launched as a commercial product on their platform.
CLIENTInvento
NEWS REPORT RESEARCH COMMUNICATION TEAM
CAMPAIGNS
RESOURCES PROGRAMMES FATHERHOOD
$
ECONOMICJUSTICE
LOCATION
PREVENTING VIOLENCE
TRANSFORMINGNORMS
SECURITY &CONFLICT
ADVOCACY MEDIA
ABOUTSet of icons and illustrations for a website of the company Promundo - a global leader in promoting gender justice and preventing violence by engaging men and boys in partnership with women and girls.
CLIENTRadish Lab
LOCATION RESOURCES RESOURCES
SOCIALIZATION& HEALTH
SOCIALIZATION& HEALTH
COMMUNICATION
FATHERHOOD FATHERHOOD
RESEARCH
TEAMTEAM
SOCIALIZATION& HEALTH
SOCIALIZATION& HEALTH
SOCIALIZATION& HEALTH
SOCIALIZATION& HEALTH
SOCIALIZATION& HEALTH
SECURITY &CONFLICT
SECURITY &CONFLICT
SECURITY &CONFLICT
SECURITY &CONFLICT
SECURITY &CONFLICT
TEAM
GROUNDRESEARCH
PREVENTING VIOLENCE
MEDIA MEDIA MEDIA MEDIA
MEDIA
TRANSFORMINGNORMS
TRANSFORMINGNORMS
TRANSFORMINGNORMS
TRANSFORMINGNORMS
ADVOCACY ADVOCACY ADVOCACY ADVOCACY
ADVOCACY ADVOCACYADVOCACY
ADVOCACY
LOCATION
PHONE
ABOUTAn infographic created from Annual Report data of Impact Hub, explaining the number of users, their distribution around the world, types of projects they are working on and showing the impact of Hub on the local communities. The infographic was printed into a brochure and distributed as electronic version as well.
CLIENTImpact Hub
ABOUTA set of category icons for a website. Culture Run is an organisation providing people online space where they can offer educational workshops or join other people’s workshops. Each illustration is representing one category offered on the website.
CLIENTCulture Run
ABOUTBranding for US based Sport’s brand selling sport equipment and accessorise on Amazon. The name Boson was already set and the idea was to create a professional, clean, boson particle inspired logo.
CLIENTBoson Sport
DIGITAL DESIGNSCREATIVE MARKET
I’m a Creative Market shop owner with over 2000 sales, 100 000 downloads of freebies and 780 followers. The shops contains templates, icons, illustrations, backgrounds and similar digital resources for designers, bloggers and other creatives. See full shop profile: www.creativemarket.com/ivana_t