Le sujet de cet article est nouveau design VKontakte. Changé à nouveau, vous pouvez désormais définir une couverture horizontale dans un groupe. Concevoir votre communauté VK avec un tel en-tête est bien plus intéressant. Franchement, aucune connaissance de Photoshop n'est requise ici. Pouvez-vous le faire sans compétences particulières ? belle photo même dans PowerPoint, Fotor, Canva, Pixlr Editor.
En allant dans le groupe, vous remarquerez que dans ces groupes les boutons « Post épinglé », « Informations » et « Cliquez sur le menu » sont devenus visibles. Et avant qu'ils ne soient cachés. Naturellement, toutes les inscriptions des groupes ont commencé immédiatement.
Télécharger une nouvelle couverture
Voyons maintenant comment activer la possibilité d'installer un en-tête horizontal. Cliquons sur le bouton "Gérer".
Cliquez ensuite sur le dernier et téléchargez la nouvelle couverture du groupe VKontakte. C’est là que vous pouvez comprendre que le fichier téléchargé peut être de n’importe quelle taille ! Mais pas moins que la taille 1590x400 px. Nous créons un prototype de couverture dans n'importe quel éditeur. Ensuite, nous pouvons sélectionner et enregistrer la zone qui répond aux exigences de VK. Voici un conseil pour savoir où trouver une image de couverture et quel éditeur utiliser pour
Qu'est-ce qui est intéressant dans le nouveau design de VKontakte ?
L'essentiel : il y a plus d'espace pour l'information. Maintenant, vous pouvez écrire ici le nom du groupe, le but de sa création, un appel à l'action, etc. Cette conception sera logiquement complète et plus fonctionnelle. Mais tu peux le laisser conception ancienne, c'est une question de goût pour chacun.
Lorsque vous concevez une couverture horizontale, vous remarquerez que le menu interne sort désormais en quelque sorte du contexte général. Je pense qu'il serait préférable d'épingler l'image pour accéder au menu. Et utilisez-le pour héberger des pages wiki dans le groupe.
En même temps, j'aimerais que les développeurs ajoutent une autre option pour mettre en place une belle transition vers les pages Wiki.
Je tiens à souligner que depuis 2016 les développeurs réseau social VKontakte tente activement de mettre en place ce réseau pour promouvoir les affaires. Rendez-le plus pratique pour les affaires ou quelque chose comme ça. De mon point de vue, c'est très bien et est très demandé par de nombreux entrepreneurs Internet.
Mais surtout, à mon avis, ils doivent réfléchir attentivement au système de « bannissements » afin que les entrepreneurs puissent travailler tranquillement, sans gêner les utilisateurs venus s'amuser sur le réseau social.
Comment créer une couverture de groupe VKontakte en ligne
Utilisez votre créativité et choisissez ce que vous préférez : une couverture horizontale ou le design VKontakte déjà familier. La création en ligne et l'installation d'une nouvelle couverture sont clairement présentées étape par étape dans la vidéo située sous l'article.
P.S. J'espère que ces informations vous seront utiles.
P.S.S. Utilisez votre créativité et bonne chance dans tous vos efforts !
Aujourd'hui, lors de la conférence Dribbble Meetup, Pavel Shumakov, principal concepteur de VKontakte, a présenté le nouveau design du site Web de VKontakte, les clients mobiles de l'entreprise sur iOS et Android, ainsi qu'une toute nouvelle application photo.
VKontakte a préféré prolonger l'intrigue sur le nouveau design du site et a même flouté la capture d'écran lors des présentations. Mais cet exemple suffit à se faire une idée générale de la refonte. Le site est divisé en "îles" - chaque poste ou tout autre bloc est visuellement séparé les uns des autres. La largeur du site et la police seront augmentées.
Date limite : jusqu’à fin 2015.
Application photo VKontakte
Personnellement, nous étions plus intéressés par un tout nouveau produit de VKontakte - application photo. C'est une sorte d'analogue d'Instagram. Cela a été annoncé lors de notre événement LIVE 2014, mais nous, comme vous, l'avons vu pour la première fois seulement aujourd'hui et avons été impressionnés. La nouvelle application est développée en collaboration avec des photographes professionnels. Dans celui-ci, en plus des fonctionnalités évidentes telles que la correction des couleurs, vous pouvez créer vos propres filtres et les partager avec vos amis. L'application est entièrement synchronisée avec VKontakte.
Chronologie : nous espérons lancer l'application cet été, car à cette époque elle sera plus d'actualité que jamais.
Le Material Design tant attendu dans le client VKontakte pour Android. Refonte complète de l'ensemble de l'application. Même nos collègues de Yabloko, en le regardant, commençaient à être un peu jaloux. Il est également possible de commander la fabrication de sacs avec logo. Désormais, ce processus deviendra pratique et rapide.
Date limite : bientôt.
Catalogue vidéo et nouveaux enregistrements pour iPhone
Mais les propriétaires d’iPhone ont aussi de quoi se réjouir. Ils ont reçu leur refonte il y a longtemps, qui reste toujours d'actualité, c'est pourquoi lors de la présentation, on nous a montré de nouveaux enregistrements et, bien sûr, le catalogue vidéo introduit. Ce ne sont évidemment pas les seuls changements à venir.
Refonte rapide applications mobiles et iOS. Concepts de première mise à jour apparence publié dans blog officiel"VKontakte", dans lequel Knyazev a également parlé, entre autres, du travail des designers de l'entreprise.
La barre d'onglets apparaîtra à nouveau dans les clients et iOS - un seul barre de navigation avec des onglets en bas de l'écran, couvrant les fonctionnalités principales. D’ailleurs, les concepteurs du réseau social l’ont abandonné en 2012. Dans la nouvelle vision du design, la barre d'onglets comprend les sections principales de VKontakte : « Actualités », « Recherche et recommandations », « Messages », « Notifications » et le menu utilisateur. Menu latéral, à en juger par les captures d'écran publiées, les applications seront complètement supprimées lors de la refonte.
En plus du radicalement nouveau interface utilisateur, les concepteurs de VKontakte ajouteront plusieurs innovations fonctionnelles avec la prochaine mise à jour de l'apparence. Dans la section « Recherche et recommandations », des histoires rectangulaires d'utilisateurs à proximité apparaîtront, ainsi qu'un flux de publications potentiellement intéressantes de nouveaux auteurs. Le principal concepteur de VKontakte décrit nouvelle rubrique comme « une chose tellement collante où l’on peut trouver quelque chose de haute qualité et inconnu, en tenant compte des préférences personnelles ». Un compteur de vues sera ajouté au fil d'actualité (actuellement, il ne s'affiche qu'à l'ouverture d'une publication), et les likes deviendront rouges.
Quand les mises à jour sortiront-elles ?
Runet est pauvre en critiques de refontes de sites et de services bien connus. Cet article n’a pas pour but de résoudre ce problème. Mon objectif est de discuter avec la communauté d'une solution à l'un des problèmes de la version web de VKontakte.
Lors du concours de l'année dernière pour la refonte de VK, les auteurs du concours ont évoqué les problèmes de la version Web. Ils ont désigné la largeur étroite du site comme le problème numéro un. Je suis d'accord avec l'équipe VKontakte et j'ai décidé de créer ma propre solution pour lutter contre ce problème.
Douleur
Problème n°1 – Écran étroit
En plus de la largeur de l'écran, j'ai identifié 2 autres problèmes.
Problème n°2 – Style différent de la version Web et des applications
Problème n°3 – Messenger
Messenger est apparu sur VK relativement récemment. Sa première version était visiblement démodée et, au fil du temps, ce problème a été résolu. Le principal problème du messager, à mon avis, c'est qu'il vit en parallèle avec le site. La fenêtre de correspondance est petite. Et bien qu'il soit évolutif, il est lié à des coordonnées absolues - il n'est pas pratique d'utiliser le service. Sur Facebook, la messagerie vit également séparément du site, créant de nombreuses petites fenêtres de correspondance.
Théorie - moyens de devenir plus large
Décidons d'abord ce qu'est un écran étroit. La largeur actuelle du VC est de 791 pièces. La tâche du concours consistait à adapter le site à une résolution de 1024pk. À mon avis, la solution au problème d'un écran étroit sera une interface fonctionnant à une résolution de 1024 à 1600 pièces. Autrement dit, l'interface est capable de fonctionner à la fois avec une résolution étroite (1024pk) et avec une résolution large (1440+pk).1. Étirements physiques
La solution est simple : nous fabriquons le site en caoutchouc.
Avantages :
+ Facile à mettre en œuvre
Inconvénients :
− Le contenu devient illisible
− Il est nécessaire de revoir complètement certaines sections du site (par exemple, amis)
2. Présentation parallèle
Cette technique a été vue dans le concept de refonte de Facebook d'iA en 2006 : les commentaires sont situés à droite des publications. Il y a 5 ans, je l'ai essayé sur un de mes projets.
Avantages :
+ Les publications sont disposées de manière linéaire, sans être interrompues par des commentaires
+ Les commentaires sur les publications sont visibles immédiatement sans transitions supplémentaires
Inconvénients :
− Densité inégale des informations à l'écran
− Une version 1024pc peut être créée avec beaucoup de difficulté ou doit différer de la version large
− Il est nécessaire de revoir complètement certaines sections du site
3. Panneaux coulissants
Une approche devenue populaire dans les services web : systèmes CRM, gestionnaires de tâches. L'écran est constitué de panneaux dépendants. Les panneaux apparaissent à droite les uns des autres ; si l'écran ne contient pas tout, alors les panneaux de gauche sont masqués au fur et à mesure que ceux de droite apparaissent.
Avantages :
+ À petites résolutions, vous pouvez changer de panneau, à grandes résolutions, vous pouvez tout afficher en même temps
+ Similitude de l'interface avec la version pour tablettes
Inconvénients :
− Une option peu familière aux internautes
− Le site n'est pas situé au centre de l'écran, mais à gauche
− Grand volume de travaux architecturaux
− Pas de visionnage linéaire ; il faut cliquer sur l'actualité pour lire les commentaires ;
4. Deux fenêtres
Interface avec deux sections de travail actives à l'écran.
Avantages :
+ Nécessite quelques modifications à l'interface actuelle
Inconvénients :
− On ne sait pas comment travailler avec 2 modes en même temps et pourquoi
5. Deux colonnes
Le mode d'affichage des informations est similaire à la chronologie sur Facebook. Le concept basé sur cette option est gagné au concours de refonte VK.
Avantages :
+ Informations faciles à organiser
+ Densité de données uniforme sur l'écran
Inconvénients :
− Attention divisée lors de la lecture des informations
−Facebook
6. Cartes
Passer d’une narration verticale à une grille. Exemple : Pinterest.
Avantages :
+ S'adapte facilement à n'importe quelle résolution
Inconvénients :
− Difficile de percevoir le contenu (difficile de réapprendre)
− Il est nécessaire de revoir complètement toutes les sections du site
La pratique est ma solution
J'ai basé ma solution sur la 4ème approche : un écran avec deux fenêtres actives. La deuxième fenêtre est le messager. Cela vous permet de discuter tout en lisant les actualités. Sans utiliser 2 onglets de navigateur.
Sur petit (<1440пк) экранах окно чата сворачивается.
Si vous le souhaitez, il s'ouvre au-dessus du contenu principal. Le scénario consistant à discuter en lisant les actualités fonctionne de la même manière.
Le panneau d'utilisateur lui-même avec la dernière correspondance reste à l'écran dans toutes les sections du site :
Détails des coulisses
Si vous regardez attentivement les captures d'écran, vous pouvez voir d'autres changements dans l'interface :
1. Contexte. Un fond a été ajouté pour augmenter le contraste des blocs.
2. Division en blocs. Les postes étaient séparés en blocs indépendants.
3. Les likes ont augmenté. C’est peut-être le changement le plus controversé et mérite probablement une discussion séparée.
4. Le menu supérieur précédent a disparu. Toutes ses fonctions ont déjà été dupliquées dans des sections du site. A sa place se trouvait le niveau des onglets. Ainsi, il a été possible de réduire un étage de navigation. Les filtres (un élément rarement utilisé) ont été déplacés vers la liste déroulante. Il manque un autre étage de navigation.
5. Deux modes pour visualiser les amis. L’un est emprunté à la version web, l’autre à la tablette. Il est difficile d’évaluer lequel est le plus populaire et le plus pratique.
6. Notes personnelles. Un bloc de notes personnelles sur chaque ami est apparu. Si vous l'aimez, obtenez-le ici - VK Memos.
7. Appels Web. Ils étaient déjà dans VK auparavant, mais ont été créés comme mode de fonctionnement distinct. Il s'agit désormais d'une fonction invisible qui n'interfère pas avec la navigation et la communication de base.
Au lieu d'un post-scriptum
Peut-il y avoir une refonte d’un réseau social sans prototype de page utilisateur ?La version actuelle est surchargée d'informations : musiques, vidéos, groupes, pages publiques, photographies, photos sur une carte, albums photos, amis, amis communs, amis en ligne, abonnés... J'ai décidé de supprimer tout ce qui est inutile :
C'est tout, merci pour votre attention.
Écrire sur le nouveau design ? Eh bien, enfin !
!!! Attention!!! En général, je vous préviens immédiatement que j'évalue le design non seulement en tant qu'utilisateur, mais aussi en tant que concepteur (y compris ceux liés au Web) et j'écrirai beaucoup non seulement sur le design lui-même, mais aussi sur pourquoi il y en a tant. mécontent. Et il y aura beaucoup de lettres !
Quant à savoir pourquoi tout est si inhabituel :
Dès le premier avril (ce qui a rendu tout le monde très dubitatif quant au sérieux de la mise à jour), le nouveau design avec des tests bêta limités est devenu disponible, je suis immédiatement allé sur le blog VK et je me suis connecté. Après cela, j'ai commencé à parcourir toutes les sections et à voir ce qui se passait. Le tout premier jour, j'ai trouvé environ cinq bugs, que j'ai immédiatement envoyés à l'administration pour correction. La seule chose qui n'a pas été corrigée, c'est qu'ils considèrent cela logique (le fait qu'on ne puisse pas envoyer une image à un ami, par exemple depuis une communauté ou un flux, puis la sauvegarder dans un album. La logique est que ils disent que vous l'avez envoyé vous-même, alors pourquoi le sauvegarder), mais cette chose était dans la conception passée.
Ensuite, j'ai posté sur ma communauté un résumé de la refonte et un vote. Il est devenu intéressant de savoir comment réagiraient les premiers utilisateurs. La plupart se sont plaints de ne pas pouvoir trouver certaines fonctionnalités, par exemple un interrupteur à bascule dans les messages (ce qui est facile à trouver si vous passez votre souris sur le bord de la boîte de dialogue). Oui, de tels éléments d’interface sont très inhabituels par rapport à tout ce qui s’est passé récemment sur RuNet. Mais ce n’est pas un problème avec le nouveau design. Il s’agit d’un problème lié au design thinking qui a émergé dans RuNet ces dernières années. Nous réalisons très rarement des designs progressifs et bons (!) qui deviennent plus pratiques et évoluent de manière fluide et uniforme, permettant à l'utilisateur de s'habituer à de nouveaux éléments plus intuitifs et corrects d'un point de vue UX (l'expérience utilisateur fait partie de l'interface conception responsable de l’accessibilité pour l’utilisateur et de la commodité). Au lieu de cela, nous avons des pics brusques chez les développeurs les plus progressistes, ce qui provoque une vague d'incompréhension de la part des utilisateurs. Et tout cela dans le contexte d'un grand nombre de sites au design épouvantable, peu pratique mais tout simplement familier. Et tout cela parce que les sites Web sont généralement créés soit à moindre coût, soit selon le principe « c’est comme ça qu’ils font ». Ceux qui ont du potentiel et peuvent progresser ne travaillent tout simplement pas pour l'argent offert sur RuNet, mais vont faire un travail bon et coûteux pour des étrangers. Tout cela est très triste et c'est pourquoi l'introduction du nouveau design VK ressemble au baptême de Rus'. Mais après un certain temps, les utilisateurs s'y habitueront, se souviendront où les choses ont changé et comprendront que tout n'est pas si mal.
Sur le fait que « tondez pour Facebook, au moins vous avez un flux sans les likes des autres ! »
Le fait est que le design évolue et jusqu'à présent il est considéré comme optimal, ce qu'on appelle également le design des formes et du contenu. Il a été développé il n’y a pas si longtemps par Google et de nombreuses personnes l’ont adopté.
Tout y est basé sur des éléments et des accents proportionnels, ce qui le rend très simple et compréhensible entre les mains habiles du développeur. Tous ces panneaux avec un profil qui coulisse à gauche dans les applications par exemple, c'est tout.
Rappelons-nous à quoi ressemblaient les mêmes téléphones il y a 10 à 15 ans. Chaque modèle Nokia était quelque chose de complètement nouveau : tous ces panneaux coulissants, ces écrans pliables dans toutes les directions, les dispositions de clavier les plus folles - tout cela était très cool. En même temps, je ne me souviens d'aucune plainte concernant le manque de compréhension des nouveaux produits, tout était si nouveau, intéressant et cool !
Mais avec les progrès, tout s'est réduit à une simple plaque avec un bouton sur le dessus et deux sur le côté (ou trois au dos comme LGE). Désormais, le produit est soit comme celui de quelqu'un d'autre, soit nouveau et incompréhensible. Désormais, cela ne sert à rien de réinventer la roue, surtout si elle s'avère moins pratique que celle qui existe déjà. C’est juste que maintenant la conception des appareils et des interfaces, la conception Web sont devenues optimales et il devient de plus en plus difficile de faire mieux. Les grands fabricants ne sont pas si stupides qu'ils se copient, ils sont si intelligents qu'ils acceptent les règles qui déterminent la commodité, et ils sont finalement parvenus à un concept commun.
Il en va de même pour la conception des médias sociaux. La dernière chose que veulent les développeurs, c'est qu'on leur dise qu'ils ont volé le design. Non. Personne ne vous jugera si vous fabriquez une chaise semblable à des milliers d’autres chaises. Ikea fait exactement cela : ils fabriquent des choses douloureusement banales, mais simples et bonnes. Alors quel est le problème avec la conception Web ?
Voici maintenant ma « réflexion » subjective sur le dernier VK :
Ça s'est amélioré. C'est la vérité. L’ancienne version a si peu changé qu’elle ressemble plus à d’anciens forums thématiques des années 2000 qu’à un réseau social moderne. Désormais, la version mobile et les applications ont beaucoup de points communs avec le site. C'est merveilleux. Un lien logique s’est établi entre eux. Ces vilains avatars à plusieurs étages sur une demi-page avec « S'abonner » et ainsi de suite ont disparu des communautés. Vous pouvez désormais consulter les notifications en cliquant sans quitter la page, ce ne sont que des likes et des réponses, et non une colonne pour une contemplation séparée. Les photos avec des réponses se complètent désormais une fois ouvertes, plutôt que de s'afficher sans fin.
À propos des messages : Je communique beaucoup sur VK (5 à 20 dialogues par jour) et ce nouveau format me fait très plaisir. Ceux qui ne sont pas satisfaits peuvent facilement passer à l'ancien format en cliquant sur l'engrenage en bas de l'écran et en modifiant les paramètres. Tout le monde devrait être content, non ?
En même temps je suis d'accord