dimarts 19 febrer 2013 per
Mireia Tort
Fa uns dies publicàvem al nostre Twitter un enllaç que ens va semblar tan útil per a dissenyadors web, que hem volgut donar-li més ressò i cedir-li també un petit espai al nostre bloc.
Es tracta d’Agile Designers, un lloc web que aglutina tots els recursos que pot necessitar un dissenyador web en un únic lloc. El web abasta tots els camps relacionats amb el disseny web i hi podreu trobar:
- Recursos relacionats directament amb el disseny: icones, textures, fonts, plantilles, eines, etc.
- Recursos relacionats amb la construcció d’un lloc web: editors de codi, frameworks, aplicacions web, gestors de continguts, eines per fer estadístiques, etc.
- Recursos relacionats amb la gestió: eines de gestió de projectes, col·laboratives, de màrqueting, de gestió de negoci, etc.
- Recursos relacionats amb l’aprenentatge: revistes i blocs, e-books, conferències, llocs web per inspirar-se, etc.
La gràcia d’aquest lloc és que som els usuaris els que decidim què és important i què no, a partir d’un algorisme que calcula la popularitat de cada recurs i, d’aquesta manera, els recursos prenen més o menys rellevància, la qual cosa ens ajuda a poder escollir millor.
És una manera de no perdre més temps buscant aquelles textures que vam veure fa dues setmanes o aquell programa que servia per fer icones. A Agile Designers hi tenim de tot.
És l’hora d’optimitzar temps i recursos i d’esdevenir més productius.
Disseny web, eines, productivitat, recursos, web 2.0
dimecres 19 desembre 2012 per
Sílvia Vila Brustenga
Un tooltip, o descripció emergent, és el que ens dóna informació addicional sobre l’element que estem clicant o passant el ratolí per damunt. Es mostra en forma de finestra al costat del ratolí. En el disseny web es comença a utilitzar molt, doncs és útil a l’hora de mostrar la descripció d’una paraula, mostrar una imatge més gran o aclarar algun concepte.
Un bon exemple és quan afegim a l’etiqueta de vincle, l’atribut title. Passa el ratolí per damunt de “Exemple de tooltip bàsic” i en veuràs el resultat. Aquest és el codi:
<a href="#" title="Estem creant un tooltip bàsic">Exemple de tooltip bàsic</a>
Sempre hem dit que a Can Antaviana tenim cura del disseny web, és per això que utilitzem elements per millorar visualment els tooltips. A continuació, us deixem un llistat amb pluguins de jQuery que ens ajudaran a millorar molt el disseny d’aquestes descripcions emergents.
Tooltips: 10 pluguins jQuery per millorar-ne el disseny
descripció emergent, Disseny web, eines, jQuery, recursos, tooltip
dimarts 11 desembre 2012 per
Sílvia Vila Brustenga
De vegades tenim tanta cura de que el nostre web estigui perfecte, tant visualment com de continguts, que pot ser que ens oblidem d’altres detalls que són els que finalment determinen la professionalitat del muntatge de la mateixa pàgina. Estic parlant, en aquest cas, de la icona de web o favicon en anglès, que particularment crec que és imprescindible incloure-la i més, des que els navegadors ens permeten treballar amb pestanyes.
La icona de web, o favicon, és una imatge en format .ico de mida recomanada 16x16px que s’associa al web. Tendeix a ser una part del logotip de l’empresa de la pàgina, o un element visual significatiu que l’usuari pugui associar ràpidament. Com es veu a la imatge anterior, sense el text descriptiu i només amb els 4 icones de web, segur que sabriem de quines pàgines es tracta.
Per afegir-ho al nostre web només cal afegir la següent línia d’html entre les etiquetes <head>, substituïnt (url) per la ubicació de la icona:
<link rel="shortcut icon" href="(url)/favicon.ico" type="image/x-icon" />
Eines que ens ajudaran a crear el nostre favicon
- FavICO: senzilla eina que et permet pujar una imatge i crear el favicon al moment.
- Favicon.cc: divertida eina que ens permet dibuixar la nostra icona de web, i a més, permet anirma-la si ho desitgem.
- Genfavicon: en qüestió de minuts podem tenir el favicon creat. Podem pujar una imatge o a través de la seva url.
Disseny web, eines, favicon, icona del web, recursos
dimarts 4 desembre 2012 per
Sílvia Vila Brustenga
Hem de tenir en compte i utilitzar imatges d’ús lliure o amb l’aprovació de l’autor.
Seguint amb els temes de disseny web, és molt important tenir en compte les imatges. Per poder millorar visualment el web necessitarem imatges d’alta qualitat que ens permetran il·lustrar el contingut que estem mostrant. Allò de cercar al Google i utilitzar qualsevol imatge del resultat és “perillós”, doncs no sabem els drets de la imatge en qüestió, per tant potser té copyright i no és permesa la seva utilització. Hi ha eines que realitzen una cerca d’imatges inversa, de manera que, indicant-li una imatge, et dóna informació d’on prové, si està en ús en més llocs, les resolucions… Un bon exemple seria TinEye.
Hi ha diverses eines online que ens proporcionen banc d’imatges que podrem utilitzar i a continuació us mostrem les més destacades.
Bancs d’imatges per al disseny web
- iStockphoto: un dels bancs d’imatges més reconeguts. Les imatges són de pagament.
- Stock.XCHNG: imatges que els usuaris poden compartir. Només cal registrar-se i es poden utilitzar les imatges gratuïtament.
- Search Creative Commons: cerca de continguts, tant textuals com il·lustratius, lliures de drets.
- Flickr: en aquesta xarxa social que permet compartir fotografies, també en podem trobar de llicència Creative Commons.
- Morguefile: una bona eina també que no cal registrar-se, i permet la descàrrega d’imatges lliure de drets.
- Freepixels: ens permet la descàrrega d’imatges d’alta qualitat.
banc d'imatges, Disseny web, eines, il·lustracions, imatges, recursos web
dimarts 27 novembre 2012 per
Sílvia Vila Brustenga
És cert potser, allò que diuen que pot provocar pànic una pàgina en blanc quan es comença a dissenyar un web. Us ha passat mai? No és senzill escollir els colors adients, seguint sempre un mateix esquema. A vegades, tendim a escollir un color principal, i després juguem tot el web amb escala de grisos, perquè no sabem quins altres colors poden encaixar-hi correctament.
Avui, us deixem un recull d’eines de colors que ens poden ajudar a inspirar-nos i millorar el disseny del nostre web.
Eines pel disseny web
color, Disseny web, eines, esquema colors
dimarts 23 octubre 2012 per
Sílvia Vila Brustenga
Generalment, els desenvolupadors web quan hem de maquetar i programar un formulari de contacte, ens canvia una mica la cara. Tendeixen a ser visualment pesats, sobretot si hi ha molts camps i a més, si incorporen checkbox i radio buttons.
Això ho podem canviar utilitzant CSS i pluguins de jQuery. A continuació us mostrem un llistat amb eines per poder millorar la visualització i la utilitat dels formularis:
Avui destaquem…
- Validació: Per evitar que s’enviïn formularis buits, o que ens manqui informació important enviada per alguns dels camps dels formularis, hem de validar els formularis, és a dir, indicarem els camps que són obligatoris i si no s’han omplert, o s’han omplert malament, no deixarem que el formulari s’enviï i li indicarem a l’usuari. Tenim diverses eines per fer-ho, us en llistem algunes:
checkbox, contacte, css3, eines, formularis, jQuery, radio button, recursos, recursos web, select, web
