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

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

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

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

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

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

Это самый про­стой спо­соб уста­нов­ки новой темы. Захо­дим в кон­соль адми­ни­стра­то­ра по адре­су 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% кра­си­вых шриф­тов в замор­ских темах не име­ют рус­ской вер­сии, поэто­му все пре­крас­ные заго­лов­ки и рос­кош­ные кал­ли­гра­фи­че­ские над­пи­си у вас будут рабо­тать толь­ко на англий­ском. Шриф­ты, конеч­но, до какой-то сте­пе­ни мож­но заме­нить, но кирил­ли­че­ских (то есть рус­ских) по-прежнему мало­ва­то.

thecode.media

12 простых дизайн-инструментов, с которыми справится каждый

Ребята, мы вкладываем душу в AdMe.ru. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

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

AdMe.ru публикует для вас подборку 12 сервисов, которые можно использовать для работы или творчества. Они еще и бесплатные, как мы любим.

Создать красивый онлайн-журнал

Найти крутые фотки

Pexels — большая подборка бесплатных стоковых фотографий, которая пополняется ежедневно.

Подобрать идеальную цветовую гамму

Coolors — минималистичный сайт, с помощью которого можно быстро сгенерировать красивые цветовые схемы.

Сделать качественное видео

Videvo — сайт с большой подборкой бесплатных качественных видеофайлов, которые можно использовать для монтажа видео.

Создать удобный сайт

www.adme.ru

Как сделать красивый сайт? | 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.

breakingcode.ru

15 гениальных примеров главной страницы сайта

Источник изображения

У вас не будет второго шанса произвести первое впечатление второй раз. Вот почему главная страница — одна из самых важных страниц вашего сайта. Если новому посетителю не нравится то, что он видит, не сомневайтесь, что он нажмет кнопку «Назад». Многие пользователи до сих пор судят о книге по обложке.

Что делает главную страницу привлекательной? Как получить высокую конверсию и низкий коэффициент отказов? Как оформить главную страницу блога? Каковы удачные примеры текстов о компании? В этой статье вы найдете ответы на эти вопросы.

На любой главной странице должны быть следующие элементы:

• Ясный ответ на вопросы пользователя: «Кто вы?», «Что вы предлагаете?» и/или «Что я могу сделать здесь?». Ваша компания ​​должна ответить на эти вопросы так, чтобы каждый посетитель понял, что оказался в нужном месте. Если пользователи в течение нескольких секунд не смогут найти ответ на поставленные вопросы, следующий их шаг — это отказ!
• Резонанс с целевой аудиторией. Главная страница должна говорить с целевой аудиторией на ее языке. Старайтесь избегать «корпоративной абракадабры» и устраните все лишнее и отвлекающее.
• Ценное предложение. Заголовок и еще раз заголовок! Выразите смысл своего товара или услуги в одном предложении так, чтобы у пользователей не возникло желания поискать что-то получше у ваших конкурентов. Решение проблемы — вот о чем необходимо писать; не нужно перечислять технические составляющие оффера.
• Юзабилити. Все страницы, показанные ниже, очень удобны: на них легко ориентироваться, на них нет «кричащих» объектов, например, флэш-баннеров, анимаций или других чрезмерно сложных и ненужных элементов. Многие также оптимизированы для мобильных устройств, что очень важно в современном веб-маркетинге.
• Призыв к действию (СТА-элемент). На каждой из 15 примеров главной страницы эффективно использованы первичный и вторичный СТА-элементы. Они направляют посетителей к следующему шагу. Например, «Бесплатная пробная версия», «Купить сейчас» или «Подробнее». Помните, что цель главной страницы — удержать посетителей на вашем сайте и провести их до конца воронки конверсии.
• Общий дизайн. Хорошо продуманная страница — залог успеха в воспитании лояльности пользователей к бренду, настройке связи с целевой аудиторией и продвижении пользователей в воронке конверсии.
• Не останавливайтесь на достигнутом. Если вас устраивает коэффициент конверсии вашего ресурса, знайте, что его можно увеличить на 10-50% с помощью несложного сплит-теста главной страницы.

