Tutorial: Com maquetar una pàgina web amb Adobe Photoshop

Hi ha una enorme varietat d'eines per a la composició pàgines web i treballar d'una forma totalment senzilla i funcional sense entrar o tocar codi. Són innombrables, propostes per aplicacions (Adobe Dreamweaver és un exemple) o directament per plataformes online com Wix. No obstant això, per a un dissenyador web, conèixer els procediments manuals és fonamental. HTML5 i CSS són els pilars fonamentals per a la maquetació de webs i landing pages.

No obstant això, més sovint del que potser podries esperar, hauràs de recórrer a aplicacions com Indesign o Adobe Photoshop per complementar els teus tasques de maquetació i donar-los un acabat perfecte. Avui veurem en aquest tutorial extens, com podem maquetar una pàgina web utilitzant Adobe Photoshop. En aquesta primera part ens quedarem a la feina a desenvolupar des Photoshop, encara que en pròximes entregues passarem a veure com podem aplicar aquest treball ja directament en codi HTML per fer-ho funcional.

Començant pel disseny del nostre wireframe

Per començar amb la maquetació i el disseny d'una pàgina web és tremendament important que comencem definint quins seran els elements bàsics, això és l'esquelet. Aquesta estructura servirà com a suport per a sostenir tots els continguts (ja siguin textuals o multimèdia). A l'definir cadascuna de les seccions que componen a la nostra pàgina podrem treballar sobre elles amb total exactitud i proporcionar un disseny visual el més encertat possible.

És molt important que tinguem en compte les dimensions que tindrà la nostra web, si tindrà un format boxed o Full-width. Una pàgina web de tipus boxed estarà dins d'un petit contenidor i per tant apareixerà un espai al voltant de la mateixa. Per contra, un web full witdth ocuparà la totalitat de la pantalla de el dispositiu que reprodueixi la pàgina. Escollir entre una modalitat o una altra respon a qüestions merament estilístiques i dependrà també de les necessitats que tingui el projecte sobre el qual estiguem treballant. Nosaltres treballarem en aquest exemple amb la modalitat boxed pel que no ocuparà la totalitat de l'espai que proporcioni el navegador.

Per crear el nostre wireframe el primer que hem de fer és entrar en l'aplicació d'Adobe Photoshop i incloure les dimensions que volem que tingui la nostra pàgina. En aquest exemple la nostra pàgina tindrà una amplada de 1280 píxels. No obstant això, el tema de la mida pot variar depenent de quin sigui el destí final o el dispositiu en el qual volem reproduir la nostra pàgina. No hi ha cap dubte que perquè un disseny web sigui funcional i eficient, ha de ser sensible i s'ha d'adaptar a tots els dispositius que hi ha al mercat. No obstant això, en aquest cas treballarem per crear un prototip que anem a reproduir en un ordinador d'escriptori. Tot i això, el tema de l'responsive ho tractarem més endavant, de moment a continuació us deixo jerarquia de dimensions de pantalla per treballar en aquest exemple. Tingues en compte que en aquest cas farem una maquetació de la landing page en Adobe Photoshop per a continuació adaptar el programa a HTML5 I CSS3. L'objectiu d'aquesta petita pràctica, és convertir un disseny creat en Photoshop, en un disseny web usable i interactiu que respongui als moviments de l'usuari.

Mesures per a telèfons mòbils

iPhone 4 i 4S: 320 x 480

iPhone 5 i 5S: 320 x 568

iPhone 6: 375 x 667

iPhone 6+: 414 x 736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galàxia S3, S4, S5: 360 x 640

HTC One: 360 x 640

Mesures pra tauletes

iPad tots els models, així com iPad Mini: 1024 x 768

Galaxy Tab 2 i 3 (7.0 polzades): 600 x 1024

Galaxy Tab 2 i 3 (10.1 polzades): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mesures per a ordinadors d'escriptori

Pantalles petites (usades per exemple en netbooks): 1024 x 600

Pantalles mitjanes: 1280 x 720/1280 x 800

Pantalles grans: ample superior a 1400 píxels, exemple 1400 x 900 o 1600 x 1200.

Per començar a distribuir els elements i assignar seccions dins la nostra maqueta web, és molt important que tinguem en compte les proporcions per assegurar una acabat llegible i melòdic. Serà imprescindibles que utilitzis les opcions de regles i guies que podràs trobar en el menú superior Vista. Per treballar de forma proporcional i exacta el millor és que treballem a partir de percentatges. Premerem sobre el menú vista ia continuació sobre l'opció «Nova guia" per triar la modalitat de la divisió. En aquest cas farem quatre divisions verticals a el 25% i les prendrem de referència per situar les nostres imatges de l'footer i la imatge del nostre logotip al header.

Hi ha un codi per designar cadascuna de les àrees que ocuparan la nostra maqueta i la funció que tindrà cadascuna d'elles. Per exemple per indicar l'àrea que ocuparà una imatge, crearem rectangles amb una mena de creu. Per a indicar que volem incloure vídeos en una zona determinada inclourem dins del nostre contenidor el símbol de play. En aquest primer exemple únicament treballarem amb imatges, en la captura superior pots veure l'àrea que ocuparà el logotip del nostre lloc web.

