En perspective de la semaine 2 du module Webdesign,
j’ai pu proposer un site web à une association, voici le rendu :
www.lamaisonbleuemarraleck.com
site html test : http://sarah.lehublot.link/
En quelques mots
La Maison Bleue : c’est une association de soutien scolaire proposée aux enfants du village d’Ouled Hassoune à Marrakech. Là-bas, l’accès à l’école est très réduit depuis le covid. Des dons sont nécessaires pour permettre le maintien de cette association.
Je participe bénévolement à cette association depuis quelques années maintenant en gérant leurx réseaux sociaux, création de contenu, création de leur logo, etc.
Définir les points forts du client
Avant de réaliser un site internet pour un client, il est important de définir en amont les arguments qui pourront convaincre les utilisateurs du site. Exemple avec La Maison Bleue :
Point fort 1 : transparence des dons, suivi des dons (articles “: “vos dons en action” : Ali intègre une école privée, arrivée des fournitures, habits, etc)
Point fort 2 :
Mise à jour
régulière des
activités proposés
aux enfants
Point fort 3 :
un avenir
meilleur pour
les enfants de Marrakech
Point fort 4 :
l’équipe est directement
sur place, au
quotidien avec les enfants
Le contenu
Idées d’onglets :
– Accueil (rajouter notre équipe)
– Actualités (atelier cuisine, fête de fin d’année, etc):
– Notre action
– Nous découvrir (qui sommes-nous; galeries; nos partenaires; on parle de nous)
– S’engager (faire un don, opérations solidaire(ou projet en cours), parrainer un enfant, devenir bénévole, envoi de fourniture?)
-Faire un don
Typo, couleurs, etc
La typographie du logo : “Cookie Monster Font”. Ses couleurs : 4AAFDB et 4d4949
Ces infos peuvent nous inspirer pour la suite : réaliser la maquette du site !
Figma
Pour réaliser la maquette d’un site on commence par réaliser un Zoning Web (en général pour déterminer le plan d’action avec le client), puis on peut commencer la maquette sur figma.
Le 07/02, je débute la maquette sur figma, les couleurs choisies sont les suivantes : 4AAFDB et 4d4949
Maquette finale figma :
https://www.figma.com/file/YsRFrAMlHNYFdhI0G8XYli/La-Maison-Bleue?node-id=85%3A125&t=IjBvkTodD8p6s8FZ-1 (lien figma)
ou version pdf :
Notes:
– Pour diminuer le poids d’une image > ouvrir l’image dans photoshop > Image > Taille de l’image > Dimension des pixels > mettre la largeur à 2000px > ok. Enregistre l’image sous (ou directement lors de l’enregistrement du fichier > enregistrer pour le web)
– Rajouter “/admin” après le nom de son site pour accéder à l’accès admin. Puis rentrer ses identifiants
WORDPRESS :
lien d’accès : https://www.lamaisonbleuemarrakech.com/wp-admin/
-extension pour installer formulaire de contact : NINJA FORMS
-extension blocs/boutons/etc :spectra gutenberg
– extension pour organiser les articles : postorder
-toujours installer extensions de sécurité : iThemesSecurity et Cerber (à télécharger et installer en extension)
Site à connaître :
Site pour évaluer son site : gtmetrix.com
Site pour transformer ses photos façon manga : picrew
Site pour trouver des sites statiques (ou maquettes) : html5up.net
Site d’hébergement : OVH / IONOS / O2SWITCH / LWS
Site qui donne les codes des couleurs principales d’une image : canva/colors/color-palette-generator
Sites pour trouver des typographies : fontjoy.com
Inspiration de maquettes : onepagelove.com
Inspiration de sites : awwwards.com ; hero image webdesign sur google ;
transformer un site en figma : htmltofigma.com
Site sympa : beyonds.fr
Compresser un fichier pdf : https://www.ilovepdf.com/fr/compresser_pdf
Idée de maquette : taper landingpage sur google