1. FreshBooks
2. Золотая семерка: lp пример с удачным оформлением отзывов
3. CloudPassage: видео на главной странице
4. Box
5. Aweber: пример хорошей текстовой страницы
6. Carbonmade
7. Evernote.com: пример страниц описания сайта
8. Unlocking
9. Tribal Media: образец для панорамы на главной странице
10. eWedding
11. Basecamp: сайт с удачной лид-формой
12. Eventbrite: новость на главной странице
13. GoodData: удачная картинка на главной странице сайта
14. TechValidate
15. Endeavor.org

1. FreshBooks

на сайт

Этот пример главной страницы сайта html гениален, потому что:

• Удачно использовано сочетание цветов и эффективно расставлены СТА-элементы.
• Очень заманчивый текст на СТА-элементе: «Попробуйте бесплатно в течение 30 дней».
• Эффектный подзаголовок: «Для более 5 миллионов людей, использующих FreshBooks, финансовая отчетность теперь не проблема». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, мучительно сложно для фрилансеров и владельцев малого бизнеса.

2. Золотая семерка: lp пример с удачным оформлением отзывов

на сайт

Это гениально, потому что:

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

3. CloudPassage: видео на главной странице

на сайт

Это гениально, потому что:

• Четкий и чистый дизайн страницы. Текстовый контент, точно передающий суть деятельности CloudPassage. Вот как на главной странице сайте разместить вместо фото презентацию или видео, закрепляя послание (месседж, message) с его помощью.
• Только один направляющий призыв к действию. Чтобы у пользователей не оставалось сомнений, ниже указаны два сообщения: «Без кредитных карт», «Без обязательств».

4. Box

на сайт

Это гениально, потому что:

• Домашняя страница Box является отличным примером того, как красиво разместить на главной странице информацию, используя силу визуальных эффектов и текстового контента. Простой, но сильный заголовок.
• На главной странице отлично смотрятся логотипы заказчиков с надписью «Более 140,000 компаний используют Box», доказывающие популярность бренда.
• Дополнительное доверие вызывают размещенные на видном месте контакты для сайта. Пример Box содержит хорошо заметный номер телефона вверху страницы.

5. Aweber: пример хорошей текстовой страницы

Это гениально, потому что:

• Текстовая страница с сильным заголовком «7 причин подписаться на рассылку бесплатных советов по емейл-маркетингу» сообщает посетителю о множестве бонусов и предъявляет социальные доказательства.
• Данная страница повысила процент подписок на рассылку на 321%.

6. Carbonmade

на сайт

Это гениально, потому что:

• Оригинальная и забавная графика наглядно демонстрирует, на что способны специалисты этой компании.
• Цифры и краткий, но емкий список преимуществ выглядят очень убедительно.
• Красивая интеграция меню с иконками. Значки главной страницы для сайта, разделов «О нас», «Примеры работ» и «Цены» вызывают улыбку и запоминаются.

7. Evernote.com: пример страниц описания сайта

на сайт

Это гениально, потому что:

• Заголовок страницы Evernote «Помни все» наверняка оказался бы победителем в номинации «Все гениальное – просто».
• На этой странице видны три простых предложения, которые буквально «выскакивают» на зеленом фоне.
• При просмотре страницы взгляд невольно останавливается на кнопке призыва к действию: «Попробуй Evernote бесплатно».

8. Unlocking

на сайт

Это гениально, потому что:

• С первого взгляда ясно, о чем этот сайт. И хотя большинство посетителей наверняка знает, что делать в случае блокировки телефона, на этой странице есть небольшое описание решения этой проблемы.
• Эффект главной страницы построен на контрасте цветов и силе элементов доказательства. Например, «Доверие миллионов: разблокировано более 4 млн. телефонов».
• Короткая лид-форма, размещенная непосредственно на странице вместо кнопки призыва к действию, избавляет пользователей от необходимости перехода и ожидания загрузки для сайта — пример правильного оформления.

