Skills Nation

La puerta de entrada al crecimiento profesional en DC

1 0 0 1 0 0 1 1 1 1 0 0 0 0 0 1
1 0 0 1 1 1 1 0 0 1 1 0 1 0 1 1
0 0 0 1 1 1 0 0 0 0 1 0 0 0 0 1
0 0 0 1 1 0 0 1 0 1 1 1 1 1 0 0
0 0 1 0 0 0 1 1 1 0 0 0 0 0 0 1
0 1 0 1 1 1 0 0 1 0 0 0 0 1 1 1
1 1 1 0 0 1 1 0 1 1 0 1 0 0 0 1
0 1 0 1 1 1 0 0 0 1 1 0 0 0 0 0
0 0 0 1 1 0 0 1 0 0 0 0 0 0 1 1
0 0 1 1 0 0 1 1 0 1 0 0 1 1 0 1
0 0 0 0 0 0 0 1 0 1 1 0 0 0 1 1
0 0 1 1 0 1 1 1 0 1 1 0 1 0 0 0

brief.json

Rediseño de Skills Nation, el portal donde los residentes de DC encuentran formación gratuita, certificaciones y experiencia laboral pagada. Desde BuildWithin reorganicé el mapa del sitio alrededor de sus ocho programas y rediseñé las imágenes de marca. Lo reconstruí con Claude en dos semanas para que funcione en cualquier dispositivo.

Año: 2026
Cliente: Skills Nation
Industria: Empleo
Duración: 2 semanas
Tipo: Rediseño y desarrollo web

Servicios

IA creativaRediseño webUX/UIImágenes de marcaSEODesarrollo

Ver sitio en vivo

Mostrado solo con fines de portafolio. Las marcas pertenecen a sus dueños; si eres el titular y quieres que lo retire, escríbeme. Términos ↗

Skills Nation, ocho programas, un sitio difícil de recorrer

// ocho-programas-un-sitio-dificil-de-recorrer.md
const skillsNation = {
  industry: "Empleo",
  duration: "2 semanas",
};

01El reto

Ocho programas, un sitio difícil de recorrer

Skills Nation reúne ocho programas gratuitos para residentes de DC. Van de prácticas pagadas para recién graduados a cursos de IA y aprendizajes en agencias del Distrito. El sitio anterior no respondía bien en todos los dispositivos. Además, era difícil de entender y de recorrer.

Skills Nation, un mapa del sitio que empieza por la persona

0 1 1 0 0 0 0 0 1 1 1 1 0 1 0 0
1 0 0 1 0 0 0 0 1 1 0 0 1 0 1 1
1 0 0 1 1 0 1 1 1 0 1 1 0 1 1 0
0 0 1 0 1 0 0 1 0 1 0 1 1 0 0 1
0 0 1 1 0 1 1 1 1 0 0 0 0 0 0 1
0 1 0 0 1 0 0 1 0 0 0 1 1 1 0 1
0 1 1 1 0 0 0 0 0 1 0 1 1 0 1 0
1 0 1 1 0 0 0 1 1 0 1 1 0 0 0 0
0 0 0 1 1 1 1 0 0 0 0 1 0 0 0 1
0 1 1 1 1 1 0 0 1 1 0 0 1 0 0 0
1 1 1 1 1 1 1 0 0 1 1 0 0 1 0 1
1 1 0 0 1 0 1 0 0 1 1 1 1 0 0 0

02Estrategia

Un mapa del sitio que empieza por la persona

Reorganicé el mapa del sitio para que cada programa tenga su propia página. Todas siguen la misma lógica: datos clave, para quién es, requisitos y cómo postular. En la home, el recorrido empieza por lo que ofrece Skills Nation. Luego pasa por los cuatro pasos del camino profesional y llega a los ocho programas. Así cada quien encuentra el suyo.

Skills Nation, imágenes de marca y un sitio que se adapta

// imagenes-de-marca-y-un-sitio-que-se-adapta.md
const skillsNation = {
  type: "Rediseño y desarrollo web",
  year: 2026,
};

03Construcción

Imágenes de marca y un sitio que se adapta

Rediseñé en Figma la interfaz y las imágenes de marca: retratos en blanco y negro sobre formas de color, una por programa. Después reconstruí el sitio con Claude para que funcione en cualquier pantalla. Cada página tiene su SEO y el formulario lleva antispam. Los videos de YouTube no cargan nada de Google hasta que alguien les da play.

Skills Nation, más fácil de recorrer, más clics

1 0 1 1 1 0 1 1 0 1 0 0 0 1 0 0
0 0 1 1 0 1 0 1 1 0 1 1 0 1 1 1
0 0 0 1 1 1 1 0 1 0 1 1 0 1 0 1
1 0 0 1 0 1 1 0 1 0 0 1 1 0 1 0
1 0 1 1 0 1 0 0 0 0 1 1 1 1 0 0
1 0 0 0 0 0 1 0 0 1 0 0 1 1 0 0
0 0 1 0 0 1 1 0 1 1 0 1 1 1 0 1
1 1 1 0 1 1 0 1 0 1 0 0 0 1 0 0
1 1 0 0 1 1 0 0 1 0 0 0 0 0 1 1
0 1 0 1 1 1 0 1 1 0 0 1 1 0 1 1
0 1 0 1 1 0 1 0 0 1 0 1 0 0 0 0
0 0 0 1 1 1 1 1 0 1 0 1 0 1 0 0

04Resultado

Más fácil de recorrer, más clics

El sitio ahora responde bien en todos los dispositivos. Se entiende mejor y es más fácil de navegar. Eso se nota en más clics dentro de la página. También mejoró su posicionamiento en buscadores.

[ OR™ ‒ RELACIONADOS / skills-nation.related ]

Primero los más parecidos a este caso. Con las flechas ves los demás.