Что делать, если у тебя ужасный сайт

|
FavoriteLoading В закладки
Что делать, если у тебя ужасный сайт

Как быстро улучшить дизайн собственными силами.

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

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

Но бывают ситуации, когда сайт должен выглядеть приятно и аккуратно, но приходиться обойтись без дизайнеров:

  • Надо срочно запускать сайт и нет времени ждать, когда дизайнер выполнит свою работу;
  • Сайт некоммерческий и для узкой аудитории. Затраты на дизайн не окупятся;
  • Функциональность в ближайшее время кардинально обновится и нет смысла тратить силы и деньги на временный дизайн;
  • Бюджет проекта ограничен.

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

Бесплатные шаблоны

free_css

На сайте Free-css.com есть 2340 бесплатных шаблонов для сайтов. Да, если использовать один из них, то велик риск, что у вашего сайта будут десятки «клонов». Но во-первых, абсолютное большинство ваших посетителей их никогда не увидит, а во-вторых есть много способов с минимальными усилиями придать общедоступному шаблону индивидуальности.

free_web_site_templates

Интересные шаблоны есть также на Freewebsitetemplates.com

Twitter Bootstrap

bootstrap

Этот HTML/CSS/JS фреймоворк позволяет быстро создавать красивые, адаптивные и кроссбраузерные вебсайты, собирая их как конструктор из готовых элементов. Twitter Bootstrap популярен во всем мире. На сайте каждого третьего стартапа чувствуются неуловимые бутстраповские нотки. Все необходимое для создания сайта можно скачать на Getbootstrap.com.

bootstrap_secret

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

Чтобы быстро получить основные навыки создания сайтов с помощью Twitter Bootstrap можно пройти какой-нибудь онлайн-курс. К примеру, на Codeacademy.

twitter_bootstrap

Индивидуальная цветовая схема

paletton

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

colord

Можно также взять готовую цветовую схему на Colrd.com

Онлайн-генератор логотипов

create_logo

Если сайт представляет какую-то фирму, то отсутствие логотипа может вызвать у пользователя подсознательное недоверие. Если на заказ логотипа у дизайнера пока нет средств, то можно сделать временный с помощью онлайн-генератора Designmantic.com. И это будет дополнительным плюсом к индивидуальности сайта.

Генераторы элементов интерфейса

enjoy_css

Красота сайта во многом зависит от мелочей: рамочек, кнопочек, формочек, блоков для текста. Если вы новичок в верстке или просто хотите сберечь время, то можно воспользоваться онлайн-генератором элементов для веб-страниц Enjoycss.com.

css_generator_2

Или Css3generator.com.

dobutton

Сайт Dabuttonfactory.com создан исключительно для создания кнопок. Мне он кажется очень удобным. Кнопки, созданные в нем можно использоваться не только для сайтов, но и для приложений.

button_generator_2

А на Bestcssbuttongenerator.com есть красивые шаблоны кнопок, из которых можно сделать идеальные кнопки под себя.

form_generator

А создавать дизайн для форм ввода данных можно в сервисе Form Builder от uiparade.com.

Готовые элементы интерфейса

hongikat

Если времени/навыков/цели отличаться от других нет совсем, то можно взять кнопочки/формочки/ленточки из готовых дизайнерских подборок на Hongkiat.com.

Иконки

simple_icon

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

icons

Или на Iconsfeed.com.

Шрифты

typewolf

Шрифт очень важная деталь сайта по которой можно определить год, в котором было сделано последнее обновление дизайна. Это конечно не так, но шрифт — это мелочь, которая может мгновенно придать странице современный вид. Узнать какие шрифты сейчас в тренде можно на Typewolf.com

modular_scare

А быстро подобрать оптимальный размер надписей можно с помощью Modularscale.com

Надписи

typograff

Чтобы обратить внимание посетителя на некоторый текст, можно превратить его в яркую картинку. Сделать стилизованную надпись из любого текста можно на Typograffit.com

Символы

html_arrows

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

Favicon

favicon

Favicon — это небольшая иконка, которая отображается во вкладке браузера рядом с заголовком страницы и в результатах поиска. Сделать такую иконку из любой картинки можно на Favicon-generator.org.

В сфере веб-дизайна и веб-разработки бесплатные онлайн-сервисы есть практически для любых действий. Так как среди стартаперов очень много профессиональных кодеров и дизайнеров, которые в курсе проблем и рутинных задач, которые стоят перед людьми их профессий. Делайте что-то и чувствуете, что здесь пригодился бы онлайн-сервис? Смело идите в Google и вы найдете его там.

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

Поставьте оценку:

1 Звезд2 Звезды3 Звезды4 Звезды5 Звезд (Нет голосов)
🤓 Хочешь больше? Подпишись на наш Telegram.
... и не забывай читать наш Facebook и Twitter 🍒
FavoriteLoading В закладки
undefined
iPhones.ru
Как быстро улучшить дизайн собственными силами. Неделю назад на iPhones.ru вышла статья Как узнать, что у тебя ужасный сайт. В ней Максим Клименчук рассказывает о феноменально популярных сайтах с неэстетичным дизайном и рассуждает о том, в каких случаях нужно обращаться к дизайнеру за помощью, а в каких случаях оставить все как есть. Вариант обойтись собственными...
Прокомментировать

🙈 Комментарии 32

  1. bravchik avatar
    bravchik27 марта 2016
    3

    Боже, зачем это здесь? Мой совет – не делайте сами свой сайт если не знаете зачем он вам нужен точно. Лучше ведите блог на medium, либо продавайте что-то через группы ВК / на площадках типа Avito, OLX.

    BIG BROTHER avatar
    BIG BROTHER27 марта 2016
    1

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

    migmit avatar
    migmit27 марта 2016
    0

    Именно. В большинстве случаев сайт просто нафиг не нужен.

    Ирина Чернова avatar
    Ирина Чернова27 марта 2016
    0

    @migmit, @BIG BROTHER, @bravchik, это статья не про то как делать сайт с нуля, а про то как малой кровью освежить работающий сайт типа:
    http://in-yaz-book.narod.ru
    http://infojd.ru
    Для узкого круга людей контент бесценен – но затраты на дизайн долго не отобьются.

    migmit avatar
    migmit27 марта 2016
    1

    @Ирина Чернова, похоронить. С редиректом на группу вконтакте или сообщество ЖЖ.

  2. dennis1 avatar
    dennis127 марта 2016
    0

    Ирина, отличная статья! посоветуйте редакции вернуться к прежнему дизайну сайта, а то этот хоть и примелькался уже, но явно не образец вкуса.

    dennis1 avatar
    dennis128 марта 2016
    0

    @dennis1, молодец Иришка, оставляем только лояльные комменты)

  3. Alexid avatar
    Alexid27 марта 2016
    1

    Бесплатные шаблоны часто могут содержать вирусы и рекламные вставки. Риск слишком большой.

    Сейчас для небольших проектов оптимально делать сайт на WordPress + купить платный шаблон. Такой шаблон недорого стоит – от 1 до 5 тыс руб. Но Вы получите техподдержку от авторов шаблона, он будет развиваться, а не брошен в один прекрасный день, как бесплатный шаблон. На ThemesForest тысячи отличных шаблонов. Я купил там один из популярных шаблонов-конструкторов, где можно гибко менять дизайн с помощью визуального редактора.

    WordPress позволит Вам потом самостоятельно наполнять контентом сайт, не идя на поклон к веб-программистам.

    Пример WordPress сайта с хорошим шаблоном – iPhones.ru

    xSphinx avatar
    xSphinx27 марта 2016
    0

    @Alexid, вордпресс дрянь ) как в области архитектуры так и поддержки.

    Alexid avatar
    Alexid27 марта 2016
    0

    @xSphinx, WordPress не идеален, но интерфейс для пользователя у него отличный. Все удобно и понятно. А главное есть автоматические обновления. На WordPress в мире работает 60 миллионов сайтов. Наверное это тоже о чем-то говорит? И повторю – iPhones.ru тоже работает на WordPress.

    xSphinx avatar
    xSphinx27 марта 2016
    0

    @Alexid, я с точки зрения разработчика движка написал. С точки зрения программирования, создание сайта – блога крайне простое занятие – ничего проще просто нет.

    С точке зрения многих разработчиков – вордпресс оставить юзерам (пусть мучаются) а для себя использовать нормальные инструменты.

    SeaMonkey avatar
    SeaMonkey27 марта 2016
    0

    @xSphinx, угу, с точки зрения пользователя, самое главное, чтобы сайт работал, и постараться не думать о безопасности. И в этом плане WordPress, очень и очень удобен. Так как у него в отличие от noname разработки, количество тесторов переваливает за 50 миллионов. А также быстрота и удобство разработки, и возможность менять разработчика сайта. Иногда лучше не выдумывать велосипед.

    xSphinx avatar
    xSphinx27 марта 2016
    0

    @SeaMonkey, я вам поясню ) это как сравнить 9ку с ее миллионом пользователей и тюнингованную под вас BMW.

    Безопасностью одинакова сегодня для всех фреймворках.
    “А также быстрота и удобство разработки” – ее просто нет )
    “и возможность менять разработчика сайта” – плагино-писателя т.е. ) Или того кто тему верстал – вы это хотите сказать ?)

    Когда нужно что-то сложнее чем “из коробки” либо вешается все на другой поддомен либо переписывается заново.

    SeaMonkey avatar
    SeaMonkey28 марта 2016
    0

    @xSphinx, разумеется. Facebook, наверно специально решило “мучаться”, или BBC, или Sony Music они все сделали свои сайты на WordPress, наверно, потому что забыли с вами посоветоваться. Быстрота и удобство разработки сайта? Есть, простой сайт на WordPress делается за минуту. Когда нужно что-то сложнее чем из коробки, то или пишется свой плагин, или ищут готовое решение, благо на тот же WordPress, плагинов уйма. Если у сайта на фреймворке уходит программист, то потом поддержка сайта превращается в большое мучение. PS. Как же Вас мучает, когда Вы заходите на сайт iphones, он же на WordPress

  4. Northern027 марта 2016
    1

    Как узнать?
    Посмотрите на свой сайт!

  5. studio76 avatar
    studio7627 марта 2016
    1

    Как запутать себя и убить свой сайт .

  6. Sergey avatar
    Sergey27 марта 2016
    0

    Эх… я бы с удовольствием почитал про индексацию (sitemap, robots.txt и т. п.) Как её проверить, улучшить.

    xSphinx avatar
    xSphinx27 марта 2016
    0

    @Sergey, sitemap генерируется на основе базы либо парсом страницы по правилам, например с помощью ноды.

    robots.txt – закрыли что не нужно, дали ссылки на сайтмеп, по сути это основное.

    Анализируем рынок делаем правильную разметку, прикрепляем дата тему и т.д.

    Сео – скукотень рутиная.

    Sergey avatar
    Sergey27 марта 2016
    0

    @xSphinx, спасибо.
    Это не мой профиль, поэтому не знаю, что такое “ноды”(. А так все сделал, но почему-то не всё ищется в yandex и google через site: название сайта и слово поиска.

    Ирина Чернова avatar
    Ирина Чернова27 марта 2016
    0

    @Sergey, под нодой xSphinx имеет ввиду javascript-фреймворк node.js. Я удивляюсь таланту этого читателя любую тему свести к обсуждению node.js) Уже не в первую статью приходит и упоминает его:-)

    Ирина Чернова avatar
    Ирина Чернова27 марта 2016
    0

    @Sergey, проверить индексацию любого сайта в Google можно здесь https://northcutt.com/tools/free-seo-tools/google-indexed-pages-checker/

    Sergey avatar
    Sergey27 марта 2016
    0

    @Ирина Чернова, где её проверить и как понятно, а вот как её улучшить своими силами это вопрос. Например гугл выдает 49, а яндекс 8.

  7. onlinewd.com avatar
    onlinewd.com27 марта 2016
    0

    Неплохо… Но у человека, не имеющего хотя бы элементарных познаний в HTML, CSS, Javascript, максимум получится сайт “четко по шаблону”.

  8. onlinewd.com avatar
    onlinewd.com27 марта 2016
    0

    И максимум что получится – это “сайт по шаблону”. Без элементарных познаний в HTML, CSS, Javascript никуда…

  9. Orgasmatron avatar
    Orgasmatron27 марта 2016
    0

    реально полезная статья, спасибо автору!
    есть идея замутить сайт, но далек от веба,
    а здесь собраны действительно прекрасные инструменты! :)

  10. Orgasmatron avatar
    Orgasmatron27 марта 2016
    0

    особенно прикольный сервис designmantic.com )))))))

  11. yurembo27 марта 2016
    0

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

    Ирина Чернова avatar
    Ирина Чернова27 марта 2016
    0

    @yurembo, она не про сайтостроение, а как освежить уже готовый проект, если нет денег на дизайн.

    yurembo27 марта 2016
    0

    @Ирина Чернова, ладно, договорились )))

  12. Artemitto avatar
    Artemitto27 марта 2016
    0

    Круто, спасибо!

    Ирина Чернова avatar
    Ирина Чернова27 марта 2016
    0

    @Artemitto, :-)

  13. Ma Wugui avatar
    Ma Wugui29 марта 2016
    0

    У сайта lingscars.com отличнейший дизайн! Не надо его портить!

Вы должны авторизоваться или зарегистрироваться для комментирования.

Нашли орфографическую ошибку в новости?

Выделите ее мышью и нажмите Ctrl+Enter.

Как установить аватар в комментариях?

Ответ вот здесь