Aquest seria el resultat final del nostre filferro. Com podem veure, aquesta dividit en un header compost per la imatge en què es trobarà el logotip i que servirà com enllaç a la pàgina d'inici acompanyat de dues pestanyes, un cercador i quatre botons sobre el calaix de cerca. A més, ja dins de l'body, hem inclòs una barra lateral composta per una barra divisòria i una sèrie de categories que recullen de forma categoritzada el tipus de continguts que hi haurà al nostre web. Una altra secció amb una numeració que inclou les entrades que existiran en el nostre site, i finalment un llistat amb les meta tags o etiquetes més representatives en el nostre site.

A l'àrea de continguts, que estarà definit per una secció que inclourà contingut autogestionable, Trobarem el contingut dels nostres articles. En aquest cas, breadcrumbs o la molla de pa (que indica l'estructura orgànica de la nostra web, el titular de l'article, les metadades, un paràgraf com a cos de text, dins el qual s'inclou una imatge.

A manera de peu de pàgina o footer hem inclòs quatre imatges que serviran com a enllaç a altres àrees de la nostra pàgina. Aquí podrem incloure logotips o altres seccions interessants. Encara que en realitat, aquesta zona actuarà més aviat com prefooter, Ja que el footer pròpiament dit anirà una mica més avall amb la política d'ús, l'avís legal i el copyright.

Un cop hem definit l'estructura bàsica o l'esquelet de la nostra pàgina, ens tocarà passar a el següent nivell. Aquest consistirà en el disseny pròpiament dit de cadascuna de les àrees de la nostra web. És a dir, començarem a «omplir» cadascuna d'aquestes àrees amb el contingut que estarà finalment inserit a la nostra pàgina web. És recomanable que no ens posem a dissenyar aquests elements abans de treballar en el wireframe perquè és molt probable que si ho fem en aquest ordre, més tard necessitem modificar les seves proporcions. Correm el risc de deformar les nostres imatges i haver de refer el disseny de cada un dels elements, la qual cosa es convertirà o en una pèrdua de temps o en un resultat de menor qualitat.

En aquest cas el disseny de la nostra pàgina web serà tremendament senzill. utilitzarem els preceptes de l'material design, Ja que utilitzarem per exemplificar aquesta pràctica el logotip de Google. He d'aclarir que la finalitat d'aquest tutorial és il·lustrar en els coneixements tècnics, de manera que el resultat estètic en aquest cas és irrellevant. Com podeu veure, a poc a poc hem anat omplint l'espai de totes les àrees que hem determinat prèviament en el nostre esquema. No obstant això, hem introduït una petita modificació en l'últim moment. Com podràs haver-te adonat, hem reduït bastant la grandària del nostre logotip i hem inclòs en l'àrea inferior header una línia divisòria que entronca perfectament amb el menú superior. En aquest cas hem utilitzat botons i materials d'un banc de recursos. Com a dissenyadors podem dissenyar-los nosaltres mateixos, (sobretot aquesta opció és recomanable si volem que presenti una tònica molt similar a la que presenta la imatge de marca o el logotip).

És important que tinguem en compte que per a la composició aquest exemple treballarem en dos nivells diferents. D'una banda, treballarem els objectes i d'altra banda l'aparença de la pàgina web. És a dir per una banda en l'esquelet de la nostra web i d'altra banda en tots els elements flotants que suportarà aquest esquelet. Us adonareu que hi ha àrees que no seran flotants en absolut, com ara l'àrea que ocupés la nostra barra lateral, l'preefooter o la barra divisòria que divideix el header de l'body.

Les estructures 1, 2, 3 i 4 formaran part de l' fons de la nostra pàgina web, de manera que en realitat no ens caldrà exportar com a tal des Adobe Photoshop, encara que podem fer-ho, no cal. A l'tractar-se d' colors plans (Un dels Ragos essencials de flat design i el material design, poden aplicar-se perfectament a través de codi mitjançant un full d'estils CSS). No obstant això, la resta d'elements sí que han de ser guardats per a la posterior inserció en el nostre codi HTML. En aquest petit esquema hem reproduït també les àrees que pertanyen a l'background de la pàgina perquè tinguem una idea clara de quin serà l'aparença final del nostre lloc.

Com et podràs anar adonant, el sentit de crear aquest esquema en Adobe Photoshop és obtenir la dimensió real de cada element, i aclarir la disposició i estructura de cada element. Per descomptat, el contingut textual, no té cabuda en aquesta fase de l'procés ja que haurà de ser subministrat des del nostre editor de codi. També hem de puntualitzar que en aquesta pràctica, treballarem amb botons i elements estàtics, encara que generalment aquests solen aplicar-se a partir de frameworks com Bootstrap o directament a partir de Jquery.

