Как научиться создавать привлекательные сайты? [закрыто]


32

Я умеренно способный веб-разработчик. Я могу поместить вещи туда, куда я хочу, и поместить туда некоторые JQuery, если мне это нужно. Однако, если я делаю свой собственный сайт (который я начинаю делать), я понятия не имею, как его создать. Если бы кто-то сидел рядом со мной, указал на экран и сказал: «Поместите эту картинку туда, напишите туда», я могу сделать это довольно легко. Но дизайн моего собственного сайта с моим выбором цветов и текста будет выглядеть так, как будто его изобрел малыш.

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


1
Посмотрите на код, созданный на сайтах с хорошим дизайном. Вы должны быть в состоянии увидеть их таблицы стилей и получить представление о том, как они были составлены из HTML.
ChrisF

1
Это кажется немного не по теме для меня. Возможно, больше подходит для веб-мастеров?
Фил Мандер

9
ChrisF, он спрашивает о дизайне, и вы предлагаете посмотреть на код? Дай угадаю, твой программист.
Крейг

1
@Phil - веб-мастера не занимаются дизайном сайтов. Определенно не подходит для этого сайта.
Чарльз Боюнг,

Ответы:


10

У вас есть несколько дел.

Подсказки:

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

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

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

Кроме того, как только вы начнете овладевать этим, практикуйтесь, практикуйтесь, практикуйтесь. Графика требует времени, чтобы развиться как навык, особенно от программиста, который должен учитывать кодирование. (Градиенты против "мозаичности")

Инструменты:

(Photoshop - личный фаворит. Paint.NET - хорошая альтернатива Windows, но не такая мощная.)

Система сетки 960 Натана Смита . Он имеет шаблоны для многих основных графических программ. Проверьте это.

Ссылки:

Посмотрите на некоторые из этих сайтов: (Я видел больше, я постараюсь добавить, как я сталкиваюсь с ними)


@Moshe - Поскольку вы просили комментировать на своем сайте - выглядит действительно здорово, единственная проблема, с которой я столкнулся, это красный цвет; это просто слишком неприятно для меня.
Эдан Маор

@ Эдан Маор - Спасибо, что посмотрели. Я слышу вашу долю о красном. Я сделал это настолько ярким, потому что он соответствует политической цветовой гамме красного, белого и синего. Если бы оно было темнее, оно бы скорее ложилось, как бордовое, чего там нет. Спасибо за вклад! Я признателен за это.
Моше

В качестве бесплатной альтернативы Photoshop вы можете попробовать GIMP, см. Учебные материалы по
kasterma

@Kasterma - Да, GIMP тоже работает, но Photoshop является отраслевым стандартом. GIMP слишком сложен. Я тоже это использовал.
Моше

960 решетчатых камней!
JP Alioto

10

Практическая сторона

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

   • Учебники по веб-дизайну: http://webdesign.tutsplus.com/

   • Учебные пособия по Photoshop: http://psd.tutsplus.com/

   • Тонны учебников: Линда

вдохновение

   • Веб-сайт: непревзойденный стиль

   • Веб-сайт: Abduzeedo

   • Книга: Руководство для успеха в Интернете

   • Веб-сайт: Smashing Magazine

Навыки дизайна

Генеральный Дизайн

   • Книга: Графический дизайн: новые основы

   • Книга: графический дизайн, ссылки

   • PDF: Большая четверка: контраст, повторение, выравнивание, близость

Типография

   • Книга: мышление с типом

   • Книга: элементы типографского стиля

   • Статья: http://en.wikipedia.org/wiki/Typography

   • Статья: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/

раскладка

   • Книга: макетная книга

цвет

   • Книга: цветная рабочая тетрадь

   • Книга: Цветовая Гармония Рабочая тетрадь

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

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

 

«Хороший дизайн делает пользователя счастливым, а производитель - черным, а эстет - без обид». -Реймонд Лоуи

 

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

«Хороший дизайн - это хороший бизнес». Томас Дж. Уотсон-младший

Больше цитат


сохранить этот комментарий
Lanaru

6

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


Отличный момент. UX очень важен.
Моше

7
DMMT, насколько я понимаю, скорее книга по удобству использования, чем книга по веб-дизайну.
Fishtoaster

3
@Fishtoaster да, но юзабилити и дизайн взаимосвязаны, так как в хорошем юзабилити определяет дизайн сайта.
Темная ночь

1

Огилви о рекламе: эта книга охватывает некоторые основы графического дизайна, а также много здравого смысла при создании любых листовок, рекламных объявлений и т. Д., Даже если они были написаны задолго до эры www.

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


1

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

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


Эта книга была ключевым материалом для чтения в моем курсе «Человек-компьютер» в Uni.
Ричард

1

Одним из инструментов, который я считаю бесценным в дизайне, является Color Scheme Designer . Обычно я выбираю цвет, который хотел бы использовать для дизайна, а затем использую схему «Аналог», чтобы получить хороший набор подходящих цветов. На мой взгляд, правильная цветопередача - это худшая часть, так что после этого остальное просто получает приятный макет и применяет ограниченную палитру цветов.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.