Как красивый сайт сделать: 16 лучших примеров дизайна главной страницы сайта – Создать красивый сайт бесплатно

Как сделать красивый сайт — правила

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

По поводу цветового решения. Если строго следовать рекомендациям для веб-дизайнеров, то для цветового решения нужно использовать так называемую таблицу безопасных цветов (всего 216 цветов), или безопасную палитру. Почему она безопасная? Потому, что такая палитра обеспечивает точное соответствие отображения цветов на различных мониторах. Правило простое. Как известно, цвет задается шестнадцатеричным значением от 000000 (черный цвет) до FFFFFF(белый цвет). Так вот, безопасный цвет может содержать только следующие значения: 00, 33, 66, 99, CC, FF. Например: 003300, 6699СС, FF0099.

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

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

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

Правила, которые необходимо соблюдать, чтоб сделать красивый сайт:1. Рассматривайте каждую страницу сайта как цветовые пятна (текст тоже считается цветным объектом)

2. избегайте часто мигающих объектов, которые превращают Вашу страницу в новогоднюю елку.

3. Цветовых пятен не должно быть много, чтоб глаза знали, где остановится, и за что зацепится.

4. Комбинируйте цветовые объекты в группы, которые концентрируют внимание в определенных местах

5. Расставляй

Как сделать красивый сайт? | BreakingCode.ru

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

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

Шрифты в дизайне сайта

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

На Font Squirrel так же есть куча шрифтов с открытой лицензией, но с интеграцией не все так просто. Чтобы использовать шрифт на сайте — нужно скачать его себе, поскольку «белка» не предоставляет CDN как Google.

 

Иконки помогут сделать красивый сайт?

Наверное, вы замечали, что использование сайта, на котором большинство текста дополнено иконками, доставляет эстетическое удовольствие.
Используйте их у себя! Это совсем не сложно, ведь есть Font Awesome. Сложно описать замечательность этого пакета — ведь там есть иконки для всего. Нет, правда. Бумажные самолетики, видеокамеры, ракеты, иконки брендов. А еще постоянно добавляются новые.

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

 

Цвета для сайта

Цвета, цветовая палитра, гамма, сочетание. Это сложно. Действительно сложно. Ведь мало кто учился в художественной школе, лишь немногие имеют врожденный талант «видеть» хорошие сочетания.
Вероятно, вы сталкивались с проблемой, когда нужно было найти цвет, подходящий с другому, сочетающийся с общей гаммой сайта. Порой приходилось пересматривать всю палитру.

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

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

 

Шаблоны для сайта

Конечно, это тоже чит, и вы наверняка о нем знаете. Тем не менее, используйте его. Это удобно — ведь за вас поработала команда специалистов, которые разбираются в своей области. Честно говоря, сейчас сложно сделать красивый сайт без использования шаблонов — на это просто уйдет слишком много времени.
Без сомнения, идеально подходящий вам шаблон вы не найдете, так что обратите внимание на относительно несложные шаблоны, построенные на Bootstrap, чтобы затем переработать их под свой проект.

 

Creative Commons Pictures

Когда вы делаете сайт — чаще всего нужны изображения. Ведь куча кнопок и полей для ввода выглядят скучно и однообразно, их нужно чем-то разбавлять. Как найти бесплатные фотографии, которые можно использовать у себя на сайте? Конечно же с помощью лицензии Creative Commons!
Множество людей рады поделиться своими снимками с общественностью и не возражают, чтобы их использовали другие сайты. У Creatibe Commons есть много вариантов лицензии, и чтобы не заморачиваться — просто используйте вариант «Attribution License» (сейчас по ней доступно более 65 миллионов фотографий).

Чтобы найти требуемые картинки — лучше всего подойдет Flikr Search. Вообще, есть ее CCSearch, но на мой взгляд он не слишком удобный.

Надеюсь, вы открыли для себя что-то новое, и теперь вам не составит труда сделать красивый сайт.
Спасибо Sam Atkinson.

Как сделать очень красивый сайт?

 

Очень красивый сайт – мечта любого владельца собственного ресурса. Конечно, ведь привлекательная страница – ваш выигрышный билет в мир прибылей, признания и успеха. Вы прикладываете массу усилий, не спите ночами, продумывая все до мельчайших подробностей, покупаете учебник с громким названием «Html для чайников», делаете собственный шаблон и гордо демонстрируете готовый сайт друзьям. Но их реакция вас отчего-то удивляет: вместо восторженных возгласов лишь опущенные вниз глаза и тишина. Ваш сайт им не понравился. Равно как и не понравится он и многомиллионной толпе пользователей интернет.

Как сделать красивый сайт так, чтобы он нравился всем? Секрет прост. Рассмотрим такой пример: у вас наверняка есть или была знакомая девушка, которая покорила вас с первого взгляда, а все друзья смеялись над этим увлечением и рассказывали вам обо всех ее недостатках, на которые вы даже и внимания не подумали обратить. То есть ее красота не безоговорочная, кому-то она нравится, а кому-то — нет. Но ведь были, да и сейчас есть на этой земле девушки, которые сумели стать настоящими символами эпохи, чья красота сражала миллионы поклонников. Даже примеры здесь не нужны – каждый из вас знает эти имена. Получается, что идеальная, кристально чистая и неоспоримая красота все же существует? Конечно, да.

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

