Conception de dispositions d'interface utilisateur Web Killer avec des freebies - Guide ultime

Le domaine de la conception de sites Web a pris son essor en quelques années seulement. Il y a plus de designers actifs dans le monde que jamais auparavant, tous collaborant sur des idées de projets innovants. Et les concepts à la base de nombre de ces tendances ont été développés par des graphistes professionnels..

Cela peut prendre des mois, voire des années, avant de comprendre parfaitement les aspects techniques de la création d'une interface utilisateur. Vous devez tenir compte de la taille et du placement des éléments de page, ainsi que de la lisibilité du texte et des étiquettes. Avec un peu de temps libre, vous pouvez vous plonger dans une approche minimaliste pour créer des sites Web avec moins de ressources et en réduisant la confusion. Et même dans ce cas, il y a des dizaines d'autres techniques de conception à prendre en compte.

Pour ce guide, j’ai jumelé des techniques de conception d'interface utilisateur modernes avec vous pouvez télécharger des cadeaux et jouer avec. J'espère que cela motivera les personnes intéressées par une carrière dans la création graphique / la conception Web. Même les concepteurs de sites Web professionnels peuvent trouver certaines de ces tendances utiles pour votre prochain projet..

Pratique avec des modèles complets

Lorsque vous avez les compétences nécessaires pour concevoir votre propre mise en page à partir de zéro, il n’est pas nécessaire de commencer par les modèles. Les débutants, d’autre part, peuvent se sentir plus à l'aise à partir d'une conception complète et dans les détails les plus fins.

Il existe d'excellents téléchargements gratuits de modèles de site Web PSD complets pour les portefeuilles, les pages d'accueil, les blogs et de nombreuses autres catégories. Ce sont les modèles parfaits pour commencer à se familiariser avec un “général” mise en page Web. Chaque site Web aura des besoins différents pour les éléments de page et vous devrez déterminer quels éléments sont importants..

Voici un exemple de PSD appelé "AppCivilization", conçu par Martin Fabricius. La mise en page est proposée à un studio de création qui conçoit des applications mobiles et éventuellement des sites Web. Vers le bas, vous trouverez un petit panneau d'icônes d'application présentées dans un portefeuille. Vous remarquerez également que toute la conception est divisée horizontalement en un en-tête, un diaporama, un contenu principal et un pied de page sombre..

Original Source - Télécharger

Conception de pages d'atterrissage

Regardons un autre billet de faveur également conçu par Martin. Cet exemple suivant est une page de destination que vous pouvez utiliser pour vendre tout type de produit. Il s’agit généralement de produits numériques pouvant être téléchargés par l’utilisateur, à savoir des applications, des photos, des icônes, des modèles, etc..

Original Source - Télécharger

Mais la meilleure partie de sa conception est qu’elle est très flexible pour les débutants. L'en-tête utilise toujours une petite navigation du haut avec une grande image, mais les actions de l'utilisateur attendues sont notamment différentes. Il a un grand “Achète-le!” bouton qui se détache juste au-dessus du pli. Sur une page de destination de produit, cela attirerait davantage l'attention qu'un diaporama jQuery..

Une autre excellente technique d’interface utilisateur est le petit affichage des fonctionnalités de l’iPhone à mi-chemin de la page. Martin comprend un aperçu de l'iPhone, un bouton App Store et une petite liste de fonctionnalités clés. Lorsque les visiteurs recherchent des détails sur les produits, vous ne pouvez pas simplifier les choses en utilisant une liste formatée..

Plus de modèles:

Voici quelques modèles PSD gratuits que nous avons publiés dans la passe:

Modèles PSD de site Web d'entreprise "BiZ"
Modèle PSD de site produit "ThinkJuice"
Modèle PSD de site professionnel professionnel
Modèle PSD du site du portfolio "Polo360"

Vous pouvez également être intéressé par les éléments suivants:

Modèles de site Web d'entreprise
Tutoriels de page "à venir" + modèles

Navigation sur le site principal

Les menus et les boutons ne sont que des outils permettant de créer des éléments de page beaucoup plus volumineux. On ne peut nier que la navigation principale de votre site Web a un objectif très important. Vous en avez besoin pour que votre site soit facilement accessible avec des méthodes de secours possibles pour les utilisateurs mobiles..

Vous trouverez ci-dessous une barre de navigation conviviale avec un effet de texture d'assemblage. Le style de surbrillance peut être présenté sous forme de boîte sombre ou de pointe orientée vers le bas dans le contenu de la page. Ce style a été important au fil des ans et a fière allure dans le bon cadre.

Original Source - Télécharger

Un autre freebie similaire est cette navigation en-tête texturée conçue par Edi Gil. J'aime beaucoup le fait que cette deuxième barre de navigation inclut à la fois une liste de liens et des boutons de page supplémentaires. Vous voudrez offrir des liens secondaires aux visiteurs où ils peuvent trouver vos profils sur le Web..

