Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

15+ шаблона за бързо и ефективно скициране на сайт 2

Сподели урока

Обичаш ли да скицираш идеите си преди да преминеш към изпълнението им? В повечето случаи, бързото нахвърляне върху обикновен лист хартия ще ти помогне да придобиеш по-добра представа за възможностите на самата идея. Предварителното скициране на уеб сайт върху хартия е доста популярен метод, който е лесен за изпълнение, евтин и не отнема много време.

В тази колекция ще намериш повече от 15 безплатни, готови за принтиране шаблона, които можеш да използваш за планиране на твоя следващ уеб сайт.

ZURB Responsive Sketches

Тук ще намериш голямо разнообразие от шаблони събрани в един общ пакет. Тъй като все повече хора използват телефона си за достъп до интернет, трябва да започнеш да мислиш как да им предложиш добро изживяване, независимо от устройството, което имат. Точно тук се вписват шаблоните предоставени от ZURB. Те ще ти помогнат да скицираш т.нар. responsive уеб сайт в различните му състояния.

ZURB Responsive Sketches

Линк към сайта

Sneakpeekit Wireframe Sketch Sheets

Колекция от разнообразни шаблони подходящи за планиране на всякакъв тип уеб сайт - мобилен, таблетен или традиционен с фиксирани размери. Шаблоните са с различни размери и са подходящи както за дизайнери, така и за разработчици.

Sneakpeekit Wireframe Sketch Sheets

Линк към сайта

Paper Browser

В този сайт ще откриеш 2 различни шаблона, които можеш да използваш за създаване на бърза (Quick) или детайлна (Detailed) скица на твоя сайт. Шаблонът за бърза скица е по-обикновен, което ще ти позволи набързо да нахвърлиш идеите, които имаш. Шаблонът за детайлна скица е разделен на фина мрежа, което ще ти даде по-добър контрол върху подравняването на елементите. Мястото за дизайн и при двата шаблона е с резолюция 1024х768, което до голяма степен симулира начина, по който сайта ти ще изглежда онлайн.

Paper Browser

Линк към сайта

A4 Sketching Paper

Тук ще откриеш само 1 шаблон, но в 2 различни размера – А4 и А3. Мястото за скициране е разделено от множество вертикални линии условно разположени на 16px една от друга.

A4 Sketching Paper

Линк към сайта

960 Grid System Sketch Sheets

Тези шаблони са базирани на популярната 960 Grid System. Всеки от тях е разделен на 12, 16 или 24 колони, което ти дава подходящ контрол върху бързото нахвърляне на дизайна и структурата на твоя сайт.

960 Grid System Sketch Sheets

Линк към сайта

Konigi Graph Paper

Тези шаблони са доста обикновени, но пък вършат перфектна работа. Целта им е доста ясна – бързо скициране на сайт, без да разсейва с излишни неща. Доста интересен е Dot Grid шаблона, който е направен от мрежа от точки. Можеш да го използваш за създаване на някои елементи от потребителския интерфейс.

Konigi Graph Paper

Линк към сайта

Web Sketching Template – 6 pages

Документа е разделен на 6 малки браузърни прозореца. Тук целта е по-скоро да се фокусираш върху структурата на сайта, отколкото върху детайлите. Това ти дава възможност да скицираш набързо 6 различни страници или 6 отделни варианта на една и съща страница.

Web Sketching Template – 6 pages

Линк към сайта

Web Sketching Template – 1 page

Този шаблон е идентичен с предишния с единствената разлика, че има само 1 браузърен прозорец. Това предполага, че фокуса ти ще бъде насочен само върху 1 страница от твоя сайт.

Web Sketching Template – 1 page

Линк към сайта

Какво мислиш за тези шаблони? Ще подобрят ли процеса ти на работа? Би ли използвал някой от тях за предварително скициране на следващата ти идея? Сподели коментара си по-долу.

Използвани снимки

Снимка към урока: Wireframe

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

2 страхотни коментара

  1. 1

    Георги
    15 ноември 2012 09:58

    Ще ми бъдат определено от полза! Благодаря!

  2. 2

    Джават Ушев (автор)
    16 ноември 2012 11:52

    И аз благодаря за коментара :)

Твоят коментар

* - задължителни полета