Новым историческим этапом в развитии Интернет стал выход первой версии графического браузера Mosaic в 1993 году, разработанного в 1992 Марком Андресеном (Marc Andreessen), студентом, стажировавшимся в Национальном центре суперкомпьютерных приложений (National Center for Supercomputing Applications, NCSA), США.

Залогом успеха браузера стали интуитивно понятный интерфейс, стабильность работы, простота установки и кроссплатформенность (Mosaic стал первым браузером, доступным одновременно для всех действующих на тот момент операционных систем, включая Windows, Macintosh и Unix). Вслед за этим появились браузеры Netscape Navigator и Microsoft Internet Explorer.

Именно с этих событий берет начало взрывообразное распространение популярности WWW, и как следствие Интернета, среди широкой публики сначала в США, а затем и по всему миру.

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

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

1996 год — нужно запомнить, но никогда не повторять

1996 был годом, который определил начало новой эры, и для многих дизайнеров позорным периодом. Активно начали появляться сайты с красным, розовым или желтым фоном, слишком долгий просмотр которых был практически невозможным. Этот этап также стал периодом оскорбительного использования анимированных GIF-файлов, с помощью которых, сайт, по идеи, должен быть веселым и интересным. Люди не были полностью осведомлены, как работает сайт, поэтому и не знали, как правильно его проектировать.

Это был первый сайт McDonalds в 1996 году. Дизайнерам сказали, что их зарплата будет увеличена в зависимости от количества красного и желтого, которые они будут использовать. Это, конечно, основные цвета торговой марки, но их нужно разбавить другими цветами, например белым. Ну что же — пришло время анализировать и учиться!

Этот сайт 1996-го года дизайнера Betsey Johnsonа. Цвет фона больше, чем просто яркий. Хотя в наше время мы также можем найти подобные страницы.

Индийский сайт музыки с анимированным флагом вверху демонстрирует достаточно интересный выбор градиента — белый/зеленый/оранжевый/белый. Такое дизайнерское решение визуально разрезает страницу сайта пополам.

1996 год — первый дизайн веб-сайта от Altavista. Просто и полезно. Логотип был использован в качестве заголовка. Учитывая, что это была первая попытка Altavista, нужно отметить, что их сайт на то время был одним из самых лучших.

Yahoo — в свое время царь Интернета. Его оригинальный сайт отличается от предыдущего использованием более сложных конструкций и элементов интерфейса. Они по-прежнему использовали растровые не прозрачные изображения, но уже просматриваются попытки работы над визуальной частью, а не только над удобством в использовании. Такой дизайн делает его достаточно полезным и визуально привлекательным.

Даже у истоков веб-дизайна, можно увидеть, что данный сайт является полностью функциональным. Здесь просматриваются основные 3 цвета: черный, синий и красный — достаточно популярны для того периода. Название сделано красным, основная информация черным, и ссылки — синего цвета.

Вот сайт компании Lego. Его попытались сделать достаточно интерактивным (без использования flash/jquery). Поскольку продукция использовалась для детей, на сайте были размещены анимационные картинки с ссылками возле них.

Цвет фона, иконки, шрифты

15 лет назад, люди привыкли думать, что блестящая цветовая палитра действительно характеризует качественный дизайн. Использование ярких цветов сделало невозможным длительный просмотр сайта (более 5 минут). К сожалению, яркие цвета стали обычным выбором, ведь для оригинального веб-дизанера быть замеченным стало более важным, чем учитывать, как долго люди будут оставаться на страницах сайта.

Наверное, любимыми гарнитурами десять лет назад были системные шрифты и шрифты по умолчанию. Они использовались везде: сайты компаний, визитки, свадебные приглашения. Никаких специальных эффектов, теней, прозрачности. Черный текст, красные заголовки и синие подчеркнутые ссылки. Единственное различие между текстами — полужирный шрифт или курсив. Типографика не рассматривалась как важная часть дизайна, как это делается сейчас.

1996 год, веб-сайт типографии

Кнопки! Что бы мы делали сейчас без них. Но в 1996 году это были только серые варианты для создания интерактивности.

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

Пример раннего сайта Angelfire. Вы можете обратить внимание на эксперименты с размерами, цветом окон, а также использование кнопок и белого шрифта на синем фоне.

BBC пытались перенести информацию из телевидения в Интернет. Просматривается меню со списком ссылок, а также некоторые приложения, например, прогноз погоды.

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

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

Всплеск интернета пришелся на 2000 год. Дизайнеры научились постоянно развивающейся технологии CSS. CMS начинают набирать популярность среди веб-дизайнеров. Глянцевые кнопки, блестящие цвета, градиенты отражают эпоху Web 2.0. Закругленные углы и блестящие градиенты распространяться почти со скоростью света. Веб-сайты получают более функциональный и необходимый пользовательский интерфейс.

Яркие и красочные кнопки над серым фоном с легкой текстурой. Внимание привлекает белый текст на ярких цветах.