Original Source - Télécharger

Styles de menus alternatifs

Outre la barre de navigation horizontale typique, il existe d'autres styles de conception à prendre en compte. Les liens verticaux peuvent être divisés en différentes sous-titres, ce qui laisse plus de place au contenu de la page..

Prenons par exemple le menu gratuit ci-dessous conçu par le site Icojam.

Chaque en-tête est conçu pour se développer et se réduire en fonction de l'objet sélectionné. De plus, la conception permet à un petit compteur de chiffres de s’asseoir à droite de chaque catégorie. Il serait préférable de le renseigner sous forme de navigation de blog pour compter le nombre de publications classées sous chaque sujet..

Original Source - Télécharger

Conseils de navigation / Tutoriels:

Plus de 50 scripts de navigation basés sur des onglets CSS
Fil d'ariane Meilleures pratiques et exemples de navigation
Création d'une navigation mobile avec jQuery
Codage miettes de pain En CSS3
Conception de la navigation avec LESS CSS

Formulaires Web plus propres

L'ère moderne d'Internet est loin d'être un lieu de rencontre statique. Les utilisateurs partagent constamment des informations et interagissent les uns avec les autres tous les jours. La majeure partie de ce texte et du partage multimédia est gérée via des formulaires Web..

Nous ne devrions examiner que quelques exemples de la manière dont vous pouvez concevoir des entrées de formulaire et des boutons propres. La conception de vos éléments peut largement aider vos visiteurs à les utiliser. Et cela renforce la crédibilité de votre site et génère plus de pages vues..

Champs de connexion

Il existe quelques excellents exemples de fichiers PSD de connexion à vérifier. Ce login gratuit via WP Scientist a tous vos éléments standard. Deux champs de saisie pour le nom d'utilisateur / mot de passe, un bouton d'envoi et des cases à cocher pour gérer les cookies de session.

Ce modèle de conception est parfait si vous pouvez implémenter les effets via jQuery. La flèche en haut à droite vous fait penser à une configuration de fenêtre contextuelle. C'est une technique merveilleuse pour économiser de l'espace sur votre site Web en gardant le formulaire masqué jusqu'à ce qu'un utilisateur clique sur le lien d'enregistrement..

Original Source - Télécharger

Le formulaire ci-dessous est gratuit à télécharger grâce au concepteur Gil Huybrecht. Il a utilisé un motif similaire avec un fond granuleux et une texture de papier. Ce que j'aime particulièrement dans le design de Gil, ce sont les éléments "surdimensionnés". C'est beaucoup plus convivial d'atterrir sur un formulaire de connexion qui remplit toute la page. Les utilisateurs peuvent facilement voir ce qu'ils tapent et il y a moins d'encombrement.

Original Source - Télécharger

Si vous êtes expérimenté en tant que développeur frontend utilisant CSS3, il est très facile de traduire ce graphique en code. Vous pouvez même implémenter l'effet de rayonnement externe sélectionné et les coins arrondis pour le bouton et les champs de saisie.

Contacts

Un autre formulaire que vous trouverez sur pratiquement tous les sites Web est un formulaire de contact. Cela inclura normalement des champs pour le nom de l'expéditeur, son courrier électronique et le contenu du message.

Le billet de faveur ci-dessous est un exemple génial d'utilisation de textures et d'icônes personnalisés.

La conception utilise également texte fictif au lieu des étiquettes. Cela signifie que lorsque le formulaire est chargé pour la première fois, chaque champ est défini avec une valeur par défaut (ex: votre nom). Mais au fur et à mesure que vous commencez à taper, l'espace réservé s'efface et votre contenu s'affiche à la place. Tous les navigateurs conformes aux normes prendront en charge cet effet, ce qui peut vous faire économiser de l'espace sur la page..

Original Source - Télécharger

Un autre billet de faveur à saisir est ce formulaire de contact à onglets conçu par le talentueux Jonno Riekwel. Cette conception est beaucoup plus simple et comporte des étiquettes au-dessus de chaque entrée. C'est une excellente solution pour les grandes entreprises ou les startups qui ont besoin d'envoyer des messages via différents départements de l'entreprise..

Original Source - Télécharger

Formulaires de contact tutoriels:

Formulaire de connexion / inscription: Idées et beaux exemples
Créer un formulaire de connexion d'effet sur papier empilé
Créer un formulaire de contact HTML5 / CSS3 basé sur Ajax

Rubans et bannières

Il y a seulement 6 ou 7 ans, les angles arrondis commençaient à augmenter dans les tendances populaires du design. Maintenant, nous sommes encore plus loin avec les ombres portées et les rubans de coin.

Original Source - Télécharger

