La identitat visual d’aquest portfoli digital representa una persona concreta: Javier Castellanos, alumne de SMX. Cal que transmeti quatre valors:
Proximitat: el rosa és un color càlid i poc habitual en portfolis tècnics.
Rigor tècnic: formes geomètriques simples i una estructura ordenada i coherent.
Claredat: molt de blanc, tipografia llegible i contrast alt (nivell AA de les WCAG).
Personalitat pròpia: un logotip que es reconeix a l’instant i que és meu.
Logotip
El logotip és un monograma JC (les inicials del nom) dins d’un quadrat de cantonades arrodonides. Les lletres es dibuixen amb un únic traç gruixut i extrems arrodonits: la J i la C tenen la mateixa alçada i el mateix gruix, cosa que dona sensació d’equilibri i d’ordre. Les cantonades arrodonides aporten l’aspecte amable. Hi ha dues versions: fons rosa amb lletres blanques (icona del navegador) i fons blanc amb lletres roses (per a la capçalera rosa). Es fa en SVG, de manera que es veu nítid a qualsevol mida i pesa molt poc.
Colors, tipografia i elements gràfics
Colors: paleta rosa i blanc (#c2185b com a color principal), justificada a l’entrada anterior, Tonalitat de colors corporativa: rosa i blanc.
Tipografia: pila de fonts del sistema (Avenir Next, Segoe UI, Roboto…). Els títols van en negreta (800) i el text en pes normal. He triat fonts del sistema perquè carreguen més ràpid i no fan cap petició a serveis externs, cosa que s’alinea amb el RGPD i amb el plugin de cookies del web.
Elements gràfics: una barra rosa de 56 px sota cada títol H2, cantonades arrodonides de 14 px a les imatges, color de selecció de text rosa i anell de focus rosa per a l’accessibilitat amb teclat.
Aplicació a tots els suports
La imatge corporativa s’aplica als punts on el web es veu: la capçalera (logotip + nom), el peu de pàgina, els botons i enllaços, els títols de totes les entrades i pàgines, la icona de la pestanya del navegador (favicon), el color de la barra del navegador en mòbil (theme-color) i les imatges de les entrades. La coherència és el que fa que es reconegui la marca.
2. Implementació
Disseny del logotip: monograma JC creat com a SVG (viewBox 64×64, traç de 6, extrems arrodonits).
Logotip a la capçalera: afegit davant del títol del lloc amb CSS (.wp-block-site-title a::before), a Aparença → Personalitza → CSS addicional. El logotip s’emmagatzema en una variable (--brand-logo) per reutilitzar-lo.
Tipografia: variables --brand-font-head i --brand-font-body aplicades a body i als títols.
Elements gràfics: barra sota els H2, radi de cantonades (--brand-radius), selecció i focus.
Favicon i color del navegador: fragment de codi HTML al head amb el plugin WPCode (Imatge corporativa: favicon JC…).
Revisió: comprovació de la portada, d’una entrada, de la categoria i de la versió mòbil.
Tot el codi està agrupat entre els comentaris IMATGE CORPORATIVA START i END, de manera que es pot desfer fàcilment.
3. Evidències
Logotip (versions)
Versió rosa (favicon)
Versió blanca (capçalera)
Captures de pantalla (cal afegir-les)
Captura 1:
Captura 2:
Capturas 3
4. Conclusions
El web té ara una identitat visual completa: logotip propi, paleta, tipografia i elements gràfics aplicats de forma coherent. Tot es defineix amb variables CSS, així que es pot mantenir o canviar des d’un sol lloc.
To provide the best experiences, we use technologies like cookies to store and/or access device information. Consenting to these technologies will allow us to process data such as browsing behavior or unique IDs on this site. Not consenting or withdrawing consent, may adversely affect certain features and functions.
Functional
Always active
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistics
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
1. Justificació
La identitat visual d’aquest portfoli digital representa una persona concreta: Javier Castellanos, alumne de SMX. Cal que transmeti quatre valors:
Logotip
El logotip és un monograma JC (les inicials del nom) dins d’un quadrat de cantonades arrodonides. Les lletres es dibuixen amb un únic traç gruixut i extrems arrodonits: la J i la C tenen la mateixa alçada i el mateix gruix, cosa que dona sensació d’equilibri i d’ordre. Les cantonades arrodonides aporten l’aspecte amable. Hi ha dues versions: fons rosa amb lletres blanques (icona del navegador) i fons blanc amb lletres roses (per a la capçalera rosa). Es fa en SVG, de manera que es veu nítid a qualsevol mida i pesa molt poc.
Colors, tipografia i elements gràfics
#c2185bcom a color principal), justificada a l’entrada anterior, Tonalitat de colors corporativa: rosa i blanc.Aplicació a tots els suports
La imatge corporativa s’aplica als punts on el web es veu: la capçalera (logotip + nom), el peu de pàgina, els botons i enllaços, els títols de totes les entrades i pàgines, la icona de la pestanya del navegador (favicon), el color de la barra del navegador en mòbil (
theme-color) i les imatges de les entrades. La coherència és el que fa que es reconegui la marca.2. Implementació
.wp-block-site-title a::before), a Aparença → Personalitza → CSS addicional. El logotip s’emmagatzema en una variable (--brand-logo) per reutilitzar-lo.--brand-font-headi--brand-font-bodyaplicades abodyi als títols.--brand-radius), selecció i focus.headamb el plugin WPCode (Imatge corporativa: favicon JC…).Tot el codi està agrupat entre els comentaris
IMATGE CORPORATIVA STARTiEND, de manera que es pot desfer fàcilment.3. Evidències
Logotip (versions)
Versió rosa (favicon)
Versió blanca (capçalera)
Captures de pantalla (cal afegir-les)
Captura 1:
Captura 2:
Capturas 3
4. Conclusions
El web té ara una identitat visual completa: logotip propi, paleta, tipografia i elements gràfics aplicats de forma coherent. Tot es defineix amb variables CSS, així que es pot mantenir o canviar des d’un sol lloc.
AUTHOR
jcastellanos