2008 год характерен тенденциями мобильных веб-приложений. В 2007 году, iPhone определенно послужил сильным толчком для развития мобильного веб-дизайна. Профильные компании стали создавать мобильные веб-сайты и разрабатывать приложения. Большие социальные сети, устанавливают виджеты для перехода на блоги, веб-сайты — виджеты для перехода на социальные сети. Также 2008 год — год стиля ретро в дизайне. Цветовая гамма стала более стильной, дизайн сайтов — лучше и контрастнее.

2011 год. Веб-дизайн становится лучше и лучше.

Дизайн Neve на главной странице показывает суть магазина детской одежды. Они используют мягкие цвета, которые создают спокойную и элегантную атмосферу.

Ресторан морепродуктов дает ощущение здоровой, свежей и почти небесной пищи. А что может быть важнее для сайта ресторана?

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

Прочитав статью, мы увидели в веб-дизайне эволюцию цветовых гамм, кнопок, иконок, шрифтов.Что же ждет нас в будущем? Минималистичный дизайн, яркие цвета, изыскано выбранная цветовая палитра? Или что-то совершенно новое? Ну, что же, будем ждать!

История создания веб-сайтов: с чего все начиналось

Прежде, чем появилась возможность создавать веб-сайты, возник Интернет. Произошло это по-настоящему историческое событие в 1990-м году. Интернет-сеть без информации представляла собой совершенно бесполезное изобретение, его необходимо было наполнять. Решением этого вопроса решил заняться женевский ученый из Тимоти Бернерс-Ли из Европейской лаборатории элементарных частиц. Перед тем, как создать первый в мире веб-сайт, он успел подготовить целый ряд других, не менее важных инструментов, лежащих в основе самых популярных на сегодняшний день программ. Именно Бернерса-Ли следует благодарить за создание всемирной сети Интернет, разработку URL, HTTP и изобретение языка программирования, известного нам как HTML.

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

Первый веб-сайт – каким он был?

Проект изначально задумывался как некая «папка» для хранения основных сетевых документов, объединенным личным доменным именем, оригинальным и единственным в своем роде. Именно таковыми и являются современные сайты – как старые, так и новые веб-проекты хранят в себе «сгусток» информации, различных документов и страниц, принадлежащих, по сути, одному юридическому лицу, но, находящихся, при этом, в свободном доступе для массы пользователей, а отыскать их можно под определенным доменным именем.

Внешне первый сайт, созданный ученым, был совсем невзрачным, что совершенно неудивительно. Он представлял собой сплошную стартовую страницу белого цвета, на которой была размещена информация о самой инновационной технологии того времени «World Wide Web». Кроме того, здесь же Бернерс-Ли разместил подробные инструкции по установке браузеров и серверов на персональный компьютер, что позволяет назвать технологию «WWW» началом современного интернет-пространства во всех его проявлениях.

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

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

Все хотят бизнес, где меньше инвестиций, но больше возможностей. А какая сфера сейчас самая прибыльная? Правильно, digital.

Рынок постоянно развивается, есть много направлений, куда себя применить. Можно, например, создавать сайты на заказ. А что делать, если нет технических навыков? Нужно научиться проектировать, верстать и писать код или найти людей, которые это умеют, собрать команду и открыть веб-студию.

Веб-студия: что это?

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

Состав студии зависит от ее целей. Если цель ― создавать сайты, то нужны программисты, дизайнеры, менеджеры по продажам и работе с клиентами, project-менеджер.

Когда речь не только про создание, но и продвижение, нужны интернет-маркетологи.

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

Сколько зарабатывает веб-студия

Заработок зависит от стоимости проектов. Начинающие студии (обычно те, что внизу рейтингов) зарабатывают примерно60 тысяч рублей за проект. Потом заказов становится больше, цены повышаются и доход растет. Опытная веб-студия с именем может делать проекты по 600–900 тысяч рублей и больше.

Стоимость создания сайта

Как открыть веб-студию

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

Итак, на что придется потратиться в самом начале.

Регистрация фирмы (госпошлина)

ИП ―800 рублей.

ООО ―4 000 рублей.

Личный сайт

Создание сайта ― бесплатно силами команды.

Домен, хостинг ― от100 рублей в месяц.

Аренда офиса

Помещение на 5–10 человек около30 000 рублей в Москве, в регионах можно найти дешевле.

Покупка мебели

Стол, кресло ― от3 000 рублей за штуку, умножаем на количество сотрудников в офисе.

Покупка техники

Ноутбук ― от20 000 рублей.

МФУ ― от5 000 рублей.

Налоги (в зависимости от выбранной системы налогообложения)

Подоходный налог ― 13%.

Налог на прибыль ― 20% для ООО.

Зарплата сотрудникам

Frontend-разработчик ―60 000 рублей.

Программист/backend-разработчик ―80 000 рублей.

