27 Ноя, 2013

Создание своей студии. Шаг №4: Создание запоминающегося дизайна

Дизайн сайта студииПриветствую всех! В предыдущей статье из серии «Создание своей студии» я рассказывал о важности и вариантах подбора домена для своей будущей студии. Там же я проводил небольшой конкурс по части разгадывания домена, который я подобрал для своей студии. Ее адрес так никто и не угадал и я даже специально не стал быстро подводить итоги, думая что быть может все же кто-то отгадает, но нет, этого не случилось. Хотя неделю назад самый внимательный спросил о дизайне, ведь я его не скрывал и он стоит в подписи на моем почтовом ящике. ;-) Адрес вы увидите в конце данного поста, а сегодня мы поговорим о дизайне.

В ходе создания дизайна студии (в целом и любого сайта) я руководствовался основными моментами, которые на мой взгляд важны в каждом проекте, в который вы вкладываете душу.

1. Сочетание названия и дизайна.

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

Давайте вспомним все сайты, дизайн для которых продумывал я?! В большинстве этот момент первостепенен. Вот, к примеру, pickuprules.ru (изображение кликабельно):

Сайт pickuprules

Брутальный мужчина на капоте Ford Mustang, цветы, выпивка и конечно же девочки! ;-) Проект создавался для души, а значит он должен был как-то радовать меня как хозяина и напоминать меня.

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

Кстати, на авто мои настоящие государственные номера. ;-)

А вот и фото моей машины в оригинале:

Мое авто

Такой дизайн как отдушина...

Это не может не запомниться и пользователю.

В новом дизайне для студии я подумал о космической теме. Домен так и говорит - робот. Но вот какой робот? Он должен быть дружелюбным. В итоге было решено, что мы космические герои творящие естественно что-то космическое. ;-) На это и стали ориентироваться.

 

2. Наличие героев.

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

При этом основной герой - это самое дружелюбное, верное и исполнительное. Но что может быть дружелюбнее собаки? Тогда в нашем случае это кибер-пес! Но он не один, ведь мы команда!

Все эти размышления и привели вот к такому эскизу (изображение кликабельно):

Набросок webbo

Как вам?

 

3. Запоминающийся дизайн.

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

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

Шапка сайта Webbo

 

4. Минимализм.

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

Мне кажется, мы этого добились, давайте посмотрим на центр (изображение кликабельно):

Контентная часть Webbo

 

5. Важная для связи информация.

Эта часть должна быть на самых видных местах. Ее пользователь должен находить без труда. Контактную информацию мы разместили ее в шапке и подвале. Также будет создан отдельный раздел и форма заказа.

 

6. Логотип.

Логотипы это как лицо, их свойственно людям запоминать и с ними ассоциируют тот или иной проект. Так как у нас главный герой космо-пес, мы его и сделали главным действующим лицом.

Вот логотип:

Логотип Webbo

 

7. Раздаточный материал.

Раздаточный материал и визитки должны четко сочетаться с основной частью дизайна.

Вот такую мы сделали визитку:

Визитка Webbo

 

И вот такой буклет, под который пишется контент и все готово (все изображения кликабельны):

Буклет Webbo

 

 

Буклет Webbo

 

 

Буклет Webbo

 

Как видите, мы приложили все усилия чтобы проект был интересен. Если кто-то все же еще не обратил внимание на домен, то он webbo.ru.

Сайт пока находится в разработке, поэтому не обращайте внимание на пустые страницы, скоро они «обрастут мхом». ;-) Мы как хорошая студия заняты клиентами, а на себя не хватает времени! Также не стоит обращать внимание и на другого рода не доработки, я показываю лишь дизайн!

Надеюсь вам был интересен ход моих мыслей. По поводу дизайна было бы интересно узнать ваше мнение в комментариях и если будут, то и советы, я не против конструктивных правок.

Помните, что дизайн это только часть успеха. Встречают по одежке, а провожают по уму! Пока!

P.S. Благодарю всех, кто помогал мне в процессе создания студийного сайта.

— Папа, ты говоришь, семья – это маленькое государство. А кто ты?!
— Президент, конечно!
— А мама?!
— Власть.
— А бабушка?!
— ФСБ!
— А я кто же?
— А ты… Ты народ!
Через час Вовочка звонит отцу на работу: — Господин президент, к власти пришел другой президент, ФСБ спит, а народ волнуется!

Робот блога считает, что это может быть вам интересно:

Похожие записи в блоге:

   

Нравится как я пишу? Давайте вместе формировать интересные материалы на моем блоге. Вы можете сделать ретвит данной статьи или подписаться на мою ленту в системе микроблогов Твиттер.
Читайте меня в Твиттере и будьте в курсе последних моих действий.

