10 tutoriels choisis à la main pour les concepteurs Web débutants

Vous commencez donc à vous intéresser à la conception Web, mais vous avez du mal à savoir par où commencer? Vous souhaitez créer des sites Web géniaux, apprendre à coder HTML / CSS et en savoir plus sur les normes Web et l'expérience utilisateur? Si tel est le cas, nous avons une liste de didacticiels Envato triés sur le volet qui devraient vous aider à commencer votre voyage.!

Premières choses d'abord

Avant de vous plonger dans tous ces formidables tutoriels écrits par des concepteurs et des développeurs très talentueux, rappelez-vous une chose: rien n’est impossible et s’ils peuvent le faire… vous le pouvez aussi, comme je l’ai fait il ya quelques années. J'ai commencé à parcourir des forums liés au design (Envato n'était pas présent à l'époque), à ​​fouiller dans tous les posts relatifs au design web que je pouvais trouver, à essayer moi-même, à faire des essais et des erreurs jusqu'à ce que je crée enfin mon premier site web (ce qui était plutôt mauvais) . N'hésitez pas à demander de l'aide, nous sommes une grande communauté remplie d'amour pour partager nos connaissances gratuitement! Ceci dit, voici une liste de, à mon avis, d'excellents tutoriels de niveau débutant, qui vous aideront à comprendre les termes "web" et "design", vous apprendront comment fonctionnent HTML et CSS, et comment vous pouvez tout faire en toi même. Commençons.

Remarque: certains tutoriels répertoriés ici font partie du programme Plus Membership. Plus d'informations sur Plus Tuts peuvent être trouvés ici.

Commençons par la théorie des couleurs…

"L'importance de la couleur dans la conception Web"

Trop souvent, je vois un excellent concept de design avec un mauvais choix de couleurs. La mise en page, la typographie et la couleur sont des éléments qui font de la création Web une activité «géniale». Lorsque chacun de ces aspects se complètent, un grand design naît.

Hiérarchie visuelle dans la conception Web

Tous les jours, je consulte toutes sortes de sites Web et toutes sortes de designs. Une hiérarchie visuelle forte est une caractéristique commune des modèles réussis sur ThemeForest ou des sites Web sur le Web. Souvent, je vois des modèles qui ont un bon concept mais dont la hiérarchie visuelle est médiocre. Je vais couvrir ce que la hiérarchie visuelle est et quelques grands exemples dans cet article.

Erreurs courantes dans la conception Web

Beaucoup de modèles rejetés ici sur Themeforest souffrent des mêmes erreurs communes: typographie (police, hauteur de ligne, espacement des lettres, couleur), alignement (grille) et espacement (remplissage). Dans ce tutoriel, nous allons examiner de plus près comment éviter ces erreurs courantes.

CSS: les toutes premières étapes

Celui-ci est destiné à ceux qui espèrent faire leurs premiers pas dans la conception web. Ce didacticiel vidéo de 70 minutes Plus suppose que vous n’avez aucune connaissance en CSS. Au cours du screencast, vous apprendrez la syntaxe de base, une multitude de propriétés différentes et la manière de créer le début de votre tout premier site Web..

Concevez et codez votre premier site Web en étapes faciles à comprendre

Dans ce didacticiel, nous allons concevoir et coder notre premier site Web en étapes simples et faciles. Ce tutoriel a été écrit pour le débutant dans l’espoir qu’il vous donnera les outils nécessaires pour écrire vos propres sites Web conformes aux normes! C'est une toute nouvelle semaine. peut-être qu'il est temps d'apprendre une nouvelle compétence!

30 meilleures pratiques HTML pour les débutants - Basix

L'aspect le plus difficile de l'exécution de Nettuts + est la comptabilisation de nombreux niveaux de compétences. Si nous publions trop de tutoriels avancés, notre auditoire débutant n'en tirera aucun avantage. La même chose vaut pour le contraire. Nous faisons de notre mieux, mais n'hésitez pas à vous joindre si vous sentez que vous êtes négligé. Ce site est pour vous, alors parlez-en! Cela dit, le tutoriel d'aujourd'hui s'adresse spécifiquement à ceux qui se plongent dans le développement Web. Si vous avez au moins un an d'expérience, nous espérons que certains des conseils énumérés ci-dessous vous aideront à devenir meilleur, plus rapidement.!

Sans plus tarder, examinons trente pratiques recommandées à observer lors de la création de votre marquage..

En mouvement…

