La tecnologia de desenvolupament de llocs web és un procés molt polifacètic. Tot i així, totes les seves etapes es poden dividir en dos components principals: el funcional i l'exterior. O, com és habitual entre els administradors web, back-end i front-end, respectivament. Les persones que demanen els seus llocs web als estudis de desenvolupament web sovint creuen ingènuament que val la pena centrar-se només en la funcionalitat, i aquesta serà la decisió correcta. Però això és cert en casos molt i molt rars, normalment per a projectes d'inici en fase de proves beta. En cas contrari, només cal que el disseny gràfic i la interfície d'usuari compleixin els estàndards de desenvolupament web i siguin còmodes.
La primera pedra angular a la qual s'enfronta el dissenyador o dissenyador de la interfície és l'amplada del disseny del lloc. Després de tot, per això cal dibuixar interfícies. De manera purament intuïtiva, sorgeixen dos enfocaments: crear dissenys separats per a cada resolució de pantalla popular o crear una versió del lloc per a totes les pantalles. I les dues opcions seran incorrectes, però primer és el primer.
Amplada estàndard del lloc web en píxelsper a Runet
Abans del desenvolupament del disseny adaptatiu, el desenvolupament d'un lloc amb una amplada de mil píxels era un fenomen massiu. Aquesta figura es va escollir per una raó senzilla: perquè el lloc encaixi en qualsevol pantalla. I això té la seva pròpia lògica, però suposem que una persona encara té almenys un monitor HD en un escriptori. En aquest cas, el vostre disseny semblarà una petita franja al mig de la pantalla, on tot està enganxat en un munt i als costats hi ha un enorme espai sense utilitzar. Ara suposem que una persona accedeix al vostre lloc web des d'una tauleta amb una pantalla ampla de 800 píxels i "Mostra el lloc web complet" està marcat a la configuració. En aquest cas, el vostre lloc també es mostrarà incorrectament, ja que simplement no encaixarà a la pantalla.
A partir d'aquestes consideracions, podem concloure que una amplada fixa per al disseny definitivament no ens convé i hem de buscar una altra manera. Analitzem la idea d'un disseny independent per a cada amplada de pantalla.
Disposicions per a totes les ocasions
Si heu escollit com a estratègia crear dissenys per a totes les mides de pantalla del mercat, el vostre lloc serà el més únic de tot Internet. Al cap i a la fi, avui és simplement impossible cobrir tota la gamma de dispositius, intentant ajustar cada opció. Però si us centreu en les resolucions més populars de monitors i pantalles de dispositius, la idea no és dolenta. El seu únic inconvenient són els costos financers. Després de tot, quan un dissenyador d'interfícies, un dissenyador i un programador es veuen obligats a fer el mateix treball 5 o 6 vegades, el projecte costaràdesproporcionadament superior al preu pressupostat originalment.
Per tant, només els llocs d'una pàgina poden presumir d'una gran quantitat de versions per a diferents pantalles, el propòsit de les quals és vendre un producte i assegureu-vos de fer-ho bé. Bé, si no teniu cap d'aquests aterratges, sinó un lloc de diverses pàgines, hauríeu de pensar més enllà.
Mides de llocs més populars
Un compromís entre els dos extrems és renderitzar el disseny per a tres o quatre mides de pantalla. Entre ells, un ha de ser un disseny per a dispositius mòbils. La resta s'hauria d'adaptar a pantalles d'escriptori petites, mitjanes i grans. Com triar l'amplada del lloc? A continuació us presentem les estadístiques del servei HotLog del maig de 2017, que ens mostren la distribució de popularitat de diverses resolucions de pantalla del dispositiu, així com la dinàmica d'aquest indicador.
A la taula podeu esbrinar com determinar la mida del lloc que voleu utilitzar. A més, podem concloure que el format més comú actualment és una pantalla de 1366 per 768 píxels. Aquestes pantalles s'instal·len en ordinadors portàtils econòmics, de manera que la seva popularitat és natural. El següent més popular és el monitor Full HD, que és l'estàndard d'or per a vídeos, jocs i, per tant, per crear dissenys de llocs web. Més endavant a la taula veiem la resolució dels dispositius mòbils de 360 per 640 píxels, així com diverses opcions per a pantalles d'escriptori i mòbils posteriors.
Disseny de disseny
Així doncsDesprés d'analitzar les estadístiques, podem concloure que l'amplada òptima del lloc té 4 variacions:
- Versió per a portàtils amb 1366 píxels d'amplada.
- Versió Full HD.
- Un disseny d'ample de 800 píxels per a la visualització en monitors d'escriptori petits.
- Versió mòbil del lloc - 360 píxels d'amplada.
Diguem que hem decidit quina mida utilitzarem per a la font generada per al lloc. Però un projecte així encara seria costós. Vegem més opcions, aquesta vegada sense utilitzar una amplada fixa.
Flessibilitzar el disseny
Hi ha un enfocament alternatiu, quan val la pena adaptar-se només a la mida mínima de la pantalla, i les mides del lloc s'establiran per percentatges. Al mateix temps, es poden establir elements d'interfície com menús, botons i logotip en valors absoluts, centrant-se en la mida mínima de l'amplada de la pantalla en píxels. Els blocs amb contingut, per contra, s'estiraran segons el percentatge especificat de l'amplada de l'àrea de la pantalla. Aquest enfocament us permet deixar de percebre la mida dels llocs com una limitació per al dissenyador i superar amb habilitat aquest matís.
Quina és la proporció àuria i com es pot aplicar al disseny de la pàgina web?
Fins i tot en el Renaixement, molts arquitectes i artistes van intentar donar a les seves creacions la forma i la proporció perfectes. Per respondre a preguntes sobre els valors d'aquesta proporció, es van dirigir a la reina de totes les ciències: les matemàtiques.
Des de l'antiguitat s'ha inventat una proporció que el nostre ull percep com la més natural i elegant,perquè és omnipresent a la natura. El descobridor de la fórmula per a aquesta proporció va ser un talentós arquitecte grec antic anomenat Fídias. Va calcular que si la part més gran de la proporció està relacionada amb la més petita, ja que el conjunt està relacionat amb la més gran, llavors aquesta proporció es veurà millor. Però aquest és el cas si voleu dividir l'objecte de manera asimètrica. Aquesta proporció es va anomenar més tard la secció àuria, que encara no sobreestima la seva importància per a la història mundial de la cultura.
Torna al disseny web
És molt senzill: amb la proporció àuria, podeu dissenyar pàgines que siguin tan agradables per a l'ull humà com sigui possible. Calculant segons la definició de la fórmula de la proporció àuria, obtenim el número irracional 1, 6180339887 …, però per comoditat, podem utilitzar un valor arrodonit d'1, 62. Això significarà que els blocs de la nostra pàgina haurien de ser 62. % i 38% del total, independentment de la mida de la font generada per al lloc que utilitzeu. Podeu veure un exemple en aquest diagrama:
Utilitza noves tecnologies
Les tecnologies modernes de disseny de llocs web permeten transmetre amb precisió la idea d'un planificador i dissenyador, de manera que ara us podeu permetre el luxe d'implementar idees més atrevides que en els albors de les tecnologies d'Internet. Ja no cal que penseu molt sobre quina ha de ser la mida del lloc. Amb l'arribada de coses com ara el disseny adaptatiu de blocs, la càrrega dinàmica de contingut i tipus de lletra, el desenvolupament de llocs web s'ha tornat molt més agradable. Al cap i a la fi, aquestes tecnologies ho sónmenys restriccions, tot i que encara hi són. Però com sabeu, sense límits no hi hauria art. Us suggerim que utilitzeu un enfocament de disseny realment creatiu: la proporció àuria. Amb ell, podeu omplir l'espai de treball de manera eficaç i bella, independentment de la mida del lloc que hàgiu definit a les vostres plantilles.
Com augmentar l'espai de treball del lloc
Hi ha una bona probabilitat que no tingueu prou espai per encaixar tots els elements de la IU en un disseny petit. En aquest cas, hauràs de començar a pensar de manera creativa o fins i tot de manera més creativa que abans.
Allibera espai màxim al lloc amagant la navegació al menú emergent. És lògic utilitzar aquest enfocament no només en dispositius mòbils, sinó també en ordinadors de sobretaula. Al cap i a la fi, l'usuari no necessita mirar tot el temps quins encapçalaments hi ha al vostre lloc: va venir a buscar el contingut. I s'han de respectar els desitjos de l'usuari.
Un exemple d'una bona manera d'amagar el menú és el següent disseny (foto a continuació).
A la cantonada superior de l'àrea vermella, podeu veure una creu, fent clic a la qual s'amagarà el menú en una petita icona, deixant l'usuari sol amb el contingut del lloc web.
No obstant això, això és opcional, podeu deixar la navegació, que sempre estarà a la vista. Però podeu convertir-lo en un bell element de disseny i no només en una llista d'enllaços populars al lloc. Utilitzeu icones intuïtives a més o fins i tot en lloc dels enllaços de text. és la mateixapermetrà que el vostre lloc faci un ús més eficient de l'espai de pantalla del dispositiu de l'usuari.
El millor lloc web és responsive
Si no saps quin disseny triar per al lloc, tot és senzill per a tu. Per estalviar en costos de desenvolupament i, alhora, no perdre la vostra audiència a causa d'un disseny deficient per a alguns dispositius, feu servir un disseny responsive.
El disseny responsive és un disseny que sembla igual de bo en diferents dispositius. Aquest enfocament permetrà que el vostre lloc sigui entenedor i còmode fins i tot en un ordinador portàtil, fins i tot en una tauleta, fins i tot en un telèfon intel·ligent. Aquest efecte s'aconsegueix canviant automàticament l'amplada de l'àrea de treball de la pantalla. Si utilitzeu fulls d'estil responsius per al vostre lloc, esteu prenent la millor decisió possible.
Quina diferència hi ha entre el disseny responsiu i les versions del lloc web
El disseny responsive difereix de la versió mòbil del lloc perquè, en aquest últim cas, l'usuari rep un codi html diferent del d'escriptori. Aquest és un desavantatge pel que fa a l'optimització del rendiment del servidor, així com a l'optimització del motor de cerca. A més, es fa més difícil calcular les estadístiques de les diferents versions del lloc. L'enfocament adaptatiu no té aquests inconvenients.
La capacitat de resposta per a diversos dispositius s'aconsegueix mitjançant un disseny amb un percentatge de l'amplada especificat o transferint blocs a l'espai disponible (en el pla vertical d'un telèfon intel·ligent en lloc dehoritzontal a l'escriptori) o creant dissenys individuals per a diferents pantalles.
Obteniu més informació sobre el disseny i el desenvolupament responsive als nostres tutorials.
