lainformacion.comInternet y Ordenadores

Practicopedia > Categorías > Internet y Ordenadores > Páginas web > Cómo elegir imágenes, tipografías y colores para tu página web

Cómo elegir imágenes, tipografías y colores para tu página web

Busca un diseño atractivo y coherente y un tipo de letra sencillo

web_disenio_0.jpg
Elige un tamaño de fuente que permita una lectura fácil de tus textos. Por norma general, no deberías usar una letra de menos de 12px. FOTO: © Yuri Arcurs - www.photaki.es

14/01/2013 por: Practicopedia

Elige un diseño atractivo y coherente para tu web. Lucirá mucho más bonita y ayudará a tu usuarios a encontrar la información que buscan. Te damos las claves para que lo hagas. Descubre, en este practiocgrama, cómo elegir imágenes, tipografías y colores para tu página web.

  1. 1 El diseño.
    Paso 1

    Un usuario que llega a tu web tiene un objetivo: encontrar la información que busca de forma rápida. Para ello es necesario que tu página tenga un diseño atractivo, pero sobre todo coherente.

    Un buen diseño debe contar con elementos gráficos de todo tipo: botones, ventanas, iconos, tablas, textos que ayuden a los usuarios a comprender bien los contenidos, etc. La elección de gráficos y colores es otra parte muy importante de un buen diseño. Dará un valor añadido al contenido y ayudará a despertar el interés del usuario. Aún así, no es bueno usar elementos gráficos o imágenes que no aporten nada al contenido. Lo único que conseguirás es que la página pese más y tarde más tiempo en cargarse.

    Antes de elegir una plantilla en Webmaker, asegúrate de que pueda encajar con tus contenidos. Más adelante, podrás cambiar los colores a tu gusto.

  2. 2 Las imágenes.
    Paso 2

    Elige imágenes pequeñas para tu web. La resolución tiene que ser de 72 dpi. No interesa que el tiempo de carga de la página se alargue. En cuanto a los formatos, los más usados son JPEG, PNG o GIF. Este último se usa mucho en iconos o 'banners' publicitarios.

    Insertar imágenes con Webmaker en tu página es muy sencillo:

    - Desde la pestaña ‘Administrar contenidos’ podrás insertar imágenes de tu disco duro, desde la galería de Webmaker o incluso desde fuentes externas como Fotolia.

    -Haz clic y arrastra la imagen que desees hasta la zona habilitada.

    -Escala la imagen hasta que quede proporcionada con el texto.

  3. 3 La tipografía.
    Paso 3

    Usa el mismo tipo de letra en toda tu web. Esto le dará más coherencia y hará que los contenidos sean más legibles para el usuario. Puedes variar el tamaño de la tipografía en los encabezados de página, en los titulares o en cualquier parte del texto que quieras resaltar. Por norma general, el tamaño mínimo de fuente que se recomienda es de 12px. Los textos de menos de 10px son ilegibles.

  4. 4 Anota estos consejos sobre usabiliad.

    -Claridad para facilitar la lectura. En los textos largos es muy importante que la lectura sea lo más confortable posible. Usa tipos de letra sencillos (Verdana o Arial son los más usados, Garamond puede ser también una buena alternativa), un color acorde con el fondo, y un tamaño de fuente adecuado.

    -Presta atención al medio. No es lo mismo leer un texto impreso que una página web. La lectura en una pantalla es mucho más fatigosa. Para evitar que el usuario se canse no uses una letra muy recargada, es mejor que sea sencilla.

    -No uses muchos tipos distintos en una misma página. Lo máximo recomendable serían cuatro, siempre teniendo en cuenta que una negrita cuenta como tipo. Para los subtítulos, se suele usar la misma del cuerpo de texto con dos puntos más grande o un punto y negrita.

    -No abuses de las mayúsculas, los subrayados y el texo justificado a ambos lados para pantalla (los navegadores no reparten bien el espacio entre palabras y el efecto cuadrado no compensa la pérdida de homogeneidad).

  5. 5 ¿Quieres más información?

    Para saber más entra en el canal de experto de arsys en Practicopedia.com. Por otra parte, te recomendamos que consultes el artículo ‘Imágenes, tipografías y colores’, también de arsys.

    Por útlimo, no dejes de visitar la sección ‘Páginas web’, en la categoría ‘Internet y Ordenadores’.

También te puede interesar

Cómo borrar tu rastro en Internet

Cómo nació Chatroulette

 