Комментирование Facebook:


  • http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html NMitra

    http://vovka.su/wp-content/uploads/2013/11/buklet1.jpg

    я бы не стала дублировать "Мы уже создали более 200..." Складывается ощущение, что больше нечего написать

    интересно было бы посмотреть на мобильную версию

  • http://vovka.su Вовка

    Это просто набросок буклета, а не готовый материал. ;-)

    Цитирую себя же: "И вот такой буклет, под который пишется контент и все готово..."

    Другими словами это не конечная версия, разработка, т.е. промежуточный вариант. Текст просто так написан, чтобы было понятно как он выглядит. Тоже самое и на сайте.

  • WebNetc

    Вовка, дизайн ахуенен =)
    Я хочу его украсть (

  • http://vovka.su Вовка

    Попробовать то всегда можно, но этот диз оформлен и т.д.
    Увидимся в суде)))

  • doragon

    Сразу смутило: "создание сайтОВ, раскрутка сайтА и продвижение сайтОВ" — множественное число несогласованно.
    В верхнем меню область клика у каждого пункта меню - весь прямоугольник. Кроме логотипа - там только надпись. Это вызывает небольшой диссонанс.
    Вес страницы - 2,5 Мб - это ад конечно при условии, что большая часть - бесполезная графика.
    Контактные данные потерялись в облаке цветных пикселей.
    Тестовый текст в работах на главной - я бы рекомендовал брать тексты из Яндекс.Рефератов ибо там он более близок к реальному (по структуре) + обязательно ставить тексты разной длины (выявляются ошибки верстки, сразу).
    При клике на изображения работ на главной в всплывающем окне нужна подпись ибо можно листать влево/вправо, а что за работа - не ясно.
    Просмотр отдельной работы - зачем вам там комментарии? Или наивно полагаете, что будут писать "Вау, как круто!"? Лучше бы поставили форму быстрого заказа. Seriously! То же самое с соц.кнопками - вам лайки важны или заказы?
    Страница Услуги - набор ссылок. Вы реально хотите, чтобы пользователь кликнув на услуги, потом опять кликал, чтобы куда-то там попасть? Как минимум наивно.
    И т.п., и т.д.
    Сайт вызывает совсем легкий "вау эффект", но продавать будет плохо.
    После 5 мин изучения вспомнилось всем известное "Еще один блог на WordPress"

  • http://vovka.su Вовка

    Вы вероятно не все читаете. Я показал просто дизайн, настройкой и доработкой будет 5-й шаг, тогда будет ваш комментарий более "в тему".
    Уже прокомментировал по тексту вопросы и т.д.
    Спасибо все-равно, конечно... По поводу кнопок в соц сетях на работы - они всегда работали и будут работать, это даже не стоит обсуждать. Даже если за первый месяц их может быть не много, то за все существование проекта наберется достаточно, а это все же полезно.

  • WebNetc

    Да какой суд =)
    Ни одного ещё случая не знаю, чтобы с инета что-то дошло))) А вообще, я похвалил диз)

  • http://vovka.su Вовка

    Спасибо за похвалу.
    По поводу судов - да были и не один. Если не по дизу, то можно вспомнить и историю Бормалея.

  • doragon

    Я вам указал на те моменты, что есть уже сейчас. Чтобы вы заранее могли их продумать. Практика показывает, что чем раньше проблема будет выявлена, тем больше шансов, что ее пофиксят.
    Насчет соц.кнопок - просто посмотрите веб-студии из ТОП-100, особенно тщательно первую десятку. А потом последние 10-ть. Выводы напросятся сами.
    И еще один момент: 5 -го этапа быть не должно. Все эти вещи решаются на этапе проектирования. Все остальные возникшие спорные моменты - на этапе верстки.

  • http://vovka.su Вовка

    Обязательно все учтем, спасибо.
    По поводу ТОПа, тут, как мне кажется, больше играет роль не то на что мы с вами обратили внимание, а на раскрученность бренда... По результатам работы можно повести народ.

  • http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html NMitra

    Толково, можно в отдельную статью

    "При клике на изображения работ на главной в всплывающем окне нужна подпись" - я бы не делала всплывающее окно вовсе, а при клике переходила бы на страницу работы. Вообщем сделала бы как у Лебедева http://www.artlebedev.ru/

    С комментариями согласна
    С соц кнопками тоже скорее да: человек должен совершить только одно действие - позвонить или заказать. У того же Лебедева стоят, но там слишком крупная компания и на сайте у него лайкают скорее всего не обычные прохожие/заказчики, а такие же вебмастера и дизайнеры. Вовка, как много у вас будет такой аудитории?

  • http://vovka.su Вовка

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

  • doragon

    Бренд - это как зачетная книжка в университете: сначала ты на нее работаешь, потом она на тебя.
    Но для брендирования нужны деньги. Для денег нужны клиенты. А вот что встанет между клиентом и студией - уже вам решать :)

  • http://vovka.su Вовка

    А проблема денег, кстати, решаема с помощью вспомогательных моментов работы. Тот же самый блог и его упоминания внутри студии, или же поддержка другими проектами.

  • Виталий Владов

    Непонятно зачем в некоторых разделах появляется в адресе промежуточный уровень category/, а в некоторых нет.

    Ну и собственно страница http://webbo.ru/category не сверстана.

  • http://vovka.su Вовка

    Виталий, я показываю лишь ДИЗАЙН. Обо всех недоработках мне известно, некоторые уже обозначили другие читатели. Настройка сайта будет в другом посте на 5-м шаге. Обращайте, пожалуйста, внимание на мои комментарии.

  • http://vovka.su Вовка

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

  • http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html NMitra

    С боковушкой нужно работать, смотреть вебвизор

    Чаще всего она остаётся не у дел. Особенно когда является отдельным элементом как у вас. Причина этого проста: чаще всего именно в боковушках мелькает всякая реклама. Но больше всего тизеры. Вот зрение и не хочет их замечать, не важно есть там тизеры или нет

    Смотрите, http://ценагруза.рф/%D0%B2%D1%8B%D0%B2%D0%BE%D0%B7-%D0%BC%D1%83%D1%81%D0%BE%D1%80%D0%B0.html есть боковушка, но она как бы с основным содержанием

    Вот http://help.yandex.ru/webmaster/target-audience-in-shema-org.xml боковушка правильная, с левой стороны навигация

  • http://vovka.su Вовка

    Когда мы создавали http://liked.ru разместив ушко слева на техподдержку и форум эти кнопки стали одними из самых популярных по нажатию после Входа, создания и выполнения заданий для первого экрана точно!

  • doragon

    Совет один: тестируйте :)

  • http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html NMitra

    Так тут боковушки совсем нет - всё по центру ) И почему-то ни одна кнопка не работает "Лайкни","Отзывы","SEO", "Видео".

    Вот сравните

    http://www.vbank.ru/
    http://www.okna.ru/
    http://www.manaenkov.ru/
    http://www.rijeltor.ru/dom-rent.php

    Сразу видно, что это сайты компаний.

    А теперь так:

    http://webbo.ru/
    http://isif-life.ru/
    http://anokalintik.ru/
    http://bormaley.com/

    Не находите общие черты?

    Если вы ориентируетесь на предпринимателей, то и диз должен быть соответствующий, если на блоггеров или информационные ресурсы, то норм

  • http://vovka.su Вовка

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

  • http://shpargalkablog.ru/2010/09/optimizatsiya-blogger.html NMitra

    Да, рисуете вы здоровско, для ёлки и детишек правильное решение

    Это тоже красиво http://vovka.su/wp-content/uploads/2013/11/webbo.png

  • WebNetc

    Если честно, ситуацию с бормалеем считаю пиаром) хз, я чаще наблюдаю слова. На счет диза не волнуйся))

  • http://bohdanvorona.name/ CROWS

    логотип - фигня, вообще не соответствует направлению

    слоган - ужас... почему будущего, а не теперешнего? чем будущий сайт отличается от не будущего вы хоть понимание имеете?

    дизайн - оужас... вы - онлайн игра?

  • http://vovka.su Вовка

    Богдан, покажите мне из своих работ как правильно, мы постараемся исправиться.

  • http://bohdanvorona.name/ CROWS

    Это было просто мое мнение... Не всем же должно нравиться, верно?

  • http://vovka.su Вовка

    Когда конструктивно, тогда норма...

