Web Дизайн. Уроки фотошопа, photoshop. Статьи о дизайне. Как создать сайт. Обучение дизайну. Фото. Гламурные галереи
Веб дизайн

Статьи о дизайне   Портфолио дизайнера
Дизайн Форум


Про дизайн и web дизайн




Главная     Форум     Галереи




  Статьи о дизайне





  Как создать web сайт





Первые шаги. Как создать сайт. Теория веб дизайна

Ушли в прошлое и забылись мифы, окутывающие понятие "интернет". Рассеялся ореол таинственности. И что мы видим. Точно - обычный способ доступа к информации нахаляву. Почему нахаляву? А потому, что вся та бесконечная и безграничная информация, что мы находим в интернет практически моментально не сопоставима по ценности с теми мизерными затратами на доступ к ней. Я имею в виду способ связи через модем. Этот способ связи еще очень распространен.

А еще интернет - это великолепный способ ХАЛЯВНОГО ОБЩЕНИЯ СО ВСЕМ МИРОМ и без серьезной цензуры и запретов, пока. Сейчас (начало 2005 года) в интернете возможно все. Бизнес, развлечения, знакомства, секс, поиск работы и главное - это способ для самовыражения. Понятно, что за интернетом будущее.

Так что же на счет общения со всем миром? Это просто. Можно пользоваться форумами и другими возможностями предложенными на чужих сайтах, а можно создать свой персональный сайт - это сейчас модно. И не только модно, но и полезно.

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

Уяснить для себя следующее.
  1. сайт нужно спроектировать

  2. потом разместить в сети интернет (поначалу можно на бесплатном хостинге типа narod.ru)

  3. и, что самое сложное, необходимо постоянно заниматься сайтом, в идеале - каждый день

1. Для создания сайта нужно:
  1. Компьютер

  2. Визуальный html-редактор (простые сайты пишутся на языке html - Hyper Text Markup Language)

  3. Гипертекстовые документы создаются на базе языка html. Этот язык весьма прост, управляющие коды его, которые, собственно, и компилируются обозревателем для отображения на экране, состоят из текста ASCII. Ссылки, списки, заголовки, картинки и формы называются элементами языка html. Под гипертекстовым документом понимают документ, содержащий так называемые ссылки на другой документ. Реализовано все это через протокол передачи гипертекста http (HyperText Transfer Protocol).
  4. Учебник по html для начинающих (подойдет "Создание web страниц" Энди Шафран, 2000)

  5. Желание потратить до 3 месяцев (если повезет) на обучение. Предупреждаю, подводных камней много. Но дело того стоит.

2. Для размещения сайта нужно:
  1. Бесплатный (или платный, если хотите) хостинг. Но при выборе платного хостинга лучше сразу покупать и доменное имя (Uniform Resource Locator или url) второго уровня типа rosdesign.com. Об этом я писал в других статьях.

  2. Доступ в интернет (телефонная линия и подключение к провайдеру)

  3. Программа c функцией ftp доступа к вашему сайту (например Windows Commander или Far)

  4. Компьютер

  5. Готовый сайт ... и не обязательно в этом порядке

3. Для поддержки сайта нужно:
  1. Тоже, что и для размещения + свободное время и интересная информация для наполнения. А то посетителям будет скучно у вас на сайте и они заходить к вам не будут. (Статистика посещаемости сайта считается специальными бесплатными счетчиками. Их тоже нужно будет вам установить на свой сайт)

  2. Реклама вашего сайта (баннеры, обмен ссылками, оставление координат на форумах и тд.) Найти сайт в сети интернет очень сложно и поначалу лучше немного порекламироваться
Для справки:
я никогда специально не рекламировал свой сайт. И через 2 года после его появления в интернет посещаемость примерно 200 человек в день, а индекст цитирования (количество ссылающихся сайтов) больше 70. Неплохо для домашней странички. Я к тому, что если у вас есть впереди 2 года на раскрутку - можно не рекламироваться.



Чемпионат мира по футболу 2018


И самое главное:

Для привлекательного, запоминающегося, удобного и неотразимого внешнего вида сайта нужен WEB ДИЗАЙН! Согласитесь, что встречают по одежке...

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

Что такое web дизайн?
Об этом я немного писал в статье "Философия web дизайна"

Как правильно спроектировать свой первый сайт?
В этом случае не нужно ломать голову над "Концепцией web проекта" Хотя, если есть желание ...
Уверен схема вашего первого любительского web проекта (Домашней странички) будет предельно проста. Это статичные html-странички примерно такого содержания:
1. главная страница (имиджевая - со ссылками на несколько внутренних):
2. внутренняя (информационная - о себе)
2. внутренняя (информационная - хобби)
2. внутренняя (информационная - фотогалерея)
2. внутренняя (информационная - контакты)
2. внутренняя (информационная - еще что-то)
Проект с вышеперечисленной структурой не требует от вас суперзнаний в области web проектирования и относительно быстро выполняется.

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

WEB дизайн для домашней странички

Если вы хотите сделать своему проекту хотябы нормальный дизайн. Вам придется выучится пользоваться графическим редактором (лучше всего подходит Photoshop CS) и немного узнать о форматах графических файлов для web.

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

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

На счет web-клипартов:
Никогда, НИКОГДА не пользуйтесь web-клипартами. Ничего хорошего там все равно нет (одна пошлятина), а дизайн сделанный с нуля (с помощью графического редактора, например Photoshop CS) всегда выгодно отличается от напичканного готовыми и неподходящими друг к другу web-элементами и по этому отвратительно уродливого клона.

На счет фоток и чужих фоток:
Использовать можно, от этого никуда не деться, но обязательно редактировать (в формат jpg, png или gif. Размер фотографий уменьшать как можно сильнее. Чем меньше весит страничка, тем быстрее она загрузится, тем больше шансов что ее загрузки дождутся) и адаптировать под свой дизайн. И естественно выбирать самый подходящий, сюжет :)

На счет анимации:
Анимация отвлекает, раздражает и к тому же много весит. Использовать очень осторожно, главное не перестараться.

На счет стильности:
Старайтесь выдерживать ВЕСЬ сайт в одном стилевом графическом решении. Т.е. не оформляйте каждую страничку по разному на 100%

На счет шрифта:
Если это заголовки - на ваше усмотрение, но не перестарайтесь :) Если это основной текст, то варианта только два: c засечками или без них (зависит от наличия используемого вами шрифта на компьютере пользователя. А подгружать задуманный вами и отсутствующий шриф никто не будет). Можно конечно попробовать сделать экзотический текст одной картинкой. В домашней страничке это не возбраняется, но оно вам надо ? :)

На счет экранного размера:
Смело делайте сайт жесткой верстки под 1024х768 (реальный размер вашей картинки для главной страницы будет по горизонтали точно 955, а по вертикали лучше не превышать 600 но это не критично, для внутренних страниц - по горизонтаоли 955, по вертикали сколько угодно) пикселей. Или, если хотите, резиновый 100% (на весь монитор независимо от его размера и разрешения) Но такая верстка не в пример сложнее будет.
Правда сейчас около 10% пользователей все еще пользуются разрешением 800x600 и устаревшими видеокарточками, а это не правильно. Потому, что интернет сделал шажок вперед, а они добровольно себя ограничили.

На счет копирайта:
Если решитесь подписаться под дизайноми и в подписи прописать ссылку на свою электронную почту - ПОМНИТЕ ПРО СПАМЕРОВ (которые собирают ваши адреса и потом вам гадят своим спамом) и не указывайте ваш истиный почтовый адрес, лучше зарегистрируйте и пропишите какой-нибудь работающий но неактуальный адрес типа 21арва@mail.ru и сделайте с него редирект (перенаправление) на ваш "истинный" почтовый ящик. Такой адрес-редирект не жалко засветить и при большом количестве приходящего спама легко выкинуть и завести новый.

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

1. Продумать панель кнопок навигации по сайту (т.е на главную, вернуться, наверх, контакты и тд.)
2. Продумать панель кнопок информационных разделов сайта (т.е. статьи, галереи, сервисы и т.д)
3. Уяснить для себя и дать понять посетителю, чем ваш сайт выгодно отличается от миллионов аналогов (отличительные особенности сайта - залог успеха)
4. Решить, что такого необычного и интересного, чего нет у других, предложит ваш сайт посетителю (функциональные возможности сайта - залог успеха)
5. Добавить на сайт интерактивные возможности (гостевая книга, форум, голосование и т.д)

А потом пойдет программирование и всякие заморочки типа: Как правильно прописать на страничке информацию для броузеров и поисковых систем.

Минипромоушн проекта

Как правильно прописать на страничке информацию для броузеров и поисковых систем.
Минипромоушн в поисковиках. Нам не все равно как выглядит информация о нашем ресурсе. Правда?

Не секрет, что для удачного позиционирования в сети WWW существуют некоторые правила подачи информации о проекте для индексации поисковыми системами и всевозможными каталогами ссылок. Это в некоторой степени тоже влияет на раскрутку проекта и, к тому же, не стоит вам ничего.

1. Прописываем title - название проекта (60-70 символов)
По идее, каждая страница должна иметь свой title, но это не обязательно.
Название должно в полной мере отражать содержание, если вы хотите, чтобы поисковики адекватно отнеслись к вашему проекту :)
Скажем в названии проекта о дизайне нелишним будет несколько раз повторить заветное слово. Это влияет на релевантность и поможет проекту подняться в поисковых системах выше конкурентных ресурсов иногда до первой страницы (!).

Например:
Дизайн как стиль жизни:Webдизайн,графический дизайн,промышленный дизайн.История,теория,практика дизайна
103 знака, а ключевое слово "дизайн" повторяется 4 раза. Прекрасно :)


Да, не забывайте о том, что контент тоже индексируется и сравнивается с заголовком.
Нужно также учитывать, что Internet Explorer отображает 95 знаков в заголовке страницы, а некоторые броузеры отображают только первые 60 знаков. А значит остальная инфа в заголовке окна броузера просто отрезается, что выглядит иногда не очень привлекательно, не говоря о том, что теряется смысл предложений...
А наиболее популярные поисковики рунета в которых есть смысл регистрироваться отображают соответственно:
Яндекс - в заголовке 79 , Рамблер - в заголовке 73 знака с пробелами.

2. Прописываем description - описание проекта (не меньше 200 символов)
Некоторве поисковые системы выводят в качестве описания первые 200 символов, поэтому текст следует подобрать тщательно. И, следовательно, по содержанию этого тега пользователь будет оценивать, а стоит ему к вам заходить или нет. Если тег description вами не используется, то в качестве описания поисковиком берется первая строка или отрывок из текста с найденным ключевым словом. Не рекомендуется копировать в description тег title. Желательно что бы тег description содержал несколько ключевых слов.

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


3. Прописываем keywords - ключевые слова (не больше 1000 символов)
При формировании списка ключевых слов, для тега keywords, надо использовать слова, содержащиеся в тексте страничек. Слова, которых нет в тексте, можно использовать, но немного и вставлять их лучше в конец списка. Ключевые слова не должны повторятся более двух раз. Роботы некоторых поисковых машин не переходят к новой строке при анализе тега keywords, поэтому не стоит разбивать тег на несколько строк. Есть смысл использовать также английские написания слов наряду с русскими.

Например:
design, дизайн



И еще

  1. Если прект постоянно обновляется, то обязателен тег <meta name="revisit-after" content="... days"> указывающий время через которое поисковый робот должен переиндексировать ресурс

  2. Также не лишними будут теги:
    <meta name="publisher_location" content="RU"> - языковая принадлежность ресурса
    <meta name="robots" content="all"> - разрешение на глобальную индексацию

  3. Также на релевантность влияют некоторые теги выделения: h, b, strong

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

  5. Желательно чтобы на страничке, ключевое слово пару раз встречалось в тексте ссылок

А так выглядит информация о проекте в каталогах ресурсов:

Дизайн как стиль жизни:Webдизайн,графический дизайн,промышленный дизайн.История ...
текст ссылок: http www rosdesign com...
www rosdesign com... http://www.rosdesign.com/ (15КБ) ≈ найден по ссылке


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



Успехов вам!
Клюев Михаил


 Смотри также:
Стандарты web дизайна
Web дизайн. Философия web дизайна
Как правильно составить ТЗ на Web дизайн
Компьютерная графика (теория)
Компьютерная графика (практика)
Поиск доменного имени
Продление домена
Web-дизайн - практические работы (проекты, ролики, баннеры, пиктограммы, кнопочки)
Безопасная палитра, системные цвета Windows и прочая фигня







Электронные книги о дизайнеЧМ 2018Гламурные картинкиГраффити галереяЯпония фотографииО путешествиях и странах, дешевые авиабилеты и отелиДизайн форум



    Rambler's Top100     Яндекс.Метрика  


Web дизайн и создание сайтов


Карта сайта       Наверх