9. Tribal Media: образец для панорамы на главной странице

Это гениально, потому что:

• Впечатляющая городская панорама в хедере главной страницы привлекает максимум внимания. Как сделать картинку для главной страницы сайта? Вы не прогадаете, если последуете примеру Tribal Media.
• Сила заголовка — в отсутствии лишних слов.

10. eWedding

на сайт

Это гениально, потому что:

• Главная страница включает в себя только самые необходимые элементы и ничего лишнего.
• Отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: «Создайте свой ​​бесплатный свадебный сайт за 5 минут». Простой нтмл 5. Пример кода главной страницы будет предоставлен клиенту.

11. Basecamp: сайт с удачной лид-формой

на сайт

Это гениально, потому что:

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

12. Eventbrite: новость на главной странице

на сайт

Это гениально, потому что:

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

13. GoodData: удачная картинка на главной странице сайта

на сайт

Это гениально, потому что:

• Главная страница оформлена, мягко говоря, нестандартным способом, но это только одна из многих причин, по которой ее можно назвать блестящей.
• Картинка для сайта главной страницы помогает пользователям увидеть, как предлагаемый продукт выглядит в повседневной жизни.
• Единственный минус – отсутствие четкого СТА-элемента.

14. TechValidate

на сайт

Это гениально, потому что:

• Пример страницы, на которую просто приятно посмотреть. Этого удалось добиться за счет использования белого пространства и контрастных цветов.
• Заголовок ясен и убедителен. То же можно сказать о призывах к действию.
• Желтый цвет заголовка внушает пользователям мысль о ценности предложения.

15. Endeavor.org

на сайт

Это гениально, потому что:

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

Высоких вам конверсий!

По материалам: blog.hubspot.com

11-01-2013

lpgenerator.ru

Как создать красивый сайт? Пошаговое создание сайта

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

Добро пожаловать в пятый бонусный видеоурок по курсу CSS. Он будет завершающим, можно даже сказать, итоговым в этом видеокурсе. В первых четырех бонусных видеоуроках, мы разобрали памятку записи селекторов, создание красивого поиска на сайте, расширения и виджеты для браузера Opera, 7 полезных дополнений для Mozilla Firefox и полезные расширения для браузера Google Chrome.

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

1. Создание или использование готового дизайна сайта.
2. Создание или редактирование HTML-файлов.
3. Создание или редактирование CSS-файлов.
4. Форматирование файлов и проверка на валидность. (Этот шаг может понадобиться не всем)
5. Размещение сайта в интернете. (Этот шаг относится не совсем к созданию сайта, но он важен, и вы в любом случае с ним столкнетесь)

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

1. Создание дизайна сайта

Итак, начинаем с создания дизайна сайта. У вас есть пять способов получить дизайн сайта:

1. Вы рисуете дизайн сайта в фотошопе сами.
2. Вы покупаете дизайн в формате psd у профессионалов. (.psd – формат Adobe Photoshop)
3. Вы скачиваете бесплатный psd-шаблон в интернете. (Искать можно в Google или любом другом поисковике)
4. Вы создаете дизайн в процессе кодирования. (Вы пишите HTML и CSS файлы и одновременно создаете дизайн)
5. Вы скачиваете HTML-шаблон. Такие шаблоны включают в себя и CSS файлы. (По сути, скачиваете шаблон — и сайт готов. Остается лишь изменить ссылки и отредактировать что-то под себя)

