Reflectiv's blog

Come here to get some fresh air!
About Me

This is the Reflectiv.net blog.
We share our news, thoughts and everything we think could interest you :)

My Other Sites
Twitter
Contributors
Tags
Archive
2012 (2)
2011 (6)
2010 (20)
2009 (30)
2008 (46)
2007 (9)
Filed under

Design

See all posts on posterous with this tag »
 

20 à faire et à ne pas faire pour un design web fonctionnel

Voici un article anglophone qui apporte des conseils sur la réalisations de design web efficaces. Bien que certains points soient évidents, d'autres sont très intéressants à prendre en compte.

Comme d'habitude, je vais faire un résumé ici de cet article, et je vous invite à aller sur le site anglophone afin d'avoir plus de détails :)

  1. A faire : Gardez votre page structurée
  2. A ne pas faire : Mettez des boîtes n'importe ou !
  3. A faire : Mettez l'accent sur les éléments important
  4. A ne pas faire : Placez des publicités sans aucun rapport partout sur votre page.
  5. A faire : Choisissez un schéma de couleurs approprié
  6. A ne pas faire : Jouez avec 20 couleurs différentes
  7. A faire : Facilitez la lecture de la page
  8. A ne pas faire : Ecrivez un paragraphe de plus de 1000 mots par pages
  9. A faire : KISS : Faites simple !
  10. A ne pas faire : Faites, faites, faites sur n'importe quoi
  11. A faire : Mettez l'accent sur les textes essentiels
  12. A ne pas faire : Remplissez vos pages de mots clefs
  13. A faire : Mettez en place une navigation claire
  14. A ne pas faire : Obligez vos visiteurs à rechercher sans cesse
  15. A faire : Optimisez le temps de chargement de vos pages
  16. A ne pas faire : Tout sur votre page sont des images (ou tableaux)
  17. A faire : Choisissez une bonne taille et type de police
  18. A ne pas faire : Utilisez 5 différentes tailles et 10 différents typesde polices
  19. A faire : Rendez votre page visuellement attractive
  20. A ne pas faire : Mettez plein de bordel les uns à côté des autres et penser l'avoir bien fait !

Voilà pour cette petite liste.

Le site illustre son article d'images de sites utilisant les bonnes pratiques (mais pas les mauvaises ;)). Chaque points sont agrémentés d'une petite description, pas très longue, ce qui rends l'article intéressant à lire.

Filed under  //  Design   effective   fonctionnel   web  
Posted by Cyril Nicodème 
 

Graphique de flux d'une application web

Le site du framework CodeIgniter propose un graphique expliquant le fonctionnement de leur framework lors de la demande d'un fichier.

Je trouve ce graphique très complet et précis, qui permet de regrouper la majorité des éléments que nécéssite un framework fonctionnel.

Media_httpblog1reflec_gecir

Une structure simple mais efficace !

Plus de détails ici.

Filed under  //  Design   Development   General   Projects   application   chart   codeigniter   flow   flux   framework   graphique   request   web  
Posted by Cyril Nicodème 
 

Why the form validation are in the View part ?

The question is quite clear and I'm going to explain my point of view.

If you take a look at Struts or JSF,and I'm sure, for a lots of others frameworks out there, the form verification are made in the View side.

For example, this is a wrong method (IMHO) used by JSF templates :

<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
   <h:form>
      <h:outputText value="Name: "/>
         <h:inputText id="name" required="true" maxlength="20" value="#{user.name}">
            <f:validateLength minimum="3" maximum="20"/>
         </h:inputText>
         <h:message for="name" style="color: red"/>
         <h:commandButton value="Submit" action="success"/>
      <h:form>
</f:view>

The point I want to raise is the fact that it's generally the job of the web designer to make the template, the forms, but NOT to make the verifications !

Yes he need to know which value is needed, eventually which type is waited (for implementing nice date picker for example), but not to test if the string is too short or too long, if it's an email, etc.

The side that must handle this kind of operation must be the Controller, that know which type a field must be. Eventually, the Model side can impose its structure to the controller, but never the View side ! A webdesigner must never impose the structure of the data. Right ?

Ok now everyone is boiling about what javascript is able to, and I totally agree with that, but with restrictions.

Client-side verifications must be implemented only to improve user experience. Never forget that javascript can be disabled !

But it's a great idea to tell at your webdesigner the constraints for the form in the fact that he could implement a client-side verification, and then, your controller will do the server-side (final) verification, in case javascript is disabled, or some bad guy try to play with your code :p

I would be pleased to know your opinion about that :)

Filed under  //  Design   Development   General   Javascript   Projects   ajax   controller   model   mvc   side   template   view   webdesign  
Posted by Cyril Nicodème 
 

[Design] - Todays news (21/10/2008)

Aujourd'hui, divers liens sur divers domaines :)

Commençons par plus de 35 tutoriaux de création d'élément naturels sur photoshop, ainsi que 45 sets de pinceau pour Illustrator. Nous poursuivrons ces liens avec plus de 30 tutoriaux ou ressources exceptionnel sur GIMP (histoire de vous montrer que l'on peux AUSSI faire de bonnes choses avec !).

On s'oriente plus côté web design maintenant avec un article intéressant sur comment les logos Web2 sont réalisés, 37 façons différentes de dessiner un formulaire de commentaire et enfin une introduction a la balise css @font-face pour implémenter ses propres fonts sur un site web.

Enjoy ! :)

Filed under  //  Design   comment   font-face   formulaire   gim   logo   news   octobre   photoshop   ressource   today   tutorial   web2  
Posted by Cyril Nicodème 
 

[Design] - Todays news (20/10/2008)

Aujourd'hui, plusieurs liens sympas dans divers domaines.

Commençons par 60 Template et Designs gratuit pour vos sites, suivit de près par 25 bon designs qui inspirent, pour finir sur 20 sites web qui vont vous aider à maitriser les interafaces utilisateurs.

Ce dernier point me permet de faire une jolie transition sur une séries de tutoriaux pour débuter en html & css, ainsi que 66 liens pour apprendre les bases du web design.

Je m'orienterai ensuite sur un article expliquant le "MindMapping" à l'aide de la web app MindMeister : Structurer un projet de manière visuelle afin d'avoir la même vue sur le travail, côté client et côté entreprise.

Pour les utilisateurs plus expérimentés, vous trouverez 50 Tutoriels AJAX traitant divers domaine des interfaces utilisateurs ou effet web 2.

Lien connexe : MindMeister

Filed under  //  Css   Design   Html   interface   map   mapping   mindmeister   news   octobre   template   today   user   utilisateur  
Posted by Cyril Nicodème 
 

[Design] - Todays news (16/10/2008)

Aujourd'hui, quelques éléments dans le design, avec plus de 1000 pinceau photoshop gratuits en haute résolution, et une petite liste de 70 sites avec un large arrière plan.

Enjoy it ;)

Filed under  //  2008   Design   arrière   background   brush   news   octobre   photoshop   pinceau   plan   site   today  
Posted by Cyril Nicodème 
 

[Design] - Todays news (07/10/2008)

Aujourd'hui, deux sites de diverses origines.

Le premier traitera des design de menus originaux, tandis que le suivant proposera plus de 45 sources et sets pour des formes spéciale dans photoshop.

Mais aussi les plus beau et les plus inspirants 40designs  de l'année 2008, les 7 ingrédients d'un bon design et histoire de s'inspirer un peu, les 100 plus marrantes pages d'erreur 404.

Enjoy ;)

Filed under  //  Design   menu   news   photoshop   source  
Posted by Cyril Nicodème