Дизайн. Продовження
Світ технологій

В минулій статті, ми малювали логотип, отже продовжу розповідь дизайном сайту. В попередній статті було описано як створити логотип, і коли він затверджений, можна приступати до дизайну сайту.


З логотипу ми маємо:
-    Кольори: чорний, білий, оранжевий
-    Шрифти


Починаємо малювати макет сайту зі створення документу, обираємо розмір 1920х1080 пікселів, оскільки це HD формат і 97% пристроїв мають роздільну здатність менше вказаної, а мінімальне розширення беремо стандартне 1024х768 пікселів.


Починаємо роботу над макетом з підбору фонового зображення, для цього в нас Google, я обрав кораблика, бо він зроблений з листа книги, і десь на підсвідомому рівні асоціюється з філософією. Витираємо краї малюнку, щоб був плавний перехід на білий фон. Оскільки це WordPress, то виділяємо основну робочу область шириною в 1000 пікселів, робимо прямокутник на всю висоту, і надаємо йому прозорість в 70%.


Окреслюємо блок для логотипа також прямокутником, але зі округленими краями, оскільки округлені краї надають більш естетичного та плавного вигляду дизайну. Розміщуємо логотип зліва таким чином лишаючи з права собі вільний простір, приблизно 30% від ширини.
Нижче окреслюємо блок меню, скоротивши його всього до 4 пунктів, набираємо шрифтами з логотипу оскільки логотип і меню це перші речі на які звергає увагу користувач. А з права стрічки меню вставляємо пошук.


Тепер основна стрічка з постами. Виділяємо кожен пост в окремий блок, окреслюємо заголовок зверху, надаємо йому чорного фону та напис робимо білим, знизу з права розміщуємо кнопку «читати далі», для контрастності робимо її оранжевою. Зліва від кнопки виділяємо блок, де буде вказана дата та кількість коментарів, зверху над ними ставимо рубрики, зліва фотографію, а справа - текст. Важлива деталь в самому контенті ставимо один з поширених шрифтів: Tahoma, Verdana, Arial, якщо брати інші при верстці можуть виникнути певні проблеми з їх підтягуванням.     


 

З права на 30% ширини та на всю висоту окреслюємо блок під рубрики, де білим по чорному окреслюємо основні, та білим по оранжевому підрубрики, все це також робимо блоками. Вставляємо заголовок, білим по чорному.  Допрацьовуємо підвал сайту, та біля логотипу розміщуємо меню соціальних мереж, а також кнопки «увійти» та «реєстрація», там вони опиняються на видимому місці та під рукою водночас.


Все дизайн макету закінчено. Результат оцініть самі.
В цього дизайну є декілька переваг:
-    Доволі легкий для верстки
-    Намальований простими прийомами
-    Читабельний
-    Чітко розформатований на блоки
-    Простий
З мінусів я б виділив:
-    Не надто художній
-    Всього три кольори
Пишіть вашу думку в коментарях.

Коментувати
Додати коментар
Ваше імя
Ваша електронна адреса
Ваш Коментар
©Zlit 2012ОновленняКонтакти