Зробити сайт сьогодні може зробити практично кожен бажаючий, що вміє більше або менше користуватися інтернетом, а так само володіє базовими навичками верстки. Цьому сприяє безліч інструментів, які дозволяють спростити процес створення сайтів, що використовують деякі готові прототипи шаблонів, конструктори і т. д. Однак є один нюанс, по-перше, ви обмежені можливостями даних інструментів, по-друге, унікальність. Говорячи про унікальність, то якщо ви займаєтеся або хочете займатися цим більш серйозно, то одних готових конструкторів і шаблонів вам рано чи пізно стане мало, і ви природно прийдете до того, що вам потрібно буде створити щось своє, унікальне, якісне, продумане. Ось тут роль вступають ваші навички і можливості.

Насправді немає жорстких правил і стандартів, або кажучи інакше як правильно і не правильно, але в процесі набуття досвіду у вас в багажі знань буде якийсь набір правил, який існує тільки формально, але саме він дозволяє вам робити хороші речі, і уникнути в подальшому косяків, яких можна назбирати, будучи маючи малий досвід.

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

Даний пост послужить хорошою пам’яткою для початківців фахівців у цій сфері діяльності. Отже, ми вирішили створити сайт, і дійшли до етапу створення прототипу шаблон, з чого ж почати.

Сім разів відміряй, один раз відріж
Згадайте, так нас вчили в школі, це правило працює і в сайтобудуванні. Не беріться робити макет на комп’ютері, візьміть чистий аркуш паперу і олівець. На папері ви можете накласти те, що задумали і вже належним чином уявити собі, куди розмістити блоки, елементи графіки, і т. д. і промальовувати які-небудь деталі. Проробіть цю справу з усіма типами сторінок сайту, у вас з’явитися чернетка, з якого ви вже будете переносити на комп’ютер.

Дотримуйтеся модульної сітки
Щодо модульної сітки ми розміщуємо основні блоки і елементи, таким чином, модульна сітка утворює каркас, через який проходять всі сторінки сайту. Дотримуватися модульної сітки є хорошим тоном розробки макету проектів. Крім того модульна сітка відіграє значну роль у наданні інтерфейсу цілісності сайту, нікому внутрисайтовому порядку розміщення елементів, а найголовніше кращому сприйняттю інтерфейсу сайту користувачем. Прагнення до інтуїтивно-зрозумілому інтерфейсу є однією з головних завдань розробки макету.

Від абстракції до деталізації
Такий метод використовують багато художники, і виходить добре. Це застосовно і в проектуванні ескізу сайту. Ви малюєте загальну картину подання інтерфейсу сайту, згідно з нашим правилом ми отримуємо абстракцію того чого хочемо, після чого нам слід опрацьовувати які-небудь деталі, це ми будемо називати деталізацією. Так досягається хороша зв’язка всіх елементів інтерфейсу сайту, тому можна взяти на озброєння.

Адаптація під мобільні пристрої
Сучасний сайт повинен бути адаптований під мобільні пристрої. Інтернет сьогодні має масштаби більше ніж учора, а завтра це повторитися знову. Іншими словами індустрія розвивається, і в побут сучасного суспільства міцно увійшли мобільні пристрої, такі як телефони, планшети, і т. п., частка яких сьогодні становить значну частину. Це говорить про те, що потрібно рахуватися з цими обставинами, і по можливості робити інтерфейс не тільки на десктопні комп’ютери, але і на мобільні пристрої.

Масштабованість в межах інтерфейсу
Ще одна особливість, яку слід взяти, як звичку — це передбачати можливість збільшення обсягу даних на сайті. Коли сайт створюється – ми володіємо базовим набором даних для сайту, можливо, він не такий малий, але слід пам’ятати і те, що ці обсяги можуть збільшуватися в десятки, в сотні, в тисячі разів. Як правило, елементи меню навігації, і інші компоненти повинні бути заздалегідь продумані під такі обсяги даних.

Витримка кольорів і шрифтів
Відомо, що кольорова палітра, а так само шрифти на сайті здатні значною мірою впливати на сприйняття користувачем сайту. Визначтеся з основним набором палітри кольорів для сайту. Виберіть один або декілька шрифтів, які ви будете використовувати на всьому сайті. Ці кольори і шрифти будуть основною складовою інтерфейсу сайту, постарайтеся витримати цей стиль на всіх сторінках, це створить гарне сприйняття сайту, а так само його цілісності. Для доброго прикладу, візьміть якусь книгу, і подивіться, як там витриманий стиль. Заголовки, текст, виноски, і т. д. все витримано однаково в одному стилі на протязі всієї книги. Люди, що створюють книги знають про це не мало, і у них є чому повчитися.

Механіка керуючих елементів
Тут вам слід продумати те, як буде виглядати і реагувати на події керуючі елементи сайту, до них можна віднести посилання в тексті, посторінкова навігація, таби, елементи управління галереєю, чекбокси і т. д. Ці елементи важлива частина інтерфейсу, і тому слід поставитися до цього з належною увагою. Передати розуміння, що відбувається з керуючим елементом на момент впливу на нього користувачем дуже важливо. Продумувати ці речі слід на етапі проектування дизайну сайту. Пам’ятайте, середньостатистичний користувач звик бачити ту чи іншу реакцію при впливі на керуючі елементи, будь то кнопка, що випадає список, і т. д. А це означає, що потрібно бути акуратніше зі спец. ефектами щоб не ламати логіку розуміння того, що відбувається з цими елементами у користувачів. Хорошою практикою є поділ посилань за типами, наприклад, на багатьох сайтах існують так звані псевдо-посилання, які відкривають/закривають якийсь текст без перезавантаження сторінки, такі посилання звично позначають пунктирним підкресленням. Це звично користувачеві, тому що він вже з цим стикався на інших сайтах, а значить, перше сприйняття керуючих елементів буде йому більш зрозуміло.

Додав: htmaker, 09.11.2016 р.
(1 голосів, середній: 5,00 з 5)

Завантаження…

Діліться з друзями:

См. також:


Вічний хостинг від Eternalhost
Рубрика: Проектування сайту

Що таке UX/UI простими словами
Рубрика: Проектування сайту

Добірка популярних шаблонизаторов PHP
Рубрика: Проектування сайту

Що таке Highload, про який так часто ведуться бесіди
Рубрика: Проектування сайту

Вибір тематики сайту
Рубрика: SEO, Проектування сайту

Файл humans.txt
Рубрика: Проектування сайту

Проектування сайту, про те, навіщо це потрібно
Рубрика: Проектування сайту

Проектування макетів в Balsamiq Mockups
Рубрика: Інструменти, Проектування сайту

Концепція «єдиної точки входу»
Рубрика: Apache, Проектування сайту