fbpx

Личный опыт: как разработать современный европейский сайт. Часть 2

Часть 2
Как разработать
современный европейский сайт

В прошлой статье мы рассказали вам о задачах и структуре сайта, о том, как провести исследования, анализ, разработать прототип и подготовиться к созданию действительно хорошего веб-сайта. Напоминаем, что этот цикл статей целиком и полностью основан на нашем опыте, опыте агентства Dizz. Поэтому ниже вас ждет материал, который позволит вам не наступать на грабли самостоятельно, а понять, как и что нужно делать, осмотрев наши шишки.

В этой статье мы расскажем вам о контенте, дизайне, фронтенд разработке.

Этапы разработки сайта 

4

Контентное наполнение

Естественно, любой сайт так или иначе должен быть наполнен контентом. И поэтому мы должны делать дизайн под контент, а не наоборот. Если вы начнете с хвоста, то готовьтесь к непременному переделыванию дизайна. Поэтому для начала вам нужно собрать весь необходимый материал.

Узнайте довольно подробную информацию о том, что должно быть на сайте. Если материал вам предоставляет заказчик – шикарно. Но чаще всего над наполнением приходится работать вам. Поэтому вы должны знать все о том, каким должен быть будущий сайт.

Писать текст для сайта несложно. Нужно выполнить эти шаги:

1. Короткий текст. Напишите одну-две фразы о том, что такое та компания, для которой и создан сайт, и с чем ее едят.

2. Объяснение. Более развернуто объясните, чем компания занимается. Не нужно громоздких фраз. Объясняйте все просто и понятно.

3. Достоинства. Напишите три основных положительных качества.

rabota 3

4. Преимущества. Объясните, почему именно вы круче всех. Почему именно с вами трава станет зеленее.

5. Придумайте заголовки. Старайтесь не зацикливаться на стандартных и скучных заголовках. Поймите команду своего клиента и придумайте такие заголовки, которые бы лучше всего отобразили дух компании.

6. Отзывы клиентов. Довольно просто. Нужно всего лишь попросить клиентов компании сказать пару хороших слов.

Читайте также:  Личный опыт: как разработать современный европейский сайт. Часть 1

7. Цифры. Подумайте, какие цифры вы могли бы отобразить на сайте? Может время, за которое клиент получит свою пиццу, если это сайт для доставки еды? Или средний балл среди учеников, если это сайт с курсами.

8. Команда. Покажите людям, кто будет на них работать. Когда человек видит не абстрактную команду, а конкретных людей, то он, скорее всего, обратится к этой команде за услугой или товаром.

9. Партнеры и заказчики. Есть кто-то с громким именем среди партнеров или клиентов? Скажите о нем.

10. Уточняйте специализацию. Если компания оказывает какие-то специфические услуги – напишите об этом.

11. Пишите кратко. Люди не будут читать полотно текста. Сначала скажите о главном, а затем добавляйте детали. Привлекайте людей к описанию с помощью хорошего заголовка. А главное – не пишите много.

Инструменты для работы с текстом:

1. Advego – проверка текста на уникальность
2. Яндекс Спеллер – проверка орфографии онлайн от Яндекс
3. Synonymizer – подбор синонимов
4. Google переводчик сайтов
5. Грамота.ру – помогает вспомнить правила русского языка, решает спорные моменты по пунктуации.

ж18

Пишите текст только если вы уверены в своих силах. В противном случае наймите копирайтера. Он сделает все как положено.

 

5

Дизайн

Хватит теории, приступим к практике. Как вы помните, перед нами стояла задача создать сайт для нашего агентства, который будет раскрывать суть нашей команды, уровень и амбиции. 

Прежде всего мы занялись анализом сайтов веб студий и диджитал агентств с Украины, России, Европы и Америки. Изучили такие сайты как Awwwards и CSSWINNER. Конечно, сразу захотелось создать что-то необычное, креативное, но в то же время мы поняли, что наш сайт должен быть понятен большинству пользователей. И мы остановились на более строгом и лаконичном решении. “Еще рано шокировать пользователей,” подумали мы 🙂

