2004-26, web 7.0
Ricard Vilanova
Es mostren els missatges amb l'etiqueta de comentaris #01 disseny. Mostrar tots els missatges
Es mostren els missatges amb l'etiqueta de comentaris #01 disseny. Mostrar tots els missatges
dijous, 6 de desembre del 2018
Living Coral
And this next year, the “color of the year” for 2019 is for Living Coral Pantone 16-1546. Congratulations for the new color! Welcome!
divendres, 4 de desembre del 2015
Conformité Européenne
vs. China Export
Qualsevol cosa fabricada a Xina pot portar el logo CE, el que estem acostumats a veure com a distintiu de fabricat d’acord amb la normativa europea (Conformitat Europea - Conformité Européenne), però lleugerament modificat en l’interlletratge i en la longitud del pal central de l’E, sota el nom China Export.
Més info aquí i aquí.
dijous, 22 de gener del 2015
En la dècada dels culs grossos…
El que m’ha sobtat però, ha estat veure aquesta informació mostrada gràficament a través d’infografia, de l’evolució dels ideals de bellesa al llarg dels últims 100 anys, però en dos webs diferents i dos estils prou diferents també. Primer ho vaig veure a IdeaFixa i després a The Daily Hiit Blog.
Així doncs, noies ja ho sabeu, ajusteu-vos els leggings i a marcar la cansalada… ;-)
dijous, 20 de novembre del 2014
Apunts web:
responsive web design
Aquí uns apunts personals sobre responsive web design que he llegit primer a La niña bipolar i més detalladament a FroontBlog.
Aquí la traducció via Google Translate d’aquesta última pàgina:
9 principis bàsics de
disseny de pàgines web responsive
El disseny web responsive és una gran solució al nostre problema multi-pantalla, però entrar-hi des de la perspectiva d’impressió és difícil. Sense mida de pàgina fixa, no hi ha mil·límetres o polzades, no hi ha limitacions físiques per lluitar-hi en contra. Dissenyar en píxels per Desktop i Mobile forma part del passat, a mesura que més i més gadgets poden obrir una pàgina web. Per tant, anem a aclarir alguns dels principis bàsics del disseny web responsive aquí per entendre la web adaptable, en lloc de lluitar-hi en contra. Per fer-ho simple ens centrarem en els dissenys (sí, responsive va molt més enllà que això i si en voleu aprendre més, aquest és un bon començament).
1.- Responsive vs disseny web adaptatiu
Pot semblar el mateix, però no ho és. Tots dos enfocaments es complementen entre sí, per la qual cosa no hi ha una manera correcta o incorrecta de fer-ho. Deixeu que el contingut ho decideixi.
2.- El fluxe (flow)
Com les mides de pantalla es fan més petits, el contingut comença a ocupar un espai més vertical i res per sota serà empès cap avall, es diu el fluxe. Això pot ser difícil d’entendre si estàs acostumat a dissenyar amb píxels i punts, però té tot el sentit quan un s’hi acostuma.
3.- Les unitats relatives
El llenç pot ser un ordinador d’escriptori, pantalla del mòbil o qualsevol altra cosa. La densitat de píxels també pot variar, per la qual cosa necessitem unitats que siguin flexibles i treballen a tot arreu. Aquí és on les unitats relatives com els percentatges són útils. Així que fer alguna cosa 50% d’ample vol dir que sempre tindrà la meitat de la pantalla (o finestra, que és la mida de la finestra del navegador oberta).
4.- Els punts d’interrupció (breakpoint)
Els punts d’interrupció permeten la disposició per canviar punts predefinits, per exemple, si té 3 columnes en un escriptori, però només 1 columna en un dispositiu mòbil. La majoria de les propietats CSS es poden canviar des d’un punt d’interrupció a un altre. En general, quan se’n posa un depèn del contingut. Si hi ha un final de texte, potser s’hi haurà de afegir un punt d’interrupció. Però cal usar-los amb precaució, doncs pot causar problemes amb la rapidesa quan és difícil d’entendre el que està influint en el que passi.
5.- Valors màxim i mínim
De vegades el contingut ocupa tot l’ample de la pantalla i és més gran que aquesta, com en un dispositiu mòbil, però tenir el mateix contingut que s’estén a tota l’amplada de la pantalla sovint té menys sentit. Aquesta és la raó perquè els valors Min / Max ajuden. Per exemple que té una amplada de 100 % i l’amplada màxima de 1.000 px significaria que el contingut va a omplir la pantalla, però no anar més de 1.000 px.
6.- Objectes niats (nested objects)
Recordeu la posició relativa? Tenir una gran quantitat d’elements en funció de si seria difícil de controlar, per tant, elements d’embalatge en un contenidor que manté de forma més comprensible, net i ordenat. Aquí és on les unitats estàtiques com els píxels poden ajudar. Són útils per al contingut que no ha d’anar a escala, com logotips i botons.
7.- Mòbil o d’escriptori primer
Tècnicament no hi ha molta diferència si un projecte s’inicia a partir d’una pantalla més petita a una més gran (mòbil primer) o viceversa (d’escriptori primer). No obstant això, afegeix limitacions addicionals i ajuda a prendre decisions si comencem amb el mòbil per primera vegada. Sovint, la gent comença a partir d’ambdós extrems a la vegada, així que realment, cal provar-ho i veure què ens funciona millor.
8.- Tipografies web vs. tipografies del sistema
Volem tenir un aspecte atractiu Futura o Didot a la pàgina web? Utilitzeu TypeDNA Font Manager! Tot i que es veurà impressionant, recordeu que cada tipografia s’haurà de descarregar i com més n’hi hagin més temps es trigarà a carregar la pàgina. Les fonts del sistema, d’altra banda van a la velocitat del llamp, excepte quan l’usuari no treballa a nivell local i es recorrerà a una font per defecte.
9.- Imatges en mapa de bits vs. vectors
Les vostres icones tenen molts detalls i alguns efectes fantàstics? En cas afirmatiu, utilitzeu un mapa de bits. Si no, considereu l’ús d’un vector d’imatge. Per a mapes de bits utilitzeu un JPG, PNG o GIF, per als vectors la millor opció seria un SVG o una icona de tipografia. Cadascun té alguns avantatges i alguns inconvenients. No obstant això, tinguem en compte la mida. Si no hi ha fotografies han d’anar en línia sense optimització. Els vectors per contra sovint són petits, però alguns navegadors antics no li donaran suport. A més, si hi han moltes corbes podria ser més pesat que un mapa de bits, així que cal triar sàviament.
Aquí la traducció via Google Translate d’aquesta última pàgina:
9 principis bàsics de
disseny de pàgines web responsive
El disseny web responsive és una gran solució al nostre problema multi-pantalla, però entrar-hi des de la perspectiva d’impressió és difícil. Sense mida de pàgina fixa, no hi ha mil·límetres o polzades, no hi ha limitacions físiques per lluitar-hi en contra. Dissenyar en píxels per Desktop i Mobile forma part del passat, a mesura que més i més gadgets poden obrir una pàgina web. Per tant, anem a aclarir alguns dels principis bàsics del disseny web responsive aquí per entendre la web adaptable, en lloc de lluitar-hi en contra. Per fer-ho simple ens centrarem en els dissenys (sí, responsive va molt més enllà que això i si en voleu aprendre més, aquest és un bon començament).
1.- Responsive vs disseny web adaptatiu
Pot semblar el mateix, però no ho és. Tots dos enfocaments es complementen entre sí, per la qual cosa no hi ha una manera correcta o incorrecta de fer-ho. Deixeu que el contingut ho decideixi.
2.- El fluxe (flow)
Com les mides de pantalla es fan més petits, el contingut comença a ocupar un espai més vertical i res per sota serà empès cap avall, es diu el fluxe. Això pot ser difícil d’entendre si estàs acostumat a dissenyar amb píxels i punts, però té tot el sentit quan un s’hi acostuma.
3.- Les unitats relatives
El llenç pot ser un ordinador d’escriptori, pantalla del mòbil o qualsevol altra cosa. La densitat de píxels també pot variar, per la qual cosa necessitem unitats que siguin flexibles i treballen a tot arreu. Aquí és on les unitats relatives com els percentatges són útils. Així que fer alguna cosa 50% d’ample vol dir que sempre tindrà la meitat de la pantalla (o finestra, que és la mida de la finestra del navegador oberta).
4.- Els punts d’interrupció (breakpoint)
Els punts d’interrupció permeten la disposició per canviar punts predefinits, per exemple, si té 3 columnes en un escriptori, però només 1 columna en un dispositiu mòbil. La majoria de les propietats CSS es poden canviar des d’un punt d’interrupció a un altre. En general, quan se’n posa un depèn del contingut. Si hi ha un final de texte, potser s’hi haurà de afegir un punt d’interrupció. Però cal usar-los amb precaució, doncs pot causar problemes amb la rapidesa quan és difícil d’entendre el que està influint en el que passi.
5.- Valors màxim i mínim
De vegades el contingut ocupa tot l’ample de la pantalla i és més gran que aquesta, com en un dispositiu mòbil, però tenir el mateix contingut que s’estén a tota l’amplada de la pantalla sovint té menys sentit. Aquesta és la raó perquè els valors Min / Max ajuden. Per exemple que té una amplada de 100 % i l’amplada màxima de 1.000 px significaria que el contingut va a omplir la pantalla, però no anar més de 1.000 px.
6.- Objectes niats (nested objects)
Recordeu la posició relativa? Tenir una gran quantitat d’elements en funció de si seria difícil de controlar, per tant, elements d’embalatge en un contenidor que manté de forma més comprensible, net i ordenat. Aquí és on les unitats estàtiques com els píxels poden ajudar. Són útils per al contingut que no ha d’anar a escala, com logotips i botons.
7.- Mòbil o d’escriptori primer
Tècnicament no hi ha molta diferència si un projecte s’inicia a partir d’una pantalla més petita a una més gran (mòbil primer) o viceversa (d’escriptori primer). No obstant això, afegeix limitacions addicionals i ajuda a prendre decisions si comencem amb el mòbil per primera vegada. Sovint, la gent comença a partir d’ambdós extrems a la vegada, així que realment, cal provar-ho i veure què ens funciona millor.
8.- Tipografies web vs. tipografies del sistema
Volem tenir un aspecte atractiu Futura o Didot a la pàgina web? Utilitzeu TypeDNA Font Manager! Tot i que es veurà impressionant, recordeu que cada tipografia s’haurà de descarregar i com més n’hi hagin més temps es trigarà a carregar la pàgina. Les fonts del sistema, d’altra banda van a la velocitat del llamp, excepte quan l’usuari no treballa a nivell local i es recorrerà a una font per defecte.
9.- Imatges en mapa de bits vs. vectors
Les vostres icones tenen molts detalls i alguns efectes fantàstics? En cas afirmatiu, utilitzeu un mapa de bits. Si no, considereu l’ús d’un vector d’imatge. Per a mapes de bits utilitzeu un JPG, PNG o GIF, per als vectors la millor opció seria un SVG o una icona de tipografia. Cadascun té alguns avantatges i alguns inconvenients. No obstant això, tinguem en compte la mida. Si no hi ha fotografies han d’anar en línia sense optimització. Els vectors per contra sovint són petits, però alguns navegadors antics no li donaran suport. A més, si hi han moltes corbes podria ser més pesat que un mapa de bits, així que cal triar sàviament.
diumenge, 6 de juliol del 2014
Com era el disseny gràfic fa 5 anys…
Vídeo gravat de Canal Blau ara farà 5 anys molt interessant perquè és de “l’any de la crisi”, 2009, però quan encara no n’érem massa conscients…
Com han canviat les coses…
Forma part de 4 vídeos en total (en aquella època YouTube no permetia pujar vídeos de més de 10 minuts…). Aquest és el tercer, però aquí enllaços a tots:
dimarts, 12 de març del 2013
Fent un web. Pas a pas
#03.- Capçalera i peu
Primer posem les imatges de fons de la capçalera i del peu si en porta. I deixem pel final la barra de navegació que és el que porta més feina... no pel fet de posar-hi les imatges, sinó per la interactivitat que se li ha dʼaplicar.
Finalment introduirem els enllaços al peu de pàgina. El peu de pàgina, a part dʼoferir les dades principals de contacte, acostuma a ser un mapa web de tot el lloc. Des dʼaquesta zona sʼhauria de poder accedir a qualsevol pàgina del lloc amb un sol clic.
En aquesta versió del web (3.0) he obviat el texte als botons* en estat de repòs, però amb la funció hover mostrarem el seu significat. Les funcions repòs i hover sʼacostumen a fer només amb CSS, però estava buscant una cosa especial més enllà de la funció hover. Repeteixo una vegada més que no sóc programador però mʼapasiona el poder del codi font (HTML + CSS + JavaScript) i tenia clar que en un moment o altra faria servir alguna llibreria jQuery de JavaScript.
La veritat és que hi havien opcions molt interessants amb jQuery de mostrar el contingut dels botons amb la funció hover, però amb un simple CSS es pot solucionar el petit detall de lʼhover dels botons. Així quedarà finalment la cosa:
(*) Encara recordo, com anècdota, el moment en que un “reconegut” programador local em deia que els botons de la barra de navegació no podien ser imatge... que havien de ser texte perquè sinó no sʼindexaven en els cercadors... potser en aquell moment aquest “reconegut” programador no coneixia la funció z-index per amagar el texte dʼun botó en forma dʼimatge (mantenint els avantatges de la indexació com a texte i els avantatges de la imatge com a força visual gràfica)... ;-)
dijous, 7 de març del 2013
Fent un web. Pas a pas
#03.- Estructurant el codi base
El normal és no començar a programar fins no tenir les arts finals completades (generalment un document de Photoshop PSD), però en aquest cas (“en casa del herrero, cuchara de palo”) tenim molt clar el què fer i ja podem estructurar la base de l’HTML.
Últimament “passo” d’editors WYSIWYG i teclejo el codi directament sobre un editor de texte. No sóc pas programador, però el saber que unes línies de codi tan senzilles puguin crear una pàgina web, m’excita d’allò més... ;-)Això sí, treballo simultàniament el document HTML i la fulla d’estils CSS.
dimecres, 6 de març del 2013
Fent un web. Pas a pas
#02.- Primer plantejament
Abans de res, òbviament hem de saber què volem comunicar i com comunicar-ho... Que treballem sobre web no vol dir que oblidem els principis bàsics del disseny i la comunicació gràfica. De fet, l’únic que canvia és el suport i els primers esbossos són sobre paper: de vegades és un dibuix, altres vegades només és una estructura i en altres ocasions “només” és un llistat de coses que apareixeran.
Matitzat aquest punt, i partint sempre d’una retícula estructurada en 12 ó 16 columnes, es comença a fer la distribució generalment sobre un document PSD de Photoshop.
dimarts, 5 de març del 2013
Fent un web. Pas a pas
#00.- Introducció
Aprofitant el 25è aniversari treballant en aquest Ofici (en majúscula i significant ofici, no professió), i veient com ha canviat la meva particular especialització (de catàlegs i revistes a webs i logotips), he pensat que seria interessant anar relatant, pas a pas, com vaig construint el nou web d’Estudi Melic, a mode d’exemple, partint dels primers esbossos fins els últims detalls relatius a la interfície d’usuari. I amb el risc de fer-me pesat, he pensat també duplicar la informació en els dos blocs: http://ricardvilanova.blogspot.com i http://estudimelic.blogspot.com.
dimecres, 27 de febrer del 2013
divendres, 15 de febrer del 2013
Primer web “picant” codi...
A més a més, a 4 idiomes! Inclós el rus!
Aquí lʼenllaç: http://www.ricardvilanova.com/rocacrespa62/
i una còpia per si de cas aquí també: http://www.estudimelic.com/rocacrespa62/
dimarts, 2 d’octubre del 2012
Tipografia al web amb un HTML “senzill” i CSS
Per allò de que mʼoblido els enllaços interessants, aquí aquest enllaç de com afegir pràcticament qualsevol tipografia a un web:
Ja ho havia provat amb altres opcions, però al final la cosa es complicava més de lʼesperat. Això encara ho haig de provar, però almenys lʼexplicació no pot ser més senzilla.
Em continua faltant la família completa de les Helvetica, especialment la versió light (que es pot fer dʼuna altra manera, tal i com està configurat aquest bloc, però no tan fàcil com això i no sempre funciona correctament), però ja és un pas...
[Llegit originalment a Microsiervos.]
diumenge, 12 de febrer del 2012
Com mantenir-se creatiu
Extret del vídeo 29 maneres de mantenir-se creatiu:
- Fes llistes
- Porta quaderns a tot arreu
- Prova l’escriptura lliure (?)
- Allunya’t de l’ordinador
- Evita autoflaglelar-te
- Fes aturades
- Canta a la dutxa
- Pren cafè
- Escolta música nova
- Sigues obert
- Envolta’t de persones creatives
- Escolta i estigues atent
- Col·labora
- No renuncïis
- Practica, practica, practica
- Deixa’t equivocar-te
- Ves a llocs nous
- Sigues agraït
- Descansa molt
- Arrisca’t
- Trenca les normes
- No forcis les coses
- Llegeix una pàgina del diccionari
- Crea una estructura
- Deixa d’intentar ser perfecte
- Tens una idea? Escriu-la
- Neteja el teu lloc de treball
- Passa-t’ho bé
- Acaba alguna cos
|
|
|
dijous, 15 de setembre del 2011
Helvetica. I punt.
Excel·lent documental en anglès amb subtítols en espanyol (no sé si estan també en català...) sobre l'Helvetica. Amb opinions de professionals de renom a favor i en contra. Explicant què i com. Joves i grans. 1h21m! però l'havia de veure...
dijous, 23 de juny del 2011
Interessant font de recursos gràfics
Observant el canvi de tendències en disseny web que estic notant últimament, fa temps que vaig guardant adreces per si en un moment donat les puc necessitar. Abans ho feia amb del.icio.us, però últimament ho raciono tot millor amb Instantpaper (de fet faig un "Read Later" i després ho organitzo al meu gust).
El cas és que no ho buscava específicament però m'he trobat amb una adreça d'allò més interessant i, tot i que no era per allò que necessitava, ara ho estic fent servir i molt. També pot ser degut al tipus de feines que estic tenint últimament.
Estic parlant de Recursos 2D, un web amb un recopilatori increïble de recursos gràfics d'aquells que sempre fan falta. A més m'he trobat que en algun cas estava a punt de comprar imatges i les tenia aquí "by-the-face"... o sigui que m'està sent de molta utilitat.
A més, pràcticament cada dia afegexien nous enllaços a descàrregues. Un web muntat sobre Blogger al que va bé estar-ne subscrit per RSS...
dijous, 16 de juny del 2011
Cartell XLI Setmana del Mar
Llegeixo a través del butlletins de l'Ajuntament de Vilanova i la Geltrú les activitats de la XLI Setmana del Mar i, a través de la imatge que acompanya la informació, m'assabento del cartell guanyador de l'edició d'enguany.En principi havia trobat la imatge molt petita i no l'havia trobat a més resolució (ara fent clic es veu més gran), però tot i així (o potser justament per això) m'ha semblat realment ben trobat sobretot després de les mediocritats a les que ens han tingut acostumats de sempre (tot i que també cal dir que no els he vist tots...).
Estirant del fil, m'entero que el seu autor és Magoz, sobrenom amb el que es fa dir Mikel Punzano, alumne de l'EASD (escola d'art i disseny) Serra i Abella de l'Hospitalet de Llobregat però que és de Vilanova i la Geltrú. I estirant més del fil veig que hi ha joves promeses amb tècniques molt interessants en il·lustració. Està clar que les coses estan canviant... a millor.
Enhorabona doncs!
dijous, 19 de maig del 2011
Entrevista a Pablo Rubio d'Erretres
A través del bloc de la Xènia Viladàs, m'entero d'una entrevista que recomana a Pablo Rubio Ordàs, d'Erretres.
L'entrevista val la pena per molts conceptes que analitza i propostes de com ha de ser la mentalitat d'un dissenyador. El que passa és que, com la majoria de vegades, parla d'una filosofia del dissenyador que ha d'aportar un seguit de solucions encara que la majoria de vegades el client ni ho demani perquè realment no sap el que vol... Tot això està molt bé depenent del teu status de dissenyador, perquè a mi un client em ve dient d'entrada que el que prima és el pressupost ajustat... anem bé, doncs... Acabem fent el que més o menys vol el client per ajustar-se a un pressupost inexistent que, d'entrada, ja anem sobrepassats.
Ara mateix estic fent feines a meitat de preu que fa 2 anys i encara sort que les puc fer que si no estaria de braços plegats. No em puc plantejar aportar solucions que generalment ja suposen, només per començar, un increment de pressupost... Encara que també pot ser que no ho sàpiga vendre... També pot ser que quan he decidit dedicar-me a aquets ofici pel meu compte, ha estat en el pitjor moment econòmic que mai ningú s'hagués pogut imaginar...
El que no m'ha agradat gens és que, un estudi de la categoria d'Erretres, en el seu bloc titulat Driven by Design siguin incapaços de pujar un vídeo en unes condicions "decents". M'explico: han pujat un vídeo de 328 MB en molt bona qualitat en F4V, però només el deixen veure en una finestreta bastant ridícula de 400 x 300 px. Si esperen que la majoria dels mortals, per veure aquest vídeo hagin de passar-s'hi el dia sencer esperant a que es reprodueixi, van bé... Així que he buscat en el codi de la pàgina, m'he baixat el vídeo a l'escriptori i l'he pujat a YouTube per compartir amb tothom i que es pugui veure en la qualitat i rapidesa que cadascú decideixi... o no?
[El seu vídeo original el podeu veure en aquesta entrada el bloc: http://erretres.com/drivenbydesign/?p=421. El que pujo jo: YouTube.]
dimecres, 18 de maig del 2011
A la teva nevera (Stéphanie de Rougé, fotògrafa)
Seguint la sèrie de fotografies comparatives d'On dormen els nens del fotògraf James Mollison ara toca saber què hi ha a la nevera de cadascú, sigui persona individual o família. Curiós si més no per allò del "som el que mengem"... i fins i tot més que la pròpia nevera, la fotografia de la sala on es fan la fotografia.
Les fotografies són de Stephanie de Rouge i, temàticament, a part d'aquestes d'A la teva nevera també en té d'altres igualment interessants com A la teva habitació i Al teu terrat entre altres feines.
Subscriure's a:
Missatges (Atom)