Aprende a usar Wireframes sinxelos para comezar os teus debuxos
Un wireframe web é unha guía visual sinxela para mostrarche como sería unha páxina web . Suxire a estrutura dunha páxina , sen usar ningún gráfico ou texto. Un wireframe do sitio web mostraría a estrutura completa do sitio, incluíndo as páxinas que ligan a onde.
Os wireframes web son unha boa forma de comezar o traballo de deseño. E aínda que é posible crear complexos alambre con grandes cantidades de detalles, a súa planificación pode comezar cun pano e unha pluma. A clave para facer bos filas é deixar de lado todos os elementos visuais. Use caixas e liñas para representar imaxes e texto.
Cousas para incluír nunha wireframe de páxina web:
- caixas para elementos gráficos primarios
- colocación de titulares e sub-cabezas
- unha sinxela estrutura de deseño
- chamadas á acción
- bloques de texto
Como construír un Web Wireframe sinxelo
Cree unha fila de páxina web utilizando calquera chatarra de papel que teña a man. Velaquí como o fago:
- Debuxa un gran rectángulo; isto pode representar a páxina completa ou só a porción visible. Normalmente comezo coa parte visible e, a continuación, expótaa para incluír elementos que estarían por baixo do dobre.
- Sketch o deseño - é 2 columnas, 3 columnas?
- Engadir nunha caixa para un gráfico de cabeceira: debuxe as súas columnas se quere que sexa un único cabeceiro sobre as columnas ou simplemente engádeo onde o desexa.
- Escribe "Título" onde queres que o teu título H1 sexa.
- Escribe "Sub-Head" onde queres que teña a H2 e os titulares máis baixos. Axuda se os fas proporcionales: h2 menor que h1, h3 menor que h2, etc.
- Engadir en caixas para outras imaxes
- Engadir na navegación. Se estás a planificar pestanas, basta con debuxar caixas e escreber "navegación" na parte superior. Ou coloque listas con viñetas nas columnas onde desexe a navegación. Non escriba o contido. Basta con escribir "navegación" ou usar unha liña para representar texto.
- Engade elementos adicionais á páxina: identifique o que teña o texto, pero non use o texto do contido real. Por exemplo, se desexa un botón de chamada a acción na parte inferior dereita, coloque unha caixa alí e etiquetala como "chamada á acción". Non escriba "Compre agora". nesa caixa.
Unha vez que teña escrito o seu sinxelo wireframe e non debe levar máis de 15 minutos para bosquexar un, mostralo a outra persoa. Pregúntalle se falta algo e por outros comentarios. Con base no que din que podes escribir outra wireframe ou manter o que tes.
Por que os Wireframes de papel son os mellores para os primeiros borradores
Aínda que é posible crear wireframes usando programas como Visio, para as sesións de brainstorming iniciais, debes manter o papel. O papel non parece tan permanente, e moitas persoas supoñerán que o tiraron xuntos en 5 minutos e así non dubide en darlle un bo feedback. Pero cando usa un programa para crear filmes de fantasía con cadrados e cores perfectos, corre o risco de quedar atrapado no propio programa e pasar horas mellorando algo que nunca vai a vivir.
Os wireframes de papel son fáciles de facer. E se non lle gusta, simplemente acaba o papel, xogalo na reciclaxe e colle unha nova folla.