Portfolio

2015 2019

Bassim El alami

UX / UI
Branding
Web Design
Illustration
3D
Animation
Sommaire

UX / UI 5
Marmit

Branding 33
Intuity

Web Design 47
Mobibam
UX / UI
Illustration 50
Projets freelance

3D 64
Projets freelance

Animation 74
Projets freelance

5
6 7
8 9
10 11
12 13
14 15
 CHARTE GRAPHIQUE

16 17

MARMIT est une application de partage, de conviventialitée,
une nouvelle manière de partager avec les autres. Avec notre
appli tu peux rencontrer des gens et les inviter chez toi pour
partager un répas ou bien aller visiter d’autres personnes pour
un répas Mexicina, Français ou bien Tailandais. Tout est pos-
sible avec Marmit! Allons bien manger et s’amuser.
18
LOGOTYPE
CONSTRUCTION
Le logo se découpe en deux parties :
Le nom de la marque, Marmit, est mise en valeur
dans une typographie tout en longueur et épais-
seur.
Deux trais sont rajoutés sur la M pour faire appel
a un des éléments de cuisine typique quand il
s’agit de un répas à plusieurs. De cette façon un
mélange de typographie et iconographie est fait,
ils se fussionent et se complémentent pour créer
l’identitée visuelle de Marmit.
La desition ne pas ajouter une baseline vient du
fait de la communication direccte grace au nom
«Marmit» et comment il est reprenté d’une ma-
nière literel et simple au même temps.
19
COULEURS TYPOGRAPHIE

La palette utilisé dans la totalité du logo sont des

C : 0%
Fredoka One
couleurs chaudes, qui font appel à l’enrgie, à la R : 236
M: 73%
conviventialité et qui nous rappelle des couleurs #ec6359 CMJN RVB V : 99
de la cuisine. La couleur gris est utilisé pour créer J : 60% B : 89 Le logo est basé sur cette police de
N : 0%
un contraste et mieux équilibrer l’armonie des caractères. Elle a été redessinnée
couleurs.
pour le logo :
Lorsque le logo est affiché sur écran, il est consti-
tué de rouge, vert, et bleu. C : 30% Les angles sont arrondis surtout dans
#851a34 CMJN
M :98%
J : 60%
RVB
R : 133
V : 26 la M pour simuler les curves d’une
ABCDEFGHIJKLMN
Lorsqu’il est imprimé, il est constitué de cyan, ma- B : 52
genta, jaune, et noir. N : 37% marmit. Cette typographie est utili- OPQRSTUVWQYZ
sée exclusivement pour le logo, et
Il faut toujours respecter et vérifier les références
des couleurs : nulle part ailleurs dans l’identité de
C : 9%
- RVB pour écran (web, mail, vidéo..) #ede9d6 CMJN M : 7% RVB
R : 237
V : 233
marque. abcdefghijklmnop
J : 19%
- CMJN pour les supports imprimés (Packaging,
étiquette, courrier, cartes de visite...)
N : 0%
B : 214
qrstuvwxyz

20 21
 IMPRIMÉ
1cm

2 cm
1 cm

ÉCHELLE MARGES
ÉCRAN
28,3 px

Taille minimale 55 px
28,3 px

Le logo ne doit pas être imprimé Les marges de Les marges de

vide autout du
dans une taille inférieure à 1 cm de logo doivent être
haut car il serait illisible en dessous au minimum aussi
large que le B de
de cette taille. Touba, à toutes les
échelles.
vide autout du
logo doivent être
au minimum aussi
large que le B de
Touba, à toutes les
échelles.

S’il doit apparaître quelque part en

plus petit, alors il faut utiliser la ver-
sion uste avec le symbole M. Affiché
sur écran, la taille minimale est de
28,3px de haut pour le logo-écran.
Marges à respecter
Ne jamais déformer le logo. Les marges de vide autout du logo
Toujours garder les proportions initialles au re- doivent être au minimum aussi
dimensionnemen large qdu couvercle de la M, à toutes
les échelles.
Ne jamais placer des éléments trop près du logo.
Sur n’importe quel support de communication, vous
devez respecter ces marges

22 23
DÉCLINAISONS
Deux déclinaisons des couleurs son
proposés. Une avec un l’orange co-
lorée et une déuxième avec le gris.
Cela permets de pouvoir choisir se-
lon les suports et les éléments qui
vont accompagner les logos pour
créer une bonne armonie.
Ils sont également proposées les
versions en blanc et noir et une
nouance de gris pour avoir encore
plus de posibilités d’adaptation du
logo sans changer son identitée.
24
INTERFACE APP
L’adaptation de l’indentité visuelle
pour l’interface de l’application.
Une mélange des photos, illustra-
tions, iconographie et des couleurs
de la charte graphique construisent
l’univers graphique de la applica-
tion.
Dans cet point les photos font une
partie très importante, elles commu-
niquent le concept de l’entreprise et
elles doivent donner envie de faire
partie d’une Marmite.
25
 Barre de Recherche
