ivana_portfolio.pdf

IVANATODOROVSKIwww.behance.net/todorovski www.dribbble.com/ivanawww.daily-ui.com/ /

Mobile: +6584311136 Email: [email protected]

http://www.behance.net/todorovski

http://www.dribbble.com/ivana

http://www.daily-ui.com

mailto:[email protected]

My Clients

Countries where my clients are from

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.

http://www.daily-ui.com

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.

BRANDINGUSER INTERFACE

Homepage

Setting the delivery address Selection of restaurants for delivery

Menu page with items added in the cart

Checkout

Registration 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.

Wireframes

From wireframes to design

User Interface

Homepage

List your service Page

List your service Page

Dashboard

Search results

Listing

Negotiation process

Private chat

Dashboard

Rating and comment after the service is done

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

http://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


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


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.




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


Frutiger Bold / Minion Pro


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


Garamond / Futura


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


Myriad Pro Bold Condensed / Minion Pro Italic


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


Superclarendon Bold / TradeGothic Light


Franklin Gothic Medium / Baskerville


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


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


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


COMMUNICATION

FATHERHOOD FATHERHOOD

RESEARCH

TEAMTEAM






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

http://www.creativemarket.com/ivana_t

Documents

ivana_portfolio.pdf