Я в Google Plus

Блоггеру

    • Gogettop - новая уникальная система продвижения естественными вечными ссылками в рассрочку! Теперь продвижение вечными ссылками становится доступнее. Эта система куда эффективнее, чем размещение временных арендованных ссылок. С помощью этой системы вы легко добьетесь кумулятивного эффекта в продвижении!
    • Miralinks - продвижение статьями становится все эффективнее и оправданнее. Данная система самая качественная и эффективная. Гарантия, страхование и многое другое.
    • GoGetLinks - самая эффективная, на мой взгляд, система размещения вечных ссылок. Имеются жесткий контроль и определенные гарантии вечности.
    • GetGoodLinks - лучшая система для получения ссылок с высоким Page Rank. Данная биржа - великолепный способ занять ТОП в Google.
    • I-Technologies - отличный сервис монетизации сайтов на продаже ссылок в Sape, при этом заработок выше, чем в самом Sape в 2-3 раза.
    • WebArtex - новый сервис статейного продвижения. Данный сервис позволяет сочетать вечные ссылки и временные в Seopult. Также есть масса и других преимуществ, стоит попробовать.
    • Rotapost - система постовых и других рекламных материалов. Проект вполне стал популярен и сейчас один из лучших инструментов продвижения вечными ссылками.

Рекомендую

Мануалы

Опрос

Есть ли у Вас привычки, уничтожающие вашу креативность и сдерживающие успех?

Просмотреть результаты

Loading ... Loading ...

Вовкин блог на Facebook

SEO Powered by Platinum SEO from Techblissonline