Как видите, второй и третий варианты связаны с созданием дизайна в фотошопе. В будущем этому будет посвящен отдельный видеокурс. Дизайн рисовать именно в фотошопе не обязательно, но, как правило, используется эта программа.  Пятый вариант вы можете поискать в Google, как и третий, но я вам покажу один сайт. Он называется unishablon.com. Слева находятся категории шаблонов. Выберем, например, «Компьютеры».  Далее можно увеличить шаблон, а также скачать его, нажав на кнопку «Скачать».  Вы скачиваете rar-архив, затем разархивируете его. В нем, как и в нашей папке site, находятся html-и css-файлы. Нажав на html-файл главной страницы, вы увидите главную страницу. Все, что вам нужно будет сделать – это отредактировать ее под себя, то есть, под тот сайт, который вы хотите видеть.

2. Создание HTML-файлов

Переходим к следующему шагу – «Создание html-файлов». Здесь есть три варианта. Вы выбираете свой вариант в зависимости от того, какой вариант вы выбрали на первом шаге.

1. Вы создаете html-файл под свой psd-шаблон. (1-3 варианты предыдущего шага, то есть там, где мы работали с psd-файлом)
2. Вы создаете html-файл под свой будущий дизайн. То есть намечаете каркас: где будет шапка, где — контент и т.д. (4 вариант предыдущего шага)
3. Вы редактируете html-файлы под себя. Вы открываете html-шаблон и изменяете его по вашему усмотрению. (5 вариант предыдущего шага)

В принципе, все три варианта одинаковы. Главное запомнить крупный шаг – «Создание html-файлов».

Полезные сайты для создания html-файлов

Переходим к полезным сайтам. Первый сайт, который вам понадобится – это lipsum.com. Чтобы выбрать русский язык, вам нужно нажать на слово «Русский» с русским флагом. Этот сайт вам пригодится в том случае, если вы, например, создали html-каркас сайта и вам нужен текст для наполнения. Чтобы не писать его самому и не ставить кучу одинаковых букв, можно зайти на этот сервис и скопировать столько абзацев, сколько вам нужно. Внизу можно указать количество абзацев, которые нужно сгенерировать.

Следующий сайт (caniuse.com) поможет вам в проверке, какие свойства и функции  поддерживает той или иной браузер. Можете сразу перейти в таблицы – там увидите множество css-свойств, а можете выбрать css-свойства из списка. Например, «Text-shadow» (тень для текста). На открывшейся странице вы видите, какой фон что означает. Зеленый – поддерживает, розовый – не поддерживает, бежевый – поддерживает частично, сиреневый – поддержка неизвестна. Внизу мы видим таблицу с данным свойством. Из нее становится понятно, что IE версий 6-9 не поддерживают его, Safari 3.2 поддерживает частично, как и Operamini 5.0-6.0, а все остальные браузеры поддерживают. Увидеть все таблицы со свойствами вы можете, нажав на ссылку  «Showalltables».

Третий сайт, который вам понадобится –  htmlbook.ru. Это русский справочник по HTML и CSS. Здесь вы можете выбрать любой тег, который вам понадобится, либо css-свойство, о котором вы хотите узнать. Например, тег <audio>. Слева вы видите атрибуты для данного тега, сверху – поддержку браузерами, спецификацию, ниже – список поддерживаемых браузером кодеков (например, Opera не поддерживает mp3-файлы, как и Firefox 3.6), атрибуты, необходимость закрывающего тега, пример использования и результат примера в браузере Opera. Очень полезный сайт. Советую.

Следующий сайт – html5please.us. Он вам поможет в HTML5 и CSS3. Это справочник по HTML5. Вы можете что-то искать, можете воспользоваться метками для поиска. Внизу выдаются найденные теги.  Здесь написаны очень хорошие советы, правда, на английском языке. Поэтому вам придется либо пользоваться переводчиком, либо, если вы знаете английский язык, переводить самостоятельно. Сайт очень полезен. Если вы решите разрабатывать свой сайт на HTML5, то обязательно примите его к сведению.

