Archive pour le mot-clef ‘maquette’

Futur webdiz d’Ishimaru Design – Les maquettes sont prêtes !

Lundi 7 février 2011

J’en avais déjà parlé dans quelques articles ces deux derniers mois, mais cette nuit, je viens de finaliser les maquettes codées des pages de démo pour donner un premier aperçu live de la prochaine version de mon site qui sera caractérisée par un refresh total du design, avec mon fidèle Gimp avec son petit frère Inkscape pour les graphiques et mon Gedit pour le codage XHTML et CSS. Dakin Quelia, mon collègue de phpBB France, a eu la chance de voir quelques pages et ça m’a du coup permise de faire quelques correctifs dans le CSS, notamment pour le menu en haut à droite qui, sous certaines configs, n’avait pas assez de place pour s’y positionner et se trouvait donc décalé en bas.

Voici donc un aperçu de différentes pages :

Aperçu de la page d’accueil

En version connecté

Page des news

Accueil des ressources

Page spécifique à une catégorie

Une liste de styles

Détails d’un style

Une liste de MODs et hacks

Détails d’un MOD/Hack

Accueil des tutoriels

Une liste de tutoriels

Plan du site

Page fixe #1
Page fixe #2

Quant à la partie Forum, ça se fera quand je commencerai l’intégration dans Connectix Boards.

Jusqu’à maintenant, les pages ont été testées sous FF 2.x et 3.6.x ainsi que sous Chromium. Je n’ai donc pas encore testé sous IE, étant sous Linux, mais je sais que les arrondis CSS3 ne fonctionnent pas avant IE9 et j’hésite entre mettre le script Roundies ou non.

Futur webdesign d’ID – Presque prêt à intégrer !

Lundi 27 décembre 2010

Après avoir montré plusieurs variations du webdesign, je viens de le travailler en tenant compte de ce que ceux qui les ont vu ont préféré, ainsi que de certaines recommandations.

Voici donc un aperçu, après retravaillage :

Version quasi-finale de la maquette

J’ai donc pris la variante avec le haut des blocs plus jaunasses et le pied de page plus bleuâtres qui font une combinaison plus audacieuse, en le combinant avec le header plus sombre dont Flamme, qui travaille au bureau avec un écran CRT m’a confirmé que ce n’était pas trop sombre même sur son écran !
J’ai foncé un petit peu le vert jaunasse du haut des blocs suite à un retour (toujours de Flamme) me signalant qu’ils étaient un peu pâlichons.

J’ai donc fait les retouches pour appliquer ce même vert du haut des blocs à d’autres éléments (les lignes des blocs en question, les boutons et champs), question d’avoir plus d’unité.

Prochaine étape : l’intégration ! Mais ça risque d’être un peu ardu, le temps de m’habituer à mon nouveau clavier sans-fil dont la touche pour faire les chevrons (essentiels pour faire du HTML) et les accolades fermantes n’est pas au même endroit. Ça fait bizarre de ne plus avoir les accolades côte-à côte…

Ishimaru Design v6 – Premier jet

Mardi 30 novembre 2010

Après les travaux dans les codes même de mon site de graphisme pour transférer les textes vers des fichiers de langue et pour mettre les modules en include pour une maintenance plus aisée, j’étais depuis en train de penser à un futur design, un où l’ergonomie serait complètement revue, et où l’on repasserait à une largeur fixe, cette fois à 1000px du fait de la rareté des écrans en dessous de 1024*768.

Mais alors, sur quoi se baser quand le site porte un nom japonais ? J’ai tout d’abord pensé à faire un logo avec un pinceau et une palette de peinture qui formeraient les deux lettres, mais je trouvais que ça faisait juste « trop ». Je me suis alors mise à chercher dans les webdesigns asiatiques/zen pour trouver des idées qui colleraient à l’exotisme du nom.

Puis me vint alors une idée : Du bambou ! C’est typiquement asiatique et ça évoque des verts qui ne sont pas trop froids et qui ne font pas trop « fille » non plus. À partir de cette idée, puisque je fais surtout dans le style moderne/sobre, je voulais donc combiner l’oriental avec le moderne.

J’ai donc ouvert Gimp et commencé à faire le layout général en m’inspirant un peu de Drupal et d’Alsacréations. Puis une petite recherhe sur openclipart.org m’a permise de trouver ce que je voulais : un dessin d’un plant de bambou, puisque j’aurais eu du mal à en dessiner un moi-même.

Ensuite, puisque je me suis récemment remise au dessin vectoriel et que je voulais vraiment une touche de renouveau à mon design avec une réorganisation des pages, j’ai ouvert Inkscape pour dessiner les trois icônes pour chacune des trois parties principales du site : les ressources, les tutorieils et le forum. Bref, un peu comme sur alsacréations, et de ce fait, cela me permettrait de regrouper ensemble ce qui correspond à un point commun, comme par exemple les pages de ressources dans la partie ressources. Le menu horizontale varierait donc selon la partie où l’on est.
Quant aux pages telles que la politique d’accessibilité et les autres pages statiques, tout cela serait mis dans le footer. Du coup, cela permet d’épurer la sidebar que je trouvais trop chargée, et de mettre en avant ce qui a plus d’importance. Quant aux coins des blocs internes, j’utilise le CSS3, et je regarderai par après pour un script pour IE si je ne décide pas de faire de la dégradation gracieuse.

Donc, voici un premier aperçu depuis Firefox de la maquette de la page d’accueil, fraîchement codée, vous n’avez qu’à cliquer pour l’agrandir :

Aperçu du futur webdesign de mon site de graphisme

La seule chose que je me demande, c’est si le design n’est pas un peu trop vert. Du moins, le retour que j’ai eu jusqu’à maintenant sur le SDZ m’a dit que c’est le cas.