Правила создания очень красивого сайта

Хотите узнать о том,

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

Итак, вот правила, которые помогают специалистам сделать очень красивый сайт:

• Каждую страницу нужно рассматривать как отдельные цветовые пятна. При этом и текст также будет выглядеть как пятно. Художник должен представлять перед собой мольберт, отходить от него и смотреть издали на сочетание цветов.
• Основным правилом создания очень красивого сайта является правило золотого сечения — все объекты должны располагаться на странице гармонично, именно в том месте, где посетитель хочет их видеть.
• Цветовых пятен на странице не должно быть слишком мало, но и перегружать ее не стоит. Человек должен найти, за что зацепиться взглядом и на чем сфокусировать внимание.
• Важно уметь комбинировать все объекты по группам в зависимости от цвета, стиля, вида наполнения. Текст вперемешку с иллюстрациями, графикой, интерактивными элементами и т.д. напоминает некий пестрый винегрет и кажется совершенно непривлекательным.
• На каждой странице есть важные для вас объекты или элементы – выделяйте их цветом, формой или размером. Пусть человек в первую очередь видит их, а потом уже окружающую канву.
• Создавая красивый сайт, очень важно помнить, что это веб-ресурс, ориентированный на людей. Не стоит превращать его в новогоднюю елку или пестрого попугая. Падающие снежинки, искры, мыльные пузыри с натяжкой подойдут для главной страницы средненького детского интернет-магазина. А вот элегантность, изящество и утонченность всегда были в моде и по сей день является признаком отменного вкуса.

Хотите похвастаться самым красивым сайтом? Не жалейте времени, сил и денег – доверяйте профессионалам, которые знают, как должен выглядеть действительно идеальный ресурс, и мастерски работают над его созданием. Такой сайт будет говорить о статусе, вкусе и респектабельности вашего бизнеса. Только тогда посетители превратятся в потенциальных клиентов и постоянных покупателей ваших товаров или услуг.

 

Автор: Илья Михалёв

Как сделать красивый сайт на Вордпрессе

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

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

• най­ти в мага­зине тем,
• ска­чать само­му и уста­но­вить через тот же мага­зин,
• ска­чать и уста­но­вить само­сто­я­тель­но.

Установка темы из магазина

Это самый про­стой спо­соб уста­нов­ки новой темы. Захо­дим в кон­соль адми­ни­стра­то­ра по адре­су www.адрес-блога.ru/wp-admin/ и выби­ра­ем в левом меню пункт «Внеш­ний вид» → «Темы».

Перед нами появят­ся темы, кото­рые уже уста­нов­ле­ны в бло­ге. По умол­ча­нию Ворд­пресс ста­вит три темы, внешне похо­жие меж­ду собой. Мы можем уста­но­вить допол­ни­тель­но сколь­ко угод­но тем, но актив­ной может быть все­гда толь­ко одна. Если мы ста­вим новую тему и дела­ем её актив­ной, ста­рая отклю­ча­ет­ся, но не исче­за­ет. Она оста­ёт­ся в спис­ке уста­нов­лен­ных тем и ждёт, пока мы к ней не вер­нём­ся.

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

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

После уста­нов­ки она пре­вра­тит­ся в кноп­ку «Акти­ви­ро­вать», её тоже нуж­но нажать, что­бы блог выгля­дел по-новому. После это­го новая тема появ­ля­ет­ся в спис­ке уста­нов­лен­ных, ста­рая отклю­ча­ет­ся, а блог полу­ча­ет новый дизайн. Каж­дую тему мож­но настро­ить — поме­нять стан­дарт­ные кар­тин­ки, над­пи­си, цве­та и кноп­ки. Если есть навы­ки про­грам­ми­ро­ва­ния в PHP и HTML, то с темой мож­но сде­лать вооб­ще что угод­но.

Для настрой­ки и уста­нов­ки тем захо­дим в нуж­ный раз­дел.
Мага­зин тем в Ворд­прес­се пока­жет, какие темы у нас уже уста­нов­ле­ны и какие мож­но полу­чить. Есть филь­тры и сор­ти­ров­ка по попу­ляр­но­сти.
Пред­про­смотр темы «Highlight». Она нам понра­ви­лась, поэто­му нажи­ма­ем «Уста­но­вить», а затем — «Акти­ви­ро­вать».
Наш блог с новой темой. Сра­зу выгля­дит по-дизайнерски.
Новая тема — в спис­ке уста­нов­лен­ных. Мож­но вер­нуть­ся к ста­рой в любой момент.

Установка скачанной темы через магазин

Есть мно­го тем, кото­рые не попа­да­ют в офи­ци­аль­ный мага­зин Ворд­прес­са, но при этом такие же класс­ные, а то и луч­ше. Их мож­но ска­чать бес­плат­но на фору­мах или тема­ти­че­ских сай­тах — templatemonster.com или wp-templates.ru, themeforest.net. Если этих сай­тов вам мало или не нашли что нуж­но — поищи­те в Яндек­се «Темы для Ворд­прес­са», там будут сот­ни ссы­лок, по кото­рым мож­но най­ти всё что угод­но.