Последний сервис, который я вам посоветую – csstemplater.com. Он генерирует css- и html-шаблон. Вы можете писать код вручную, а можете сразу сгенерировать макет, а потом добавлять в него то, что хотите. Итак, первым делом вы выбираете doctype.  Например, HTML 5. Потом выбираете CSS-сброс. Вы можете выбрать {margin:0; padding:0;} ( но я вам этот вариант не советую), а можете выбрать сброс стилей от EricMeyer, который мы использовали в курсе по CSS, или сброс стилей от Yahoo!. После выбора сброса стилей, вы выбираете ширину макета: фиксированную или резиновую. Например, фиксированную, шириной в 800 пикселей. Шапка у нас будет высотой в 120 пикселей, два сайдбара (слева и справа). В предпросмотре мы уже видим созданный макет. Уменьшим сайдбары на 50 пикселей и создадим подвал высотой в 80 пикселей. Вы можете добавить дополнительные опции: либо прижать футер к низу браузера, либо эмулировать одинаковую высоту колонок, либо ни то, ни другое.  Выберем второе. Жмем «получить ссылку». На экране появляется сгенерированный макет. Вы можете скачать zip-архив или перейти на главную страницу сервиса и создать новый макет.

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

3. Создание CSS-файлов

Переходим к следующему шагу. Шаг 3 – «Создание CSS-файлов». Здесь есть два варианта:

1. Вы создаете css-файлы под свой psd-шаблон. Используете этот вариант, если вы работаете с psd-шаблонами. Например, вы видите, что на шаблоне меню имеет красный фон, значит и в CSS вы делаете меню с красным фоном. Так строите свой сайт в соответствии с макетом, который вам дан. (1-3)
2. Вы создаете/редактируете css-файлы под себя. Используете этот вариант, если вы создаете дизайн вместе с кодированием, или если вы скачали готовый шаблон для  сайта. (4-5)

В обоих случаях вам пригодятся те сайты, которые я сейчас покажу.

Первый сайт – памятка записи селекторов в CSS.  Это уникальная авторская разработка (моя памятка записи селекторов, которой нет нигде в интернете, кроме как на моем сайте). Скачать ее можно по адресу http://info-line.net/downloads/csscurs/memo-record-selectors-in-CSS.png . А посмотреть видеоурок по работе с ней вы можете в первом бонусном видеоуроке по CSS. Все ссылки я прикладываю в дополнительных материалах в файле Ссылки.txt.

После того, как вы создали html-файлы и начали работу над файлами css, скорее всего вы начнете с создания фона. С ним вам поможет сайт patterns.ava7.com. Здесь вы можете подобрать тот фон, который хотите, выбрать форму фона и нажать «download», если вам понравился фон и вы хотите его скачать.

После создания фона, возможно, вы захотите украсить сайт. Вам могут понадобиться иконки. В этом вам поможет сайт findicons.com. Вы вводите на английском языке какой-нибудь запрос, например «people», и на странице высвечиваются иконки по данному запросу. Вы можете выбрать, сколько иконок отображать на странице, их размер и цвет. Затем нажимаете на понравившуюся иконку и скачиваете в любом доступном формате.

Как вы знаете, CSS отвечает за внешний вид сайта. Чтобы вы еще раз убедились в этом, я хочу показать вам сайт csszengarden.com.  Чтобы открыть сайт на русском языке, вы жмете «translations» и выбираете «Russian». Что это за сайт – написано слева: «Демонстрация того, что может быть достигнуто визуально посредством дизайна на основе CSS. Выберите любой stylesheet из списка, чтобы загрузить его в эту страницу».  Вы можете скачать пример файла с html, и всплывающая подсказка говорит вам, оставить его неизменным. А вот css-файл вам следует модифицировать. Тогда вы сможете поучаствовать в данном проекте. Вы можете посмотреть на дизайны, которые уже созданы, по соответствующей ссылке. Они основаны на одном и том же html-коде, меняется только CSS. Как вы видите, очень много дизайнов создано только с изменением CSS и изображений. Этот сайт показывает вам всю мощь CSS.

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

4. Оптимизация файлов