ACCEUIL
ICONOGRAPHIE
LIEN MAP

Prix
Iconographie est travaillé en gar- Onglet
dant une coherence graphique avec PAGE EVENEMENT événement Lieu
Nombre d’invités
possible

la marque mais en pensent aux pe-

Détails Type de cuisine
tites dimentions.
Heure

Le besoin de travailler les pictos Texte de

présentation
dans des petites tailles a fait que on Avis Page avec détails
(témoignage+étoiles+
noms de personnes ayant essayé l’aplli)
travaille avec des contours assez fins
et un design epurée. Le plus impor-
tant est ne pas perdre la visibilité de Onglet
chaque picto. Lieu

26 27
 Titre “Vos prochaines Marmites”
RESERVATION Card réservation : Titre + date + lieu

INFOS SUR
VOTRE PROFL
PROFIL

SWITCH EN BOUTONS
MODE HOTE
MES
RESERVATIONS

NOTIFICATIONS
Dessuntenit, sum que inullabor rem-
por molecat fugia aut doluptiatius
etur, utem utatus mo everum aut do-
PAYEMENT luptae nonsequam eostiorit quam
ipsus, volorerumqui nihil iumquos
DEVISE pro voloressit pariae rem vellabore
Liste (voir liste devises Eatwith)
num et harciis ut litibus doluptaque
CONDITIONS alicimus ea qui conseque aspe-
GENERALES rioresto el moluptatur?
Axim iunt quiscium exces molores
tintiam exeressit aliquia tisquia ture-
CONTACT
ro dest parumquam, ventiatur?
Hil moles quaerum ne con con co-
DECONNEXION riam ute est, quasim volessequi o

28 29
30 31
Branding

33
PRESENTATION

Dats’up est une société spécialiste dans la Data et qui accompagne Intuity est une société spécialiste de la Cybersécurité et qui accom-
sur mesure pour répondre aux attentes dans tous les domaines de pagne sur mesure pour répondre aux attentes dans tous les
la Data domaines de la cybersécurité

Data Scientist Tests d’intrusion

Big Data Mise en place d’un SOC
API management Conseils sur les nouvelles politiques de sécurité
Cybersécurité Audits
Formations destinées aux profils IT
Dats’up c’est aussi la possibilité de faire naître des idées innovantes ! Gouvernance
Un projet, un concept ? Ils proposent de vous accompagner Data-protection
concrètement dans la réalisation de vos objectifs de lancement Intégration de solutions de sécurité
de produit.

34 35
BRAINSTROMING LOGO CONCEPTION

36 37
38 39
41
43
BRANDING GUIDELINES
Logo Zone d’exclusion Logo Zone d’exclusion

Nous sommes très fiers de notre logo et nous vous demandons Nous sommes très fiers de notre logo et nous vous demandons
de suivre ces directives pour vous assurer qu'il a toujours de suivre ces directives pour vous assurer qu'il a toujours
la meilleure apparence possible. la meilleure apparence possible.

Icône Icône

44 45
Mobibam est une start-up basée à STATION F, spécialisé dans la
conception de meuble sur mesure fabriqué en France, en auto-
matisant toute la chaîne de la valeur entre la conception en ligne
et la production directement gérée par l’utilisateur.

Web Design

J’avais comme mission la refonte de la page d’accueil et mettre

en avant l’idée de conception de meuble chez soit en 3 clics.

47
48 49
Illustration

51
Tuareg du Hoggar Vieux sage avec le symbole Tafukt
Hommage au groupe de musique TINARIWEN Symbole Amazigh

52 53
MATILDA Scène de vie
Inspirée par KIM JUNG GI

54 55
Création de personnage entièrement en vecteur Concept design
Inspiré par KIM JUNG GI

56 57
Test de reflexion de lumière nocturne Auto-portrait en vecteur
anatomie faciale

58 59
Concept design - Viking Design de produit

60 61
Rotterdam house La ligne 13 - Metro Paris

63
3D

65
66 67
Refonte de la couverture d’album Illustration de STYLO
ELWAN du groupe TINARIWEN Gorillaz

68 69
Test de lumière sur Cinema4D Test de lumière sur Cinema4D
Moteur de rendu : Octane Moteur de rendu : Octane

70 71
72 73
Retrouvez ces animations sur mon compte dribbble !
dribbble.com/BE1

75
 Merci !

Contact :

T 07.82.13.23.20
E elalamibassim@gmail.com
Portfolio
2015 2019
Bassim El Alami