5 Comentarios comentarios

  1. Comentarios
    5
    TASHIR

    24-06-2016 | 11:44:52 h.

    TASHIR

    SOL DU SOL DU HOMEPAGE SOL DU Result 2016 SOL result SOL Admit Card 2016 SOL Result 2016 SOL Syllabus 2016 SOL DU Date Sheet 2016 SOL BA 1st Year Result 2016 SOL BA 2nd Year Result 2016 SOL BA 3rd Year Result 2016 SOL B.com 1st Year Result 2016 SOL B.com 2nd Year Result 2016 SOL B.com 3rd Year Result 2016 2016 SOL B.com Hons. 1st Year Result 2016 SOL B.com Hons. 2nd Year Result 2016 SOL B.com Hons. 3rd Year Result 2016 SOL BA Hons 1st Year Result 2016 SOL BA Hons 2nd Year Result 2016 SOL BA Hons 3rd Year Result 2016 CET Delhi 2016 application form CET Delhi 2016 admit card CET Delhi exam date 2016 CET Delhi 2016 counselling CET Delhi Online Registration 2016 CET Delhi Eligiblity 2016 CET Delhi Offline Registration 2016 CET Delhi Admission form 2016 CET Delhi Councelling 2016 CET Delhi First Round Councelling 2016 CET Delhi Admit Card 2016 CET Delhi Second Round Councelling 2016 CET Delhi Third Round Councelling 2016 CET Delhi Polytechnic Result 2016 CET Delhi Result 2016 Delhi Polytechnic Result 2016 Delhi Metro Smart Card Recharge DMRC Smart Card Recharge Metro Card Recharge Metro Smart Card Recharge Delhi Metro Card Recharge Mumbai Metro Smart Card Recharge Relience Mumbai Metro Smart Card Recharge Mumbai Metro Online Recharge DMRC Card Recharge Metro Card Recharge Online PNB Credit Card Payment Apply for Credit Card Online PNB Life Insurance PNB Net Banking PNB Net Banking Online Registration PNB Mobile Banking PNB Net Banking Payment PNB Saving Account Opening Online PNB Credit Card PNB Credit Card Status PNB SMS Banking PNB Mobile Banking App Download PNB Housing Finance PNB Home Loan PNB Credit Card Payment BAOU Result 2016 BAOU Admit Card 2016 BAOU Hall Ticket 2016 BAOU Date Sheet 2016 KSOU Result 2016 KSOU Admit Card 2016 KSOU Hall Ticket 2016 KSOU Date Sheet 2016 Kannur University Result 2016 Kannur University Hall Ticket 2016 Kannur University Admit Card 2016 Kannur University Date Sheet 2016 Know Your UAN Generate Your UAN How to generate UAN epfo epf epf Balance pf status pf balance Provident fund epf status pf Online epfo Claim Status Provident fund balance pf Account balance pf balance online epf Online pf balance enquiry pf balance check online epfo member portal epfo claim status check know your pf balance epf india epfo India epfo Login epfo Online Payment Upload your EPF KYC

  2. Comentarios
    4
    SAPNA

    22-06-2016 | 01:31:32 h.

    SAPNA

    sms activate hdfc net banking activate icici net banking activate axis bank net banking activate andhra bank net banking activate canara bank net banking activate corporation bank net banking activate syndicate bank net banking activate central bank net banking activate dena bank net banking activate union bank net banking activate yes bank net banking activate uco bank net banking activate obc net banking activate vijaya bank net banking activate idbi net banking activate citi bank net banking activate bob net banking activate kotak net banking free web hosting happy birthday wishes activate hdfc mobile banking activate icici mobile banking activate axis bank mobile banking activate andhra bank mobile baking activate canara bank mobile banking activate corporation bank mobile banking activate syndicate bank mobile banking activate central bank mobile banking activate dena bank mobile banking activate union bank mobile banking activate yes bank mobile banking activate uco bank mobile banking activate obc mobile banking activate vijaya bank mobile banking activate idbi mobile banking activate citi bank mobile banking activate bob mobile banking activate kotak mobile banking hdfc net banking icici net banking axis net banking andhra net banking canara net banking corporation net banking syndicate net banking central bank net banking dena bank net banking union bank net banking yes bank net banking uco bank net banking obc net banking vijaya bank net banking idbi bank net banking citi bank net banking bob net banking kotak net banking

  3. Comentarios
    3
    anas1

    26-03-2016 | 01:37:02 h.

    anas1

    anasbena5ni1@mohmal.com

    Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon. Instagram Autolikes buy likes buy followers

  4. Comentarios
    2
    Sam

    08-08-2015 | 08:19:29 h.

    Sam

    Aunque parezca fácil, el mundo del diseño coherente en un portal web requiere de habilidad y sabiduría y más si nos centramos en los colores y el estado tipográfico y su arquitectura. Si nos encaminamos a los tipos y ejemplos de tipografia y su significado nos daremos cuenta que existe todo un mundo por observar y plasmar en el diseño. Buen artículo! Un saludo

  5. Comentarios
    1
    Carla

    06-03-2014 | 01:49:45 h.

    Carla

    Gracias por los consejos. Precisamente ahora estoy modificando el diseño de mi página web para que sea más usable y atractiva visualmente.

Deja tu comentario

Normas de uso

Aviso legal

No está permitido verter comentarios contrarios a las leyes españolas o injuriantes.
Reservado el derecho a eliminar los comentarios que consideremos fuera de tema.

Subido el 14/01/2013 por:

Practicopedia
Practicopedia

Líder del How-To audiovisual en España. También en Facebook.com/practicopedia y Twitter.com/practicopedia

Artículos relacionados

Videos relacionados