Шаг четвертый – «Форматирование файлов и проверка на валидность». Возможно, здесь стоило даже употребить выражение «оптимизация файлов».

Оптимизация (форматирование) файлов.

Вы форматируете html-и css-файлы. То есть, вы их оптимизируете, сокращаете и делаете удобными для себя. Для этого существует три сервиса:

• www.cssoptimiser.com . Этот сервис посвящен оптимизации CSS. Давайте загрузим файл, например, st.css и жмем «Optimize!».  Мы видим, что наш файл оптимизировался в какие-то непонятные строчки кода, но зато он сохранил 20% места.  Если раньше файл весил 3.5Кб, то теперь он весит 2.8Кб. Вернемся в оптимайзер и выберем другой css-файл, например, style.css. Жмем «Optimize!». Этот файл сократился почти на 50%. Вы видите силу оптимизации. Если вам нужно будет уменьшить место, занимаемое сайтом, то можете воспользоваться этим сервисом. Чтобы потом вы могли отредактировать текст, как нормальный человек, я советую сохранить файл на своем компьютере в нормальном состоянии прежде, чем его оптимизировать.  Тогда, если вам потребуется что-либо отредактировать,  то вы будете это делать на своем компьютере, а на сайт загрузите уже оптимизированный файл. На сервисе можно также вставить css-код файла, а вверху указать ссылку. Если вы загрузите тот же файл, но поставите галочку «Do not remove line breaks» и нажмете кнопку «Optimize!», то у вас не будут удалены линии. Будут удалены только лишние пробелы.  Таким образом мы тоже сократили довольно много информации – целых 42%, и наш код читается довольно легко.
• www.cssdrive.com . Еще один сервис для оптимизации. Он тоже уменьшает css-код файла. Также можно выбрать, удалять или не удалять комментарии, посмотреть информацию о режимах оптимизации, выбрать «Advanced mode» и, если хорошо знаете английский язык, то указать те настройки, которые вам нужны. Этот сервис более сложный, но вам придется вставлять css-код вручную, после чего жать «Compress-it!».
• www.processor.com. Этот сервис поможет вам в форматировании css-стилей. Помните ту абру-кадабру, которая получилась в первом сервисе? Мы ее сейчас вставим сюда и нажмем «procss».  Наша таблица стилей стала выглядеть красиво. Она отсортирована по важности (приоритетности),  а потом — по алфавиту. Чтобы скачать полученный код, вы жмете кнопку «download». Очень советую пользоваться этим сервисом.

Проверка файлов на валидность.

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

5. Размещение сайта в интернете

Переходим к шагу 5 – «Размещение сайта в интернете». Для того, чтобы разместить сайт в интернете, вам нужно сначала сделать два простых шага:

1. Вы заходите на сайт info-line.net
2. Вы ищите видеокурс по размещению сайта в интернете и начинаете его изучать. После изучения видеокурса на вашем сайте будет красоваться постфикс.

Спасибо за внимание, до встречи в следующем видеокурсе по размещению сайта в интернете! Подписывайтесь на RSS, чтобы не пропустить его!

Приступить к изучению видеокурса по размещению сайта немедленно!

info-line.net

❶ Как сделать красивый сайт 🚩 как сделать свой сайт красивым 🚩 Веб-дизайн

27 декабря 2018

Автор КакПросто!

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

Статьи по теме:

Вам понадобится

• — Компьютер
• — Интернет
• — Программа — редактор сайтов

Инструкция

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

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

Старайтесь использовать два, максимум три цвета при создании сайта, не нужно делать сайт похожим на радугу, это отвлекает и раздражает глаза.

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

Видео по теме

Обратите внимание

Ни в коем случае не используйте тяжелый монолитный дизайн – он должен быть легок и приятен глазу.

Полезный совет

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

Совет полезен?

Статьи по теме:

www.kakprosto.ru

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

 

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

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

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

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

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

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

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

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

 

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

witiger.ru