_____________________________________________CREACIÓN RÁPIDA DE PÁGINAS WEB
Cómo diseñar un sitio web en una hora
Para la mayoría de los diseñadores profesionales, el tiempo es dinero. Crear la obra con la misma calidad en menos tiempo significa que puedes ganar más dinero, por lo que es un incentivo importante para trabajar de manera eficiente.
En este tutorial voy a explicar cómo es posible diseñar un sitio web completo en menos de una hora, y voy a mostrar ejemplos de la página a lo largo de todo el proceso y en la terminación. Es probable que no quiera hacer esto para un proyecto muy importante, pero espero que este ejercicio le dará algunos consejos para que su proceso de diseño sea más eficiente, manteniendo un trabajo de calidad muy alto.
Bueno, vamos a echar un vistazo a cómo funciona esto:
Principios Generales
Hay varios principios que hacen posible la creación de un concepto de sitio web en una hora. Estos principios están diseñados principalmente para mantener su trabajo lo más eficiente posible, y el objetivo es que le permite sentarse y diseñar sin parar. Aquí están los grandes aspectos:
Planificación del diseño
1. Use los recursos pre-hechos de ciertos elementos de diseño (como iconos)
2. Recolecte todos los recursos y los planes antes de comenzar el diseño
Al seguir estos pasos vamos a crear un ambiente que esté libre de distracciones, interrupciones, o que no deje pensar. Después de la etapa de planificación, todo lo que tenemos que hacer es sentarnos y diseñar. El objetivo es seguir un proceso que nos llevará directamente a un sitio web terminado, evitando todo aquello que distrae, a lo largo del camino.
0:00-Kill distracciones
El primer paso consiste en deshacerse de cualquier distracción potencial. Un correo electrónico interesante puede insumir 5 minutos, una llamada telefónica podría conducir a 30, un video de Youtube al azar podría significar una hora de distracción. Por lo tanto, vamos a cerrar Outlook o Gmail, apagar el celular, y cerrar cualquier otro sitio web que potencialmente pueda ser un factor de distracción.
Una vez terminado esto, debe estar con los implementos necesarios, estrictamente una almohadilla, lápiz y Photoshop. Tal vez algunos explorer / buscador de Windows para la gestión de archivos, y tal vez unos pocos sitios web de los iconos y otras descargas de recursos. La cuestión es terminar con los últimos recuros, y pasar a "photoshop-only" muy pronto.
:05—Plan
Antes de comenzar la búsqueda de recursos, o incluso iniciar el esbozo de la página web tenemos que saber qué es lo que vamos a diseñar. Para este proyecto, mi objetivo es crear una página de blog de estilo moderno. Puedo ser bastante escaso, o bien trabajar con imágenes de gran tamaño. El criterio que adopte es el que me va a conducir a la mayor parte de las decisiones de aquí en adelante, ¿Cuál va a ser tu visión?
Una vez que tengo la visión global de la página web, es hora de empezar a dibujar. Cuando dibujo un sitio web comienzo a anotar rápidamente lo que voy a diseñar y, también voy incorporando sugerencias diversas a lo que hago. Básicamente, sólo tenemos unos 10 minutos para este paso, así que no es demasiado detallado lo que hay que realizar, tan solo una visión muy general. Si usted echa un vistazo a mi dibujo verá que no da como para ganar algún concurso, pero que sin duda ayuda a acelerar el proceso de diseño, no bien se comienza a trabajar en Photoshop.
0:15—Juntar los materiales
Quizás el paso más importante de este proceso consiste en recopilar todo el material por adelantado, antes de comenzar el proceso de diseño. Imagínese abrir Photoshop y tener cada elemento de la página web listo para las cajas, botones, fuentes y demás. Esto solo ya haría más rápido el proceso contando sólo con los elementos para crear un diseño, ¿verdad? Este es nuestro objetivo.
Hay 5 o 6 grupos de elementos clave que tenemos que tener preparado antes de comenzar el diseño. Estos grupos son:
· Su visión y su boceto (ver paso dos)
· Fuentes, incluyendo la fuente de logotipo si lo necesita
· Los iconos de los medios de comunicación social y / o de navegación
· Los botones que va a utilizar
· Envases de contenido y las cajas de la barra lateral
· Otros misceláneos o elementos especializados
Usted debe decidir y recopilar la mayor cantidad de estos elementos como le sea posible antes de empezar a diseñar. Una vez que Photoshop está abierto y comienza a trabajar, esencialmente, el diseño debe construirse. Algunos de estos componentes de diseño son mejores que comprar unos pre fabricados, me refiero a iconos, fuentes, botones y elementos de la Caja de Herramientas. Estos recursos pre fabricados pueden salvarte de un montón de trabajo, y en muchos casos, puede incluso mejorar el resultado final (yo sé que personalmente soy terrible en el diseño de la fuente, así que siempre compro o utilizo una fuente existente).
Por ejemplo, en el sitio web que estoy trabajando, he decidido utilizar los iconos en blanco y negro de un conjunto de iconos que están a disposición. Realmente no necesito ningún cuadro específico o elementos de la interfaz, ya que es un diseño de estilo moderno y utilizará los elementos más simples de la caja.
Una vez que haya reunido todos los recursos que va a utilizar para el sitio, es el momento de pasar a la imagen general.
0:25—Concepto rígido
Así que hasta este momento hemos estado haciendo la mayoría de la planificación-y es posible que se pregunte por qué he pasado 25 minutos de la hora límite de tiempo, no en el diseño de cualquier cosa. No se preocupes, la respuesta viene en este paso. Durante los siguientes 20 minutos de trabajo vamos a tomar todos los bocetos, planos, y los recursos que hemos reunido y transformarlos en un diseño web casi completo. Vamos a dar este paso a paso:
Paso 1: Coloque Sus Guías
Como se puede ver arriba, lo he colocado alrededor de las guías para el boceto que hice antes. Esto debería tomar sólo unos segundos, y si usted decide utilizar un diseño de cuadrícula le llevará mucho menos.
Paso 2: Cajas
Este es un diseño bastante elemental de las 'cajas'. Estoy empleando sólo las líneas de puntos para separar las áreas de contenido en el diseño, más allá del hecho de que se podría estar usando un fondo de color con cajas de luz y sombras, aspecto éste que a todos sus efectos, no importa demasiado. También me he salteado por delante un poco y he colocado los anuncios logotipo y la barra lateral en el diseño.
Paso 3: Crear Dummy Content
Este paso prácticamente crea todo el sitio. Si usted está siguiendo el proceso que conduce a su propio diseño, no gaste demasiado tiempo en detalles de ajuste. Vaya de lo general a lo particular, resolviendo en una visión sinóptica, primero el conjunto, porque puede suceder que quede mejor el resultado final resuelto en un pantallazo, que trabajosamente perdiendo tiempo parte por parte.
Paso 4: Iconos y botones
Tiempo para los botones y los iconos.
He añadido los iconos principales medios de comunicación social en la parte superior del diseño, y también he añadido un icono de comentario cerca del título del blog. También he creado un 'Leer más' botón que está un poco más abajo de la página. Aparte de eso, no es un botón muy pesado. Para aquellos de ustedes que no tienen ganas de diseñar sus propios botones, siempre se puede tomar un paquete pre establecido.
En este punto, el diseño está concebido sobre todo en su conjunto. Todavía quedan una serie de detalles a la izquierda.
0:45—Filtrar
Al llegar aquí usted debe tener el diseño en su mayoría concluido. Idealmente, usted puede usar estos últimos 15 minutos para asegurarse de que todo se alinea muy bien, añadir algunos estilos de acabado, o controlar aquellos aspectos en que se ve muy grande.
Siendo realistas, sin embargo, es probable que todavía tenga algunas cosas más que realizar en el diseño. Al llegar a este punto me había olvidado por completo el pie, por lo que fue la primera cosa que he creado:
Vaya, olvidé el pie de página:
Mi guía de estilo moderno y minimalista, que acaba de repetir la imagen del rompecabezas de la insignia y ha creado unas cuantas columnas de texto para la navegación.
Los toques finales:
Su diseño puede requerir un trabajo de acabado totalmente diferente, como la creación de líneas nítidas agradables o añadir imágenes de fondo a los distintos elementos. Siempre y cuando estén bien preparados con los elementos de diseño y guías de estilo, hay que ir muy rápido.
1:00—Complete
Eso es todo.
Afortunadamente, decir que la página web se hace en una hora, es tan solo una sugerencia auto impuesta. En realidad puede tomarse todo el tiempo que quiera. Una hora es un límite difícil de cumplir e incluso teniendo experiencia no es fácil. Esperemos, sin embargo, siguiendo estos pasos que usted pueda acelerar el proceso considerablemente, aunque eso le implique tomar 2 o 3 horas para terminar todo.
Aquí está el diseño final que he creado:
Ciertamente no es el mejor diseño en el mundo, aunque estoy bastante contento con cómo quedó. La parte buena es que exigio muy poco tiempo para crear, por el contrario, la escritura de este blog tuvo mucho más trabajo que el propio diseño.
También es un diseño bastante mínimo, lo que le ayuda a contribuir a la velocidad de su creación. Dicho esto, si usted se maneja con este proceso general se podría añadir algo de estilos complejos o simplemente mediante el canje de los antecedentes, las cajas, y unos cuantos botones y los iconos. Podríamos añadir otros 15 minutos para el proceso si nos hemos apresurado.
¿Cuál es su tiempo?
¿Alguna vez ha creado a una "velocidad de diseño" algo así, como esto antes? ¿Cómo resultó?
