1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Buenas practicas del Diseño Web: Idea y Maquetación.

Tema en 'Diseño web' comenzado por JayP, 10 de Enero de 2015.

  1. JayP

    JayP Miembro Activo

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    125
    Me gusta recibidos:
    72
    Puntos de trofeos:
    28
    Género:
    Hombre
    [​IMG]

    [​IMG]

    La siguiente GUIA no pretende ser un manual de diseño web o que se deba seguir al pie de la letra solo es una recopilación de mis conocimientos y experiencias en cuanto a diseño web, tampoco soy un diseñador web Jr o algo parecido, esta GUIA la hago con el fin de acercar a algunas personas a esto del diseño web desde la parte visual o estética, el motivo es porque veo que muchos siguen diseñando con las tendencias que se usaban hace 6 años dándole a sus paginas web una apariencia de paginas viejas o que fueron hechas hace mucho tiempo.

    Las tendencias existen para ser usadas, cabe recalcar que no en todos los casos es recomendable usarlas pero conociéndolas se les puede sacar provecho e inyectar a nuestras webs una cara una nueva o refrescarlas, también para atraer a nuevos lectores y
    susbcritores que en un futuro se pueden convertir en potenciales clientes pero esta parte ya es algo como marketing digital por lo que no lo voy a tocar en esta GUIA.

    Otro de los motivos por los que hago esta GUIA es porque veo que muchos son desarrolladores o programadores y no les voy a negar que los diseñadores suelen ser algo esquivos, hasta egocéntricos y quisquillosos cuando se trata de diseño, negando a las personas que tienen el lado lógico del cerebro más desarollado, no desarrollar su parte creativa y esto para mi es egoísta. También se de antemano que muchos desarrolladores la parte visual les importa poco para ellos desde que funcione ya esta y si se ve bien o mal no les interesa aunque claro esto se debe en gran parte por su lado lógico.

    Lo ultimo que busco con esta GUIA es insultar a algunas de las personas que la lean como dije en un principio solo es la recopilación de mi experiencia y si les sirve para mejorar sus diseños perfecto, aunque claro la pongo en este espacio donde pueden dejar su critica constructiva o destructiva.

    [​IMG]

    [​IMG]

    Bueno vamos a comenzar con lo principal, la idea que es la consecuencia o principal razón de que exista un sitio web en internet aunque esto es muy diverso ya que depende a lo que estés acostumbrado y tu forma de trabajar, yo por lo general primero diseño en un wireframe para tener más o menos clara la idea que tengo y también jugar con un poco de lo que es UX (user xperience) o experiencia de usuario, para esto uso un programa llamado justinmind aunque existen miles de wireframes con los que puedes bocetar tu pagina web pero también se puede hacer a papel y lápiz, luego lo puedes llevar a un programa de edición digital o directamente a código eso ya depende de tu modo de trabajar o hacer tus proyectos.

    Las ventajas de trabajar con un wireframe es que tendrás algo que enseñarle a tu superior o equipo de trabajo también vas a poder jugar con las tipografías con la información de tu pagina web y como la vas a distribuir, puedes jugar con diferentes opciones ya sea posicionamiento o ubicación de los elementos, ver como funcionan mejor y mejoran la experiencia del usuario.

    Ahora recuerda que al momento de usar el wireframe debes tener claro cuales son tus limitantes al momento de codear o pasar a código lo que estas haciendo porque con las herramientas digitales puedes hacer muchas cosas maravillosas pero que luego al momento de pasarlas a código te pueden dar dolor de cabeza por eso no debes abusar de los editores digitales.

    PD: Debes tener claro que es lo que vas hacer porque a medida que avance el proyecto va cambiar pero la idea es en esta etapa quemar todas las posibles variables que vayan haber a futuro.

    [​IMG]


    Bueno llegamos a una parte importante y que pocos desarrolladores o programadores realizan y es la de inspiración, muchos creen que los diseñadores hacen cosas bonitas porque saben y son buenos para ello pero algo muy alejado de la realidad porque los diseñadores hacen todo un proceso para hacer una creación o un diseño.

    Diseño es dar solución a un problema asi de simple pero como le damos solución a un problema se pregutaran, bueno eso es aun más facil y como todo es con investigación, los diseñadores investigan reunen información luego la filtran y por ultimo ejecutan.

    Nota
    Algunas de las personas que buscan inspiración caen en el error de copiar exactamente lo que vieron por lo que eviten caer en ese error, cuando hablamos de inspiración es ver las formas, elementos y ubicación de los elementos, tratar de estudiar porque los usan de esa forma y no de otra, todo esto con el fin de no copiar porque lo que vemos puede que no nos sirva para nuestros proyectos.

    Algunas plataformas en las que encontraras inspiración para hacer tus diseños web:

    1- PINTEREST.

    Pinterest es una red social donde puedes guardar imágenes, crear albumnes y encontrar mucha inspiración, lo bueno de esta herramienta o red social es que se mantiene actualizada por la gran demanda que tiene de los usuarios.

    Para usarla solo debes ingresar a http://es.pinterest.com/ luego en la búsqueda poner las palabras claves de lo que buscas por lo general yo suelo usar palabras en ingles ya que es el segundo idioma más utilizado en el mundo y mucha de la información es más fácil encontrarla en ese idioma.

    [​IMG]


    2-
    webdesign-inspiration.

    En este sitio podemos encontrar diferentes tipos de web lo cual nos viene muy bien porque encontraremos información más concisa aunque la verdad con la evolución de la web los sitios web ya no están estandarizados lo único que los estandariza es la experiencia de usuario porque es lo que realmente importa y es que nuestro usuario no se pierda navegando nuestro sitio y sea cómodo para el, tanto que pueda permanecer mucho mas tiempo que la media (cuando hablo de media me refiero a el tiempo que suele pasar una persona en una pagina web en mi experiencia se que una persona no pasa más de 3 min en ella por eso se esta creando la tendencia de más scroll y menos click).

    Como pueden observar en el sitio pueden filtrar la información por tipo, estilo, colores y multiples categorias.

    El enlace http://www.webdesign-inspiration.com/


    [​IMG]

    3- awwwards

    Para mi esta es una grandiosa pagina donde se premian las mejores paginas web de la internet aparte que todos los días hay una web nueva que puedes mirar aunque claro no vamos hacer ese tipo de webs o usar esos estilos con la nuestra pero lo que me gusta es que te permite despertar la creatividad con ideas innovadoras y que puedes usar para tu web.


    [​IMG]

    [​IMG]
     
    A fromsix, Joi Hernandez, ShiraMaster y 19 otros les gusta esto.
  2. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    324
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Excelente tu guia, no conocia la pagina de webdesign inspiration.
    Y la de awwwards ni decir, es increible.
     
    A Josue Ojeda, Leo Leytes, Arian y 3 otros les gusta esto.
  3. DarioNahuel

    DarioNahuel Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    13
    Puntos de trofeos:
    3
    Género:
    Hombre
    Muy buena la introducción te pasaste. Le falta un favorito esto jaja, sera a marcadores.
     
    A contreras.wd, Rompe Nuca y JayP les gusta esto.
  4. I´mPaul

    I´mPaul Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    7
    Me gusta recibidos:
    5
    Puntos de trofeos:
    3
    Género:
    Hombre
    Jajaja excelente carnal, se ve que tienes experiencia (yo hago lo mismo).
    Tengo 2700 pestañas abiertas (todas son diseños) sólo en firefox ¡XD!
     
    A JayP le gusta esto.
  5. Rompe Nuca

    Rompe Nuca Nuevo Miembro

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    10
    Puntos de trofeos:
    3
    Género:
    Hombre
    Muy buena guía, te felicito!, en poco tiempo posteare la mía!!
     
  6. and187

    and187 Nuevo Miembro

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Muy buena aportación amigo
     
  7. milo_smiler

    milo_smiler Miembro

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    57
    Me gusta recibidos:
    27
    Puntos de trofeos:
    18
    Género:
    Hombre
    muy buen aporte
     
  8. 0zononet

    0zononet Nuevo Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    8
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante de Ingeniería en informática
    Localización:
    Santiago de Chile
    Excelente! Me gusto mucho este post! :rolleyes:
     
  9. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Solo: EXCELENTE!!!
     
    A Tigre Grisel le gusta esto.
  10. Tigre Grisel

    Tigre Grisel Nuevo Miembro

    Se incorporó:
    15 de Enero de 2015
    Mensajes:
    11
    Me gusta recibidos:
    7
    Puntos de trofeos:
    3
    Género:
    Hombre
    Muy Buen tutorial... Te luciste...
     
  11. contreras.wd

    contreras.wd Nuevo Miembro

    Se incorporó:
    16 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Ocupación:
    Estudiante de Ingeniería Informática
    Gracias por compartir conocimiento :) (( todos a la lista de favoritos ))
     
  12. Yeiij

    Yeiij Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    71
    Me gusta recibidos:
    12
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    Desarrollador web.
    Localización:
    Madrid
  13. Manne Diaz

    Manne Diaz Nuevo Miembro

    Se incorporó:
    29 de Enero de 2015
    Mensajes:
    4
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
  14. ProProgramador

    ProProgramador Nuevo Miembro

    Se incorporó:
    7 de Noviembre de 2015
    Mensajes:
    17
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Gracias por la ayuda amigo esto es lo que he estado buscando hace rato para darle un buen y profesional diseño a mis paginas muchas gracias y muchas felicitaciones se ve que eres un buen profesional.
     
  15. davidg9404

    davidg9404 Nuevo Miembro

    Se incorporó:
    5 de Marzo de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Muy buen articulo para quienes iniciamos con esto del diseño web! Felicidades bro!
     
  16. lunasdekaliope

    lunasdekaliope Nuevo Miembro

    Se incorporó:
    9 de Marzo de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Excelente aportación, te felicito...
     
  17. Joi Hernandez

    Joi Hernandez Nuevo Miembro

    Se incorporó:
    8 de Marzo de 2016
    Mensajes:
    27
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Estudiante / Desarrollador Web
    Localización:
    Mexico
    Muchas ideas, me surgieron, gracias!!!! Buena Aportacion... :D
     
  18. minari02||

    minari02|| Nuevo Miembro

    Se incorporó:
    19 de Abril de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas, esta ya es un post viejo pero tengo algunas dudas sobre este tema, que les parece Marvel para maquetar? Yo me considero bueno al momento de codear pero para el diseño... siempre empiezo con un diseño y termino con otro y aun asi termina sin gustarme, alguien mas le pasa? que hacer para mejorar como diseñador?

    Gracias.
     
  19. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    43
    Me gusta recibidos:
    5
    Puntos de trofeos:
    8
    Género:
    Hombre
    Soy novato en el desarrollo de páginas web y está GUIA me va a ser de mucha ayuda. Muchas gracias por compartir tus conocimientos.
     

Comparte esta página