Certains de ces éléments peuvent être utilisés en tant que points forts de la conception, tels qu'un compteur de commentaires ou une date de publication pour un blog. Le ruban cousu ci-dessus est idéal pour les portefeuilles ou les pages de projet sur lesquelles vous souhaitez attirer l'attention de vos visiteurs. Vous pouvez également essayer un ruban vertical similaire où la conception tombe du haut.

Ces effets de page minuscules contribuent grandement à améliorer votre mise en page. Les visiteurs en prennent note et vont adorer ces plaisanteries esthétiques. Mais considérez que les petits rubans d'angle ne sont qu'une partie de cette tendance en matière de design.

Original Source - Télécharger

En outre, les conceptions de bannières complètes sont devenues incroyablement populaires pour renforcer la reconnaissance de la marque. Vous pouvez les utiliser dans votre logo, votre navigation, votre page d’accueil ou même sur les articles de blog présentés. Les implications sont pratiquement illimitées avec de bonnes capacités de conception.

Envelopper le coin

Un autre effet de bannière de ruban très spécifique est réalisé en enroulant le motif autour du coin de votre page. Cela crée l'illusion que votre page est en 3D et que le ruban est enroulé autour de la partie supérieure de votre site Web..

La conception ci-dessous est téléchargeable à 100% et peut être utilisée pour vos propres idées de projets. Vous pouvez voir en quoi cela attirerait l’attention des visiteurs et pourquoi cette tendance est devenue si frénétique. Veillez à ne pas abuser des bannières. En gros, ils peuvent devenir très gênants, un peu comme les anciens effets "Web 2.0" brillants / en miroir..

Original Source - Télécharger

Concevoir avec des boutons

Outre les liens hypertextes, vous obtiendrez le maximum d'interaction des visiteurs grâce aux boutons. Ces éléments de page peuvent exécuter n'importe quoi à l'aide d'appels jQuery et Ajax, sauf que vous pouvez également utiliser des boutons pour créer un lien vers du contenu statique, tel que des téléchargements gratuits, par exemple.!

Le kit d’interface utilisateur ci-dessous, conçu par Matt Gentile a beaucoup plus que de simples boutons. Son ensemble PSD est fantastique pour les débutants cherchant à saisir les dégradés et les textures pour créer des formes similaires. Souvent, les kits d’interface utilisateur contiennent des boutons de qualité supérieure par rapport aux PSD singuliers..

Original Source - Télécharger

Comment créer des variantes

Pendant que vous passez du temps à pratiquer ces techniques, vous souhaiterez créer de nombreux styles différents au fil du temps. Cela peut entraîner la commutation de boutons similaires entre différents projets et mises en page. Un bon exemple est le jeu de boutons laiteux proposé par le designer. Robert van Klinken.

Original Source - Télécharger

Chacun des trois boutons d'origine a un style de dégradé différent, à l'exception des états de survol et actif qui se ressemblent. Lorsque vous travaillez dans Photoshop, vous devez faire correspondre les couleurs entre les dégradés ou les déplacer sur un calque d'effets. Avec cette compréhension, vous pouvez même créer votre propre jeu de boutons de freebie à télécharger.!

Original Source - Télécharger

Textures Bois + Papier

Lorsque vous avez besoin de pimenter vos schémas de base, vous devrez alors adopter des méthodes plus astucieuses. Les textures sont toujours les bienvenues si vous pouvez les implémenter correctement via des arrière-plans CSS ou un contenu à largeur définie. Et deux des textures les plus populaires que j'ai vues sont le bois et les papiers vierges.

L'idée du bloc-notes est très simple, mais elle permet de créer une image de marque cool en tant qu'élément d'un élément d'interface utilisateur ou intégrée à l'ensemble de votre mise en page. Mais le papier ne semble pas toujours aussi beau en lui-même et une autre texture peut aider les styles à se fondre. C'est ici que des textures de bois plus détaillées peuvent entrer en jeu.

Original Source - Télécharger

Les images se démarqueront et auront fière allure, enveloppées dans une coque extérieure. Le concept de texture consiste à donner à votre site Web un sentiment ou une émotion spécifique. Les thèmes du bois peuvent évoquer un sens de la maison et de la nature. Il existe même un superbe kit d'interface utilisateur Web en bois à télécharger par Jeremiah Wingett. Si vous vous sentez créatif, essayez de composer vos propres textures et voyez comment elles se comportent dans un environnement Web..

28 textures de bois haute résolution

Conclusion

Les meilleurs concepteurs de sites Web sont ceux qui pratiquent quotidiennement et ne laissent jamais leurs échecs nuire à leurs objectifs ultimes. Vous devez être réactif et rebondir rapidement après les tentatives réussies et les tentatives infructueuses. Les astuces et les cadeaux de ce guide devraient constituer un bon point de départ pour apprendre à créer différents concepts de page pour un projet Web. Et nous aimerions lire vos réflexions à ce sujet dans le post-débat.