Hoe Responsive Design Engaging te houden
Responsief webdesign is populair en het is absoluut geen geheim. Het is waar experts voor pleiten en waar veel merken naar overschakelen. Het gaat niet alleen om het maken van een site die geschikt is voor mobiel, maar om het zichtbaar maken van uw site voor elke browser, of dit nu via een desktop, tablet of smartphone is.
Het lastige van ontwerpen voor responsiviteit is het creëren van een site die er goed uitziet, groot en klein. Je moet veel in overweging nemen voordat je je ontwerpprogramma openbreekt en aan het werk gaat. Het is een extra stap die meestal uiteindelijk de moeite waard is in het eindproduct. Het is heel duidelijk wanneer een ontwerper niet van plan is om te reageren; sites hebben de neiging er echt kaal en saai uit te zien.
Het is absoluut noodzakelijk dat ontwerpers hun creativiteit behouden op alle responsieve sites. Met meer mensen die tablets en smartphones gebruiken, wilt u er zeker van zijn dat iedereen uw site kan bekijken. Hier zijn enkele tips om creatief en effectief te blijven bij het ontwerpen voor het responsieve web.
1. Gebruik uitstekende typografie
Bij responsieve sites moet je overwegen wat er goed zal uitzien op een kleiner scherm. Goede typografie is een belangrijk onderdeel van elk goed webontwerp, maar het is bijna noodzakelijk in responsief webdesign. Naarmate de schermafmetingen kleiner worden, moeten de meeste elementen transformeren en verkleinen of verplaatsen. Eerst en vooral moet uw typografie deze mogelijkheid hebben.
Ten tweede moet u verschillende koppen en tekst in verschillende formaten gebruiken. Nu gebruiken we meestal grote headlines en headers voor onze desktopontwerpen. Dit hoeft niet in zijn geheel te stoppen omdat u denkt aan kleinere formaten. Gewoon zorgen dat je een plug-in gebruikt, zoals FitText, om de grootte van uw tekst te verkleinen. Dit helpt.
smid gebruikt veel verschillende lettertypen om een zeer interessante look en feel te creëren. Ze variëren ook de grootte van deze lettertypen op de hele site. Wat interessant is in de bureaubladmodus, is de manier waarop de tekst en paragrafen in verschillende kolommen staan opgesteld. Wanneer het venster wordt verkleind, vouwt de tekst samen in één kolom. Gelukkig blijft de tekst consistent door dezelfde schaal en stijl te behouden.
Smashing magazine neigt hetzelfde te doen. Ze verwijderen de rechterkant van het ontwerp (de advertenties) volledig wanneer het venster wordt verkleind. De tekst loopt echter door het venster en de stijlen, kleuren en grootten blijven allemaal consistent.
2. Gebruik geweldige afbeeldingen
Imagery, zoals typografie, is uiterst belangrijk in elk websiteontwerp. Ook als typografie, in responsieve ontwerpen, wanneer u een site op kleinere schermen bekijkt, moeten uw afbeeldingen ook kleiner of verkleind worden weergegeven. Er zijn talloze verschillende lay-outs en verschillende beeldformaten die kunnen worden gebruikt in een responsief ontwerp. Het is belangrijk om aandacht te besteden aan de afbeeldingen die u kiest en hoe u ze gebruikt, omdat ze ongetwijfeld zullen veranderen. Naarmate schermen groter of kleiner worden, veranderen afbeeldingen van vorm en worden bepaalde delen van de afbeelding zichtbaar of uitgesneden.
In het ideale geval wilt u ervoor zorgen dat uw grote, fotografische afbeeldingen geen grafische inhoud bevatten die kan worden bijgesneden wanneer vensters van grootte veranderen. Wanneer u grafische afbeeldingen maakt, moet u er bovendien voor zorgen dat u een afbeelding maakt die snel wordt geladen en die zichtbaar is op een kleiner scherm. Dit is de reden waarom ontwerpers platte ontwerpen hebben omarmd. Het is gewoon eenvoudiger.
Bij Pandiscio moet je eerst opletten hoe de grotere afbeelding van de header er uitziet op een desktop. Het is vol, strekt zich uit naar de zijkanten en is van vrij hoge kwaliteit. Naarmate u de venstergrootte verkleint, worden de afbeeldingen kleiner, veranderen de vorm (van rechthoekig in vierkant) en worden bijgesneden. Ze hebben afbeeldingen gevonden die er goed uitzien wanneer het scherm van formaat verandert.
Kinhr is een site die veel verschillende grafische elementen en foto's gebruikt. Merk op dat wanneer groot en klein, de koptekstafbeeldingen kleiner worden zoals op de Pandiscio-website. Met de grafische elementen in het lichaam worden de afbeeldingen kleiner en behouden ze hun vorm en worden ze niet bijgesneden.
3. Slaap niet op de navigatie
Wees leeg, als mensen geen idee hebben hoe ze zich op uw site kunnen verplaatsen, doen ze dat gewoon niet. Navigatie is moeilijker als het gaat om responsief ontwerp, omdat we gewend zijn om navigatie te maken voor landschapsontwerpen. Nu moeten we een navigatie maken die eenvoudig kan worden gecondenseerd om te passen bij portretafmetingen.
Het is geen enorm probleem als je een handvol links hebt. Je kunt je menu kleiner of gecondenseerd maken aan de bovenkant of je kunt een vervolgkeuzemenu voor kijkers maken. Van groot belang is hoe u omgaat met navigatie met meer inhoudelijke zware websites.
Mashable heeft heel veel links omdat ze tonnen categorieën en zelfs meer artikelen bevatten. Bovendien hebben ze hun eigen bedrijfgerichte pagina's waaraan ze moeten worden gekoppeld. Mashable besluit om een pop-outmenu aan de linkerkant van het scherm te maken voor kleinere browsers.
Monocle heeft twee toplagen met uitgebreide navigatie voor hun site. Voor kleinere browsers hebben ze een vervolgkeuzemenu gemaakt voor de beste inhoud en hebben ze zojuist de tweede laag van de navigatie gecondenseerd.
4. Maak het leuk om te gebruiken
Wanneer u op een van de online links klikt, moet u waarschijnlijk daar wachten en wachten tot dingen worden geladen voordat u een pagina ziet. Op telefoons is het extra vervelend om precies de volgende knop te vinden om naar meer inhoud te gaan. Dingen als deze zijn niet leuk en ook niet intuïtief.
Door aandacht te schenken aan de details en uw site intuïtiever te maken, maakt uw site meer deelbaar. Bedenk hoe het is om een site op elke browser te gebruiken. Bedenk wat websites moeten doen als u om actie vraagt. Zoek deze dingen en los ze op, zodat uw site gemakkelijk, leuk en intuïtief te gebruiken is. Het maakt het ook een beetje interessanter!
Modder maakt hun site interessanter door aandacht te besteden aan hun overgangen. Ze creëren een zeer gestroomlijnd gevoel door veel van hun elementen naar beneden te laten glijden en vervagen in plaats van alleen maar abrupt te bewegen en op te komen. Het maakt een wereld van verschil.
Neue Yorke gebruikt veel beweging bij het wisselen van portfolio-item naar item. Nogmaals, het creëert een zeer high-end gevoel en houdt kijkers geïnteresseerd in wat er binnenkort wordt onthuld.
5. Denk buiten de doos
Wanneer al het andere faalt, wees dan gewoon creatief. Responsief webdesign is niet bedoeld als een beperking van de manier waarop we websites maken. Er is altijd ruimte om creativiteit te gebruiken, of het nu via codering of ontwerpen is.
Enso heeft een site gemaakt die lijkt alsof deze geen kans heeft om responsief te zijn. Merk op hoe ze de lay-out een beetje hebben gewijzigd toen de grootte kleiner werd, maar ze hebben hun merk en creativiteit behouden.
TBWA heeft een site met een geweldig ontwerp. Maar ze hebben ook geweldige afbeeldingen. En ze hebben ook geweldige typografie! Ze hebben het hier allemaal gebruikt om een zeer uniek en interessant responsief webontwerp te maken.
Conclusie
Het behoud van uw creativiteit in responsief ontwerp, of in een webontwerp, is net zo eenvoudig als het uittekenen van uw concept en het herzien om uw doelstellingen te behouden. De leuke dingen gebeuren gemakkelijker omdat je begint te plannen hoe je wilt dat je website werkt en functioneert, in plaats van ermee te beginnen. Responsief webdesign hoeft niet zo'n grote, almachtige taak te zijn waar ontwerpers bang voor zijn. Het is vrij eenvoudig! Houd alle eerdere dingen in gedachten die we hebben besproken en maak sites die gewoon niet van deze wereld zijn! Veel succes met je responsieve webdesign.
Welke tips zou je delen om responsief ontwerpen aantrekkelijk te houden? Hebt u een zeer creatief responsief ontwerp gevonden? Laat het ons weten in de comments.