Un cop hem creat cadascun dels elements que integraran la nostra pàgina web, és el moment de començar a exportar i guardar-los en la carpeta d'imatges situada dins de la carpeta de projecte HTML. És important que t'acostumis a exportar des del teu wireframe, perquè és molt probable que necessitis modificar algun dels elements originals d'acord amb la configuració de l'esquelet. (Per exemple en aquest cas, hem canviat la mida dels botons originals, el logotip i la majoria d'elements que formen part de la composició, incloent les imatges de l'àrea inferior).

És important que aprenguem a guardar qualsevol element de forma independent per guardar-los amb les dimensions que té i d'una forma precisa. Qualsevol error per mínim que sigui pot influir en tots els elements que formen part de la teva pàgina web. Tingues en compte que estaran relacionats entre ells i han de tenir unes dimensions perfectes perquè puguin ser introduïts a partir d'HTML al web final. En aquest cas, necessitarem retallar i guardar de manera independent els següents elements:

• El nostre logotip.
• Tots els botons (els que formen part de l'menú principal i la resta).
• Totes les imatges.

Podem fer-ho de moltes formes i potser, tu trobis una alternativa que et resulti més eficaç. Però si és la primera vegada que vas a realitzar aquest tipus de maquetacions, et recomano que segueixis els següents consells.

• En primer lloc, hauràs de dirigir-te a la carpeta on es trobi l'arxiu en format PSD que conté el nostre wireframe i duplicar-tantes vegades com elements vagis a exportar. En aquest cas hem creat 12 còpies a partir d'l'original i les hem guardat en una mateixa carpeta. A continuació, renombrarás cadascuna de les còpies i li assignaràs a cadascuna d'elles el nom de l'element que contingui. Les nostres 12 còpies passaran a anomenar-se: Logotip, botó menú 1, botó menú 2, barra cercador, botó superior 1, botó superior 2, botó superior 3 i botó superior 4. Els quatre restants es tornaran a denominar com: Imatge 1, Imatge 2, Imatge 3 i Imatge 4.
• En aquest punt obrirem l'arxiu amb nom logotip.
• Ens anirem a la nostra paleta de capes i localitzarem la capa que conté el nostre logotip. A continuació premerem Ctrl / Cmd a el temps que fem clic sobre la miniatura d'aquesta capa. D'aquesta manera se'ns haurà seleccionat de forma automàtica el logotip.
• El següent pas serà indicar a Photoshop que volem que faci una retallada d'aquest logotip d'una forma precisa. Per a això no tindrem mes de fer una crida a l'eina de retallada a partir de la tecla o la comanda C.
• Un cop haguem fet això premerem sobre el nostre botó de Retorn per confirmar la retallada.
• Ara ens anirem fins al menú superior Arxiu per fer clic en guardar com. Seleccionarem el nom, que en aquest cas serà «Logotip» i li assignarem un format PNG, Per ser el fitxer que major qualitat ens ofereix en web.
• Repetirem el procés amb totes les còpies i els elements. Quan hagis fet la retallada, assegurat que la resta de capes de la nostra paleta estan invisible o eliminades. D'aquesta manera podrem guardar cada element amb fons transparent.

En aquest cas estem seleccionant nostre botó menú 2 des de la paleta de capes. Pots veure en la captura com automàticament s'han seleccionat els límits del nostre botó.

Una vegada que seleccionem l'eina de retallada a partir de la tecla C nostre llenç passa a reduir-se únicament a les dimensions del nostre botó.

Ara és el moment d'anar guardant un a un tots els elements que formen part de la nostra pàgina web i anar incloent-los en la carpeta d'imatges i que posteriorment anirem utilitzant. Farem trucades des del nostre codi i continuarem amb el nostre maquetat però a partir d'ara des del nostre editor de codi.

Encara que hi ha moltes eines i alternatives per a la composició una pàgina web i que converteixen el procés en una cosa totalment intuïtiu, és molt important que aprenguem a fer-ho de forma manual. D'aquesta manera aprendrem quins són els fonaments que hi ha darrera el disseny d'una pàgina web.

Resum:

1. dissenya la estructura de la pàgina web prestant especial atenció als continguts que vols transmetre ia les seccions que has de crear a la teva pàgina web.
2. Treballa en el teu esquelet o filferro a partir d'Adobe Photoshop indicant en quines àrees apareixeran els continguts i el format dels mateixos.
3. Recolzant-te en les mesures i marques que has desenvolupat anteriorment, comença a dissenyar la superfície del web. Inclou tots els elements (tant flotants com a fixos). No t'oblidis d'incloure els botons, el logotip i les imatges que corresponguin.
4. Retalla un a un tots els elements que formen part de el projecte. Assegura't que tenen les mesures oportunes i que no et causaran problemes més endavant.
5. Guarda tots els elements en format PNG a la carpeta d'imatges dins la carpeta de projecte HTML.
6. Tingues en compte que aquest projecte tindrà una sortida a la finestra web pel que és molt important que tinguis en compte el mode de color i aplics RGB.
7. Inspira't en altres pàgines web que admiris abans de posar-te a treballar i no oblidis discutir sobre aquest tema amb els membres de l'equip. En cas que sigui un projecte per a un client, procura atenir-te a l' sessió d'informació en la mesura del que sigui possible.