Читайте также:  10 лучших бесплатных анимаций для UX-motion дизайнеров

Было принято решение с главной странички знакомить наших будущих клиентов с нашей командой, для этого мы сняли небольшое видео. Анализируя большинство агентств Киева и даже всей Украины, мы замечали одну и ту же ошибку. Многие агентства нехотя делятся визуальным материалом своей команды (фото, видео).

Многие агентства нехотя делятся визуальным материалом своей команды

А обычный текст «О Нас» мало кто читает. Исходя из этого, заходя на сайт этих агентств, пользователь не видит, кто стоит за этим сайтом, какая команда и так далее. Видео и фото агентства вызывают больше доверия.

Исходя из этого, мы набросали концепт главной странички.  Дизайн странички выполнен по принципу «Zet Pattern».  Когда ваше зрение идет буквой «Z» – слева направо – при этом не упуская важную информацию из своего поля зрения.

Дальше шла отрисовка концепта внутренних страничек. Каждый день что-то менялось в дизайне, нас многие вещи не устраивали, но, несмотря на это, дизайн параллельно отдавался на верстку.

Правился дизайн уже при верстке, приходили свежие идеи, проверялось все на удобность и все сразу же изменялось в живом режиме. Хорошая совместная работа дизайнера с верстальщиком – залог успеха. 🙂

Этот сайт для нас был как живой. Он существовал как самостоятельный организм и развивался и совершенствовался с каждым днем. Мы не перестаем его тестировать и что-то менять в дизайне.

Было отрисовано до 5 макетов, но выбрали только 1 вариант.

Пример

6

Фронтенд разработка

В этом разделе мы поговорим про front-end.

Давайте для начала определим, что такое проект frоnt-end. Frоnt-end – это клиентская часть сайта, за которую отвечают front-end разработчики. Нельзя путать верстальщика и front-end разработчика, так как верстальщик создает только разметку страницы, а вот front-end разработчики создают всю логику визуального интерфейса сайта, от валидации форм до сложных манипуляций объектами во время скролинга и эффектов наполнения страницы.

Читайте также:  [В кадре] Ирина Костышина и «Человек, который упал на землю»

О нашем проекте

Проект был написан по большей части вручную без использования css фреймворков, так как размеры страниц и блоков не являлись стандартными, в некоторой части внутренних страниц использовался css ферймворк bootstrap. Это по части HTML/CSS.

Что касается JavaScript

Интересный факт, мало кто из круга не-разработчиков знает, что всем известный и самый популярный язык программирования на самом деле не имеет ничего общего с Java, а просто имеет схожее название. Официальное название всем известного JavaScript – ECMAScript. Такое название ECMAScript дали с маркетинговой точки зрения, так как когда внедряли javascript был популярен язык Java. 

Вся логика Javascript поддерживается библиотекой jquery. У нас используется js в основном для манипуляции объектами и открытий модальных окон (так называемые pop-up). Стоит отметить, большая часть эффектов написана при помощи CSS3, а если использовался js, то только для того, чтобы добавить нужный класс с заранее прописанными эфектами.

К примеру, на странице “О нас” блок “РАБОТАЕМ СО ВСЕМ МИРОМ” – движение точек и самолетов – реализован на чистом css без вмешательства javascript, а вот фон уже был сделан при помощи специальной js библиотеки которая создает и движет canvas-объекты.

Вот такой у нас front-end.

Пример

Снимок экрана 2016-01-27 в 17.23.03

Продолжение следует 🙂

Задавайте интересующие Вас вопросы в комментариях.

Читайте также: 

Прогноз на 2016 год: тренды в веб-дизайне

Как правильно использовать баланс в веб-дизайне

15 важных терминов в веб-дизайне

Поделиться:

Про автора

Приветствую Вас, меня зовут Владимир. Я cо-основатель интернет издания Say-Hi и диджитал агентства Dizz Agency.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: