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

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


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




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




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





  Web дизайн. Философия web дизайна






 Макеты сайтов...  Баннеры...  Пиктограммы...  Иконки...  Кнопочки...  WWW  Оформление интерфейсов...

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


Чем больше мы хотим от сайта, тем больше хочет он от нас

WWW- World Wide Web (Интерактивная мультимедийная гипертекстовая среда, используюшая язык разметки и поддерживающая множество протоколов интернета). Всемирная паутина появилась на свет в 1992 году. Она была создана Тимом Бернерсом-Ли из Европейского центра ядерных исследований (CERN), расположенного в Женеве (Швейцария).

Сеть Internet является крупнейшей всемирной компьютерной сетью.

Internet выросла из сети ARPANET, созданной для обмена информацией между рядом исследовательских центров военной промышленности США и их коллег за рубежом.
К 1984 году в ARPANET входила 1000 компьютеров. Работая с этой сетью, ученые пришли к выводу, что такого рода сети являются необходимыи инструментом для научных исследований во всех областях деятельности.
В 1986 году Национальный фонд США в целях соединения в сеть большого числа научных учреждений и развития международной корпорации учредил проект NSFNET.
К 1987 г. Internet включала в себя более 10000 компьютеров.
К 1989 г. - 100000.
В 1990 году ARPANET прекратила свое существование, но Internet продолжала расти.
В 1995 году в ней уже насчитывалось 10 млн. компьютеров. К этому времени Internet распространилась и за пределы академического мира, стала важнейшим информационным источником, недорогим глобальным средством связи. Интернет выходит по незаменимости на один уровень с телефоном, телевизором и во многом даже превосходит их.

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

Что такое Web-дизайн

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

В чем заключается цель интерактивного Web-дизайна

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

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

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


Сайты в большинстве своем проектируются для посетителей и только для них (исключение составляют персональные проекты, которые оформляются только по своему вкусу).

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

Посещение сайта для пользователя должно быть подобно празднику!

Вот пример такого праздника - www.2advanced.com
И переживания, полученные от посещения сайта должны быть запоминающимися и поразительными. А в основе проекта удачного праздника лежат два правила. Никогда не увлекайтесь черезмерной продуманностью сценария, всегда должно остаться место для творчества самого пользователя. И, во вторых, полное отсутствие сценария - это тоже катастрофа. Идеальный сценарий web-проекта должен сочетать в себе "подготовку и спонтанность".
Как уже говорилось, стиль оформления проекта следует подбирать исходя из того, кто предположительно посетит проект.

... интернет будет таким, каким его сделает web-дизайнер.



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


Важные параметры оценки web проекта:
  1. Скорость загрузки
  2. Уровень дизайна
  3. Цельность стиля дизайна
  4. Эргономика
  5. Цитируемость
  6. Посещаемость
  7. Уровень контента
  8. Соответствие проекта поставленным целям
  9. Уровень применяемых технологий программирования
  10. Применеие новационных приемов дизайна и технологий программирования

Немного трепа по теме.

Web Designer (в большинстве случаев проектировщик сайтов, web-рекламы) Специалист-график, владеющий знаниями в области WWW и способный грамотно и с успехом их применить для достижения определенной цели :)

GUI Designer (GUI Designer - инженер-проектировщик пользовательского интерфейса) Это не "дизайнер" (художник-конструктор). GUI Designer (GUI - графический интерфейс пользователя) должен знать и уметь применять основные стандарты проектирования ПИ, владеть средствами быстрого прототипирования. В его обязанности входит: трансформация эргономических требований в проектные эргономические решения, разработка проектных спецификаций по GUI, прототипирование пользовательского интерфейса. Исходную информацию GUI Designer получает от Usability-инженера и/или инженерного психолога, разработанные спецификации и прототипы передаёт GUI-программисту.

ПИ (ПИ, User Interface, UI, интерфейс пользователя) Пользовательский интерфейс (ПИ, User Interface, UI, интерфейс пользователя) Объединяет в себе все элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с программным обеспечением.

К этим элементам относятся:
  1. средства отображения информации, отображаемая информация, форматы и коды
  2. командные режимы, язык пользователь-интерфейс
  3. устройства и технологии ввода данных
  4. диалоги, взаимодействие и транзакции между пользователем и компьютером
  5. обратная связь с пользователем; поддержка принятия решений в конкретной предметной области
  6. порядок использования программы и документация на нее

  Практический совет:
В процессе проектирования оригинал-макета Web-ресурса никуда не деться от резервирования места под предполагаемый текст, а так как содержание такового в большинстве случаев не известно и самим заказчикам :), то, как нельзя лучше для заполнения текстового пространства подойдет обыкновенная текстовая "рыба". Содержание классической текстовой "рыбы" представляет собой выдержки из трудов Цицерона.

Например:
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?

Или такой:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.


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

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

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

Не секрет, что для удачного позиционирования в сети 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, дизайн



P.s и еще немного ...
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 дизайн,графический дизайн,промышленный дизайн
Проект 'Дизайн - как стиль жизни'. Это ознакомительный экскурс в мир дизайна - мир точного проектирования, мир выдумки и фантазий. Это попытка показать насколько многогранна и необычна профессия дизайнера. Это общий обзор теории дизайна и всех ее составляющих. Это мои авторские проекты и работы в различных областях дизайна и статьи по искусству... Дизайн - история, теория, практика. Дизайн - авторские разработки. Промышленный дизайн - основы.


Клюев Михаил (статья написана в 2003 г., доработана и изменена в 2008 г.)




  Спецсимволы.
Полюбопытствовать

  Полезная программка:
Xenu (444Kb)- очень удобно индексирует проект на наличие битых ссылок


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







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



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


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


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