UI/UX-дизайнер ―50 000 рублей.

На чем сэкономить

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

Если решите арендовать офис, для начала подойдет небольшой. Главное, чтобы там поместилась основная команда. Остальные сотрудники могут работать дистанционно.

Кого взять в команду

Подумайте, на каких услугах хотите сделать акцент, от этого будет зависеть, кого нанимать в штат, а кого ― на аутсорс.

Допустим, ваша студия будет заниматься только разработкой и дизайном сайтов. В идеале вам нужны: программист, frontend-разработчик, UI и UX-дизайнеры, менеджеры по продажам, project-менеджер, аналитик, бухгалтер, копирайтер. А еще HR-менеджер, который соберет и будет развивать всю эту команду.

Для начала можно нанять только программиста, верстальщика, проектировщика и project-менеджера. Функции дизайнера - отдать на аутсорс. И совсем обойтись без менеджера по продажам. Тогда продажами на первом этапе придется заняться руководителю.

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

Вашей команде нужно лицо, а веб-студия без сайта или с дизайном образца2007 года ― это сразу провал. Сайт ― портфолио, а его задача ― привлекать клиентов. Поэтому нужно продумать не только дизайн, но и содержание сайта.

Покажите кейсы

Расскажите, как вы работаете

И какие технологии используете

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

Самый простой способ ― использовать сарафанное радио. Скорее всего, вы знаете людей, которым нужен сайт или которые могут порекомендовать вашу студию своим знакомым. Так можно получить первые заказы, а значит, и первые рекомендации.

Расскажите о себе в интернете на разных площадках. Используйте такие сервисы, как, например, Upwork , Toptal , Freelancer . Там можно представить свои услуги, найти заказы или сотрудников в команду.

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

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

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

Андрей Батурин

В сфере web-дизайна тенденция следовать трендам заметна как нигде больше. Год от года появляются новые решения и трудновыговариваемые термины: один “скевоморфизм” чего только стоит. Но знаете ли Вы, через какие метаморфозы пришлось пройти этой индустрии, чтобы достичь нынешних результатов?

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

1991-1993

Самый первый сайт увидел свет 6 августа 1991 года. Для нашего избалованного глаза он выглядит совсем сухо. Но всё, что могли содержать первые в мире страницы - ссылки и текст.

О красоте сайтов не говорили вплоть до 22 апреля 1993 года, когда выпустили первый графический браузер Mosaic, поддерживающий просмотр изображений. Так однообразный текст стали разбавлять яркими картинками. Разработчики сайтов этому очень обрадовались и решили впредь использовать все нововведения по максимуму. Иначе, зачем они вообще нужны?

1994-1996

В этот период сайты начинают пестреть, как бразильский карнавал. Спасибо появлению цветных фонов. Такая новинка вызвала бурный восторг и не менее бурное использование ярких, кричащих цветов. Ходит легенда, что если посмотреть на некоторые из таких сайтов сейчас, можно ослепнуть. В эти годы, в добавок ко всему, появляется возможность добавления на сайт разных шрифтов, в частности Times New Roman и Courier New. Прогресс дошел и до размещения на страницах популярных сейчас GIF-изображений.

1997-1998

Облик сайта начинает чуть более походить на привычный нам: сайты теперь строят на основе табличных макетов, добавляют эффекты и навигацию с иконками. Также активно развивается FLASH-технология, вследствие чего появляется возможность добавлять “мигающие” заставки. И с ними, как и с фонами ранее, порой начинается серьезный перебор. Помимо всего прочего, период характеризуется активной интеграцией маркетинга в дизайн. Чуть ли не на каждом сайте можно было увидеть кричащие рекламные баннеры с громкими лозунгами.

1999-2003

В начале XXI века в web-дизайне в моду входят скругленные углы, блестящие кнопки и градиенты. Фонами наигрались, и теперь они становятся однотонными. Можно сказать, они начинают выполнять свое прямое предназначение и перестают перетягивать на себя много внимания. Веб-сайты становятся намного функциональнее и обзаводятся более удобным пользовательским интерфейсом.

2004-2006

Да начнётся великая эпоха Web 2.0! В web-дизайне с приходом Web 2.0 стали отдавать предпочтение тени, глянцевости иконок и кнопок и мягким цветам интерфейсов. Также в тренде - упор на читаемый и функциональный контент и интеграция в ресурсы анимационного контента.

2007-2010

С этого периода начинается активное развитие мобильных веб-приложений и вместе с этим, появляются мобильные веб-сайты. Отсюда прослеживается тенденция развития такого явления, как “адаптивность”. Разрабатываются первые социальные сети и, как следствие, получает распространение размещение их иконок на сайтах. Активно внедряются длинные макеты сайтов. Широкое распространение получают стоковые фотографии и такое явление, как скевоморфизм.

2011-2014

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

2015-2016

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

Что ждет нас в дальнейшем?

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

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