Чаще все­го на круп­ных ресур­сах с Вордпресс-темами есть такой же пред­про­смотр, как в офи­ци­аль­ном мага­зине. Как толь­ко нашли нуж­ный дизайн — ска­чи­вай­те.

Чаще все­го шаб­ло­ны ска­чи­ва­ют­ся в виде zip-архивов, что­бы один шаб­лон зани­мал ров­но один файл. Теперь нам нуж­но отпра­вить его в админ­ку. Для это­го захо­дим сно­ва в «Внеш­ний вид» → «Темы» и выби­ра­ем «Загру­зить тему».

После уста­нов­ки тема появит­ся в спис­ке наших тем, и мы можем там её акти­ви­ро­вать. Дело сде­ла­но.

Wp-templates.ru — шаб­ло­ны с руси­фи­ци­ро­ван­ны­ми настрой­ка­ми.
Если шаб­лон понра­вил­ся — ска­чи­ва­ем. Ско­рее все­го, там будет демо­вер­сия, а за все воз­мож­но­сти надо будет допла­тить, но нас это пока устра­и­ва­ет.
Сохра­ня­ем нуж­ный шаб­лон на диск.
В админ­ке нажи­ма­ем «Загру­зить тему» и выби­ра­ем ска­чан­ный файл.
После загруз­ки нажи­ма­ем «Уста­но­вить», а в появив­шем­ся окне — «Акти­ви­ро­вать».

Установка темы через панель хостинга

Если вы не люби­те все эти визу­аль­ные кон­со­ли и всё при­вык­ли делать через панель управ­ле­ния хостин­гом — это вари­ант для вас.

Для уста­нов­ки ска­чи­ва­ем файл с темой и рас­па­ко­вы­ва­ем по пути www.путь-к-блогу.ru/wp-content/themes/. Если фай­лы в архи­ве были в пап­ке — рас­па­ко­вы­ва­ем её туда цели­ком. А если в архи­ве лежат про­сто фай­лы без общей пап­ки, то по это­му адре­су созда­ём пап­ку с назва­ни­ем темы и рас­па­ко­вы­ва­ем всё туда.

Когда всё сде­ла­но пра­виль­но, то после рас­па­ков­ки вы смо­же­те уви­деть свою тему в спис­ке уста­нов­лен­ных в админ­ке Ворд­прес­са. Если вы не зна­е­те, что такое панель управ­ле­ния хостин­гом и как в ней рабо­тать — для вас есть отдель­ная ста­тья.

На что смотреть при выборе темы

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

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

Поэто­му, выби­рая тему, смот­ри­те в первую оче­редь на кон­струк­цию, раз­ме­ры бло­ков, типо­гра­фи­ку, отсту­пы, тени и вся­кие эффек­ты, а не на кра­си­вые фото.

Оце­ни­вай­те сце­на­рии ваше­го сай­та. Как часто у вас будут выхо­дить новые ста­тьи? Чита­те­ли долж­ны нахо­дить нуж­ную ста­тью с глав­ной стра­ни­цы? Вам нужен блок «недав­ние ново­сти» или выде­ле­ние глав­ной ста­тьи? А сами ста­тьи — они боль­ше про текст или про кар­тин­ки? Если про текст, то дол­жен ли он быть чита­е­мым и круп­ным? А нуж­но ли вам как-то груп­пи­ро­вать ста­тьи? А будут ли у вас ста­тич­ные стра­ни­цы? А как вы их буде­те соби­рать?

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

Мно­го эффек­тов — пло­хо. Дизай­не­ры тем любят пона­во­ра­чи­вать ани­ма­ций, эффек­тов, пере­хо­дов, теней, про­зрач­но­стей и про­че­го кол­хо­за. Это занят­но выгля­дит на рыб­ном тек­сте, но на вашем реаль­ном сай­те вы, ско­рее все­го, это всё выклю­чи­те.

Есть ли ком­по­нов­щик стра­ниц? Мно­гие темы Ворд­прес­са исполь­зу­ют пла­гин — ком­по­нов­щик стра­ниц (layout editor). Эта мини­про­грам­ма поз­во­ля­ет делать мно­го­ко­ло­ноч­ную вёрст­ку, встав­лять в стра­ни­цы гото­вые фор­мы обрат­ной свя­зи, кар­ты, интер­ак­тив­ные ком­по­нен­ты и всё подоб­ное. Тема с ком­по­нов­щи­ком удоб­нее, чем без.

Что за шриф­ты? Печаль­ная прав­да в том, что 90% кра­си­вых шриф­тов в замор­ских темах не име­ют рус­ской вер­сии, поэто­му все пре­крас­ные заго­лов­ки и рос­кош­ные кал­ли­гра­фи­че­ские над­пи­си у вас будут рабо­тать толь­ко на англий­ском. Шриф­ты, конеч­но, до какой-то сте­пе­ни мож­но заме­нить, но кирил­ли­че­ских (то есть рус­ских) по-прежнему мало­ва­то.