Salut le fofo zé les graphistes    
 
je prépare actuellement mon site perso. Il sera très sommaire car faut plutot que ce soit une vitrine de ce que je fais en graphisme, on pourra appeler ca un portfolio ou un book.
 
le site sera composé de quatre rubriques générales :
 
Services (ce que je propose en somme)
Realisations (le book)
Liens (vers les collegues et les communautés)
Contacts (faut bien manger hein )
 
donc je bosse actuellement mon design, surtout sur le header pour le moment.
Je ne veux pas faire "trop" ni "trop peu" je mise sur la sobriété et le confort de lecture.
 
l'architecture.
pour le moment j'ai une colonne de 800px, je ne sais pas encore vraiment comment architecturer mon site, si je prends une colonne sur un des cotés... mais comme le site sera vraiment léger sur trois des quatres rubriques je pense que je vais fonctionner avec une seule colonne centrale. Juste le portfolio fera appel a du flash je pense.
 
Donc voici ou j'en suis niveau visuel
 

 
les commentaires sont les bienvenus

Salut
 
Sobriété - c'est bon en ce qui concerne le header en tout cas
 
Confort de lecture - difficile à dire sans texte
Le texte des boutons est peut-être un peu "coincé" mais même à cette taille (et en 1024 sur un 10" ) je peux les lire.
Par contre on dirait que t'as un petit soucis sur les 3 premiers non ?  
 
Pourquoi flash pour le portfolio ?

la le screen est passé en 600px de large.

je suis parti sur un PSD de 1280 avec une colonne de 800px de large

de quel soucis parles tu sur les 3 premier?

et pourquoi le flash en portfolio? bah un peu de dynamisme et d'interactivité ca peut pas faire de mal

J'aime tes biseautages et tes estampages…  

t'es chié y en a qu'un seul sur le haut du header

Si tu veux que ça rentre complet dans un écran de 800px, prévois un peu de marge sinon les gens en 800ps auront une barre de scroll horizontal.

y'a comme un trou avant les parties rouge (et des trucs en dessous) tu vois pas ?

euh je dirais que ça dépends... faire un effet pour faire un effet ça sert pas trop, ça peut même être nuisible [moins vrai si tu proposes de la créa web, dans ce cas ça sert de démo]
Si ça apporte un confort, de l'info en plus, de l'ergonomie alors oui... après faut voir si le flash est adapté.

pour le flash je pensais a un truc léger hein genre vignette et apercu en agrandissement tu vois le genre, le truc qui passe le site en fondu de noir et zoom sur la vignette.
 
sinon un portfolio en coverflow
 
pour les boutons je vois aucun probleme particulier ils sont identiques mis a part la lueur interne sur le bouton actif

coverflow ?
 
Pour l'effet pensé, ça me semble faisable en JS.

Autant pour moi, c'est l'intervalle entre les boutons et les reflets de ces intervalles que j'ai trouvé bizarre sur mon ptit écran

+1
 
En plus, Flash ça pue, c'est un truc de naab...
Regarde du côté de FancyBox / ShadowBox / JCoverFlow qui sont des outils très simple à intégrer...
 
Et même si la manip te fais peur (si le web t'es étranger), on peut t'aider, je m'y engage personnellement...    
 
Par ailleurs, j'ai personnellement le projet de faire un SimpleViewer-Like en XML/PHP/JS/Ajax, avec un panel d'administration derrière...

Oki après si y a des alternatives je suis preneur  

Effectivement abais ce que tu suggères irais parfaitement c'est l'effet recherche  

le flash juste pour du kikoolol pour les boutons et autre c'est à éviter.. le flash est beau quand c'est une création à part entière si tu vois ce que je veux dire
 
 
Sinon tout se fait sous Jquery ! y a pas photos
 
drapal, j'attend la suite

 
+1 et drapal    

a ma decharge je ne suis pas webdesigner hein

pitite update
 

le CandySticker rouge de droite, c'est une scrollBar ?

Ouais un Pov test

Je trouve domage que le logo ne reprenne le jeu du 3 inversé. Il y a un décalage de fait et on se demande lequel est identifiant.
Sinon c'est graphique et sobre mais un peu trop 90 à mon gout. J'aurais bien vu des teintes dans oranges et beiges, plus modernes, plus péchues qui fassent moins packaging pour un lecteur MP3 ou un casque HIFI. La compo à l'air très chouette et la lisibilité est top mais le résultat est je pense en dessous de ce que tu peux faire graphiquement du fait de ces couleurs.

 
 
+1

c'est prévu Mr
c'est juste que je n'ai pas encore recalculé l'image avec le nouveau logo

et pour les couleurs, j'ai volontairement squizzé des complémentarités trop "pechues" et chaudes, je préfère rester dans une certaine neutralité en fait.

En faite, je pense que ce sont les dégradés qui font "too much" et du coup "années 90". je trouve que les utilises trop, un dégradé doit être utilisé à petite dose sinon ça donne vite quelque chose de pas très esthétique.  

techniquement des degradés j'en ai qu'un seul qui se trouve sur l'arrière plan.
 
le reste n'est que masque de fusion et kueur
mais bon ... ok au final ca fait des degradés

C'est à ça qu'on voit les pros... moi j'aurai dit "machins rouges"

Noir blanc rouge je trouve pas ça très neutre en voyant l'ensemble de la page.  
C'est déjà sobre par la "forme", si tu ajoutes pas un peu de peps je crains que ça passe de la sobriété à l'austérité... enfin perso je trouve pas ça très engageant.
 

Ça n'a rien de professionnel, les "CandySticker (edit) CandleStick" c'est le nom qu'on donne aux graphiques de données représenté par des barres vertical et des curseurs dessus

... C'est le premier truc auquel j'ai pensé...

Genghis, je ne suis pas fan de l'espèce de lueur externe blanche (légèrement turquoise, ou est-ce mes yeux qui me jouent des tours ?)...
Bon, c'est pas très constructif mais bon...

j'avais testé des motifs "floraux" sur les cotés, ca faisait pas degeu.. j'avais mis une lueur diffuse d'une autre couleur... mais pas convaincu

je suis entrain de me battre avec le code pour placer mes images
 
punaise décidément, le web c'est vraiment pas pour moi

Le placement c'est pas le plus simple à appréhender

bon il me reste plus qu'a réussir a centrer mon BG et a eviter qu'il se repete

pour le code, je pense pas quece soit le plus propre qu'il puisse y avoir, ca doit pas etre un model du genre

Je comprend pas...
Tu commence par appeler un fichier design.css
et ensuite tu défini la position de toutes tes images en CSS en dur dans ton code HTML... pourquoi ??
Tout ton CSS devrait être dans ton fichier css...

ouais non j'ai viré l'appel au CSS pour le moment.
chaque chose en son temps, j'aimerais deja comprendre la base après je ferais mon CSS comme il faut

pour le moment j'arrive pas a placer mon BG centré par rapport au <div> et a eviter qu'il se repete

En utilisant les attributs : center et no-repeat ?

je place ca a ce niveau on est d'accord?
 
<body style="background-image: url(images/BG.png); center; no-repeat;">

Oui mais là ça va être très laborieux pour toi (et pour ceux qui lisent ton code actuellemnt aussi). C'est pas une bonne méthode.
Ce que tu peux faire c'est développer ta CSS dnas le html (dans le head à l'intérieur de balise <style type="text/css"> ). Et qd ce sera fini tu pourra créer ton fichier css par un simple copier-coller.

Je te conseille l'utilisation d'un bloc-note évolué (notepad++ par exemple ou komodo edit - plus lourd ) et pour tatoner sur les CSS l'utilisation de firebug, add-on de firefox, qui te permettra (entre autre) de modifier les css de n'importe quelle page ouverte en temps réel

là je suis sur SKedit sur mac.
 
sur le paycay a la maison je mettrais notepad++
 
donc je part plutot sur le CSS alors?
 
donc si j'ai compris... ou pas du CSS je peut placer mes images  ou elles doivent se trouver sur la page ou non?
 
j'ai fais mon decoupage déjà.
 
j'ai le site(header) qui fait 800px de large, a ça je rajoute environ 30px de chaque cote pour les ombres portées du header.
 
dans le CSS je peu dire par exemple que headerG.png va a N px en X et N px en Y c'est ca?

Bonne balade dans le monde du CSS mon petit gars    
tiens, je ne sais pas si on te l'a déjà donné ou pas, mais c'est un très bon site traitant du CSS (et dont l'auteur était HFRien il me semble)  
http://www.alsacreations.com/
 
 

Sincèrement tu te fera moins chier après
Ca peut impliquer que tu mettes des class ou des id à tes éléments html, puis tu cibles ces éléments dans la feuille de style.
 

Pas sûr d'avoir compris...
Pour les images t'as le choix : soit via un élément (html) img , soit en propriété CSS background d'un élément (comme t'as fait pour le body)
 
Quand utiliser l'un ou l'autre ?
L'image est un élément décoratif -> CSS -> background (ex fond de bouton)
l'image est un élément de contenu -> html -> img (ex une image de portfolio)
 

Oui tu peux avec le positionnement absolute. C'est pas le plus simple à lire et modifier mais c'est le plus simple à comprendre vu c'est un peu comme des calques.

la en gros j'ai  :
 
le background
un div pour le header/menu (je peut eventuellement séparer ces deux elements en deux Div)
un div pour le conteneur
et je rajouterais peut etre un div pour le footer
 
les seules images qui "contiennent" sont celles du menu sinon c'ets du décoratif

Ben justement les images du menu (les boutons) ne sont pas vraiment du contenu, tu ferais mieux de les mettre en BG.
Par ailleurs en les mettant en img tu te simplifie pas la vie pour le changement d'apparence au survol de la souris.

un lien en passant http://fr.selfhtml.org/css/proprietes/index.htm
(et n'hésite pas à te plonger dans alsacreation !)

le problème des divs avec bg à la place d'images, c'est en terme de référencement. un IMG avec des attribut TITLE sera référencé alors qu'un div sans rien avec juste un bg, c'est mort..

oui sauf qu'on a pas parler d'élements vides .
Les boutons ici sont des éléments d'une liste, le 1er <li> va contenir "Services" et le bg de cet élément, le graphisme.