Maintenant que nous avons une compréhension de base de la théorie et que nous avons appris à concevoir et à coder une page Web très basique, nous sommes prêts à aller un peu plus loin. Les articles et didacticiels suivants sont destinés à vous apprendre davantage sur le processus de conception Web et les meilleures pratiques de codage..

Éléments d'un excellent design Web: le polonais

Lorsque je compose des dessins, je le fais habituellement en deux phases: la mise en page et le polonais. Pendant la phase de mise en page, je place les objets principaux sur la page en finissant généralement par quelque chose d'assez complet. Dans la deuxième étape - le polonais - je passe en revue le dessin et ajuste les couleurs, les traitements de texte, les ombres, les calques et le nettoie en général. Dans cette première d'une série de didacticiels sur la conception Web, nous examinerons le polonais.

Conception d'une famille de sites Web

Le tutoriel que j'ai ajouté aujourd'hui s'intitule "Comment concevoir une famille de conceptions de sites Web" et constitue, étape par étape, le suivi d'un ensemble de conceptions de blogs WordPress que j'ai récemment réalisées. Parce que les compétences de Photoshop ne sont pas très avancées, j'ai passé plus de temps à expliquer pourquoi certaines choses sont faites..

Du PSD au HTML, Construire un ensemble de conceptions de sites Web, étape par étape

Aujourd'hui, je vais vous guider tout au long de mon processus allant de Photoshop à HTML complet. Nous allons créer un ensemble de 4 maquettes PSD d'un site Web qui deviendra éventuellement un thème WordPress. Il s’agit d’un didacticiel volumineux. Si vous devez suivre jusqu'au bout, assurez-vous de disposer de quelques heures!

Dernier point, mais tout aussi important…

Être inspiré, mais ne pas copier

Il y a une mince ligne entre l'inspiration et la copie. Nous sommes entourés d'objets et d'art dans notre vie quotidienne. Trouver de l'inspiration pour un design est une tâche facile de nos jours. Dans cet article, je vais vous guider dans le processus de conception d'un site Web que je viens de terminer. Je fournirai des images de sites Web qui m'ont inspiré pour créer une nouvelle mise en page Web unique..

Un billet de faveur pour vous aider à démarrer…

30 éléments, arrière-plans et jeux d'icônes Photoshop Web (via GraphicRiver)

Lorsque vous concevez ou créez un site Web, il est probable que vous aurez besoin de divers petits éléments conçus. Personnellement, j’ai tendance à réutiliser un grand nombre des mêmes boutons, menus, icônes, etc. Depuis que nous avons lancé GraphicRiver plus tôt cette année, nous avons toutefois vu arriver de nombreux petits graphismes Web intéressants, sous la forme d’éléments Web, d’arrière-plans et d’icônes. J'ai donc compilé 30 des meilleurs pour vous donner une idée de ce qui est disponible là-bas. Bien sûr, n'oubliez pas que si vous avez simplement besoin d'un modèle de conception PSD complet, vous pouvez les récupérer chez ThemeForest.!

Nous ne sommes pas encore fait…

Prenez quelques minutes pour lire ces excellentes interviews de grands noms de l'industrie Web. Vous serez surpris par tout ce que vous pouvez apprendre de ces gars!

  • Elliot Jay Stocks
  • Chris Coyier
  • Jeffrey Zeldman
  • Eric Meyer
  • Jeff Croft
  • Marko Dugonjić

… et plus. Lire toutes les interviews ici.

Dernières pensées…

Chaque nouveau départ est difficile; Il en va de même pour la conception Web. Je me souvenais de moi-même au début de mon apprentissage: des heures de débogage HTML / CSS pendant que la solution était devant moi; mais bon, nous apprenons de nos erreurs et de nos répétitions. J'aimerais avoir accès au réseau Tuts + quand j'ai commencé. Cela aurait pu me faire économiser beaucoup de temps et de frustration. Considérez cet article comme point de départ, si vous vous trouvez en train de faire les premiers pas dans cette industrie. Des questions?

Écrire un tutoriel Plus

Saviez-vous que vous pouvez gagner jusqu'à 600 USD en écrivant un tutoriel et / ou un screencast PLUS pour nous?? Nous recherchons des didacticiels détaillés et bien écrits sur HTML, CSS, PHP et JavaScript. Si vous en avez la possibilité, veuillez contacter Jeffrey à l'adresse [email protected]..

Veuillez noter que la rémunération réelle dépendra de la qualité du didacticiel final et du screencast..

  • Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..