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

• Изготвяне на кратка концепция на проекта
• Схематично представяне на концепцията
• Подробно описание на интерфейс, функционалност и особености
• Изработка на уеб дизайн за отделните интерфейси по спецификацията
• Описване на отделните фрагменти по уеб дизайна с цел коментар на всеки от тях и подобряването им
• Уеб програмиране
• Тестов период и нанасяне на корекции в съответствие със спецификацията
• Приключване на изграждането и съставяне на план за допълнения (ъпдейти)

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

Когато изясните идеята на уеб проекта може да направите кратък чеклист с задължителните, важни неща, които уеб сайта трябва обезателно да включва.
За тази цел може да ползвате http://google.com/docs – удобен симулатор на Office програма, с която можете в екселска таблица да посочите 2 колони: едната с описание на елемента, а другата със степента му на важност или значимост.
Например ако става дума за корпоративен сайт, примерни елементи, които биха били задължителни ще са: каре с новини за фирмата, търсачка, промо-каре за продукт или събитие и пр.

След като имате някаква базова концепция и изискванията на клиента предстои да изградите примерен интерфейс в схематичен вид. С други думи да подредите визуално нещата от списъка, така, че тяхната важност да бъде отразена по най-добрия начин в уеб дизайна.
За тази цел ще ви препоръчам един много лесен за ползване и изключително одобен (освен това напълно безплатен) инструмент: http://gomockingbird.com/ . Чрез него можете да разчертаете схеми на всяка страница с различен интерфейс, която ще се съдържа в бъдещия уеб сайт. Схемите може да представите на своят клиент във вид на PDF или PNG, които сте сейвали чрез този онлайн tool.

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

След това предстои една по-интересна, поне за мен, част – уеб дизайна. При представянето на уеб дизайна трябва да имате предвид това, че клиента не е наясно как ще функционира интерфейса и трябва да обясните подробно кой елемент какво представя и защо е на своето място, а не другаде.
За тази цел има друг онлайн инструмент, който ще Ви е от полза: http://www.bounceapp.com/
Просто поставете screenshot на уеб дизайна си в html документ, качете го на уеб сървър и въведете неговия URL в www.bounceapp.com. Онлайн приложението ще направи нов screenshot, където можете бързо и лесно да добавяте коментари. Накрая, чрез “Save” в горния десен ъгъл на www.bounceapp.com ще получите URL адрес, който може да представите на клиента. Той ще види не само дизайна, но и коментарите по него и ще придобие представа как ще функционира бъдещия сайт.

За да тествате дали интерфейса е добре разпределен и визуално оформен в уеб дизайна, може да поискате няколко бързи отзива от потребители – приятели, близки, колеги и др. За целта ползвайте http://www.clueapp.com/ – записвате URL към уеб дизайна, преглеждате го за няколко секунди и описвате класация с нещата, които са ви “грабнали” от пръв поглед. След това карате своите близки да направят същото и оценявате резултатите. Лесно и бързо, а е доста полезно да откриете “крайпътните камъни” в дизайна на интерфейса. Между впрочем, опитайте и Google Website Optimizer , след като уеб проекта е програмиран – ще ви даде доста полезна информация.

Ако ползвате други онлайн инструменти за по-бърза и по-удобна работа по своите уеб проекти ще съм благодарен да ги споделите в коментарите по-долу.

Успех!