Как верстают сайты?

[OtherSide]

Суть в чем. На данном этапе я хорошо разбираюсь как делаются сайты технически. Понимаю как связать БД, ORM, application server. Умею делать фронтэнд. Умею делать web-based mobile apps. Парадокс - приложение для андроид сделал, а сайт красивый не знаю как
https://play.google.com/store/apps/deta ... stockchart" onclick="window.open(this.href);return false;
Но я что-то совесем не въезжаю как быстро сверстать собственно сам сайт.
Вот дизайн типа такого меня устроил бы http://rv9cohj74.ulcraft.com/" onclick="window.open(this.href);return false;
Но эта штука крутится на облачной CMS. А как быстро слабать нечто подобное без CMS, ибо будут свой сервер, свои данные и проч.
Может быть какие-то js фреймворки есть, которые позволят быстро делать модные нынче прокручивающиеся сайты типа такого https://pondmobile.ru/" onclick="window.open(this.href);return false;
Может фреймворки какие-то есть, которые добавляют функционал собственной CMS, готовые модули для отзывов пользователей, новостной ленте и т.п.
Или без CMS оно долго и мутроно ручками набивается - база, апп. сервер, верстка, стили и т.п.

[SUPER]

Я студент курса фронт-енд программирования.

Как работать со сервером не подскажу.

Щас я прохожу JQuery. Вы показали примеры, этим фреймворком можно сделать без проблем.

То что вы сделали андроид апп- круто, но мое имхо достаточно сделать риспонсив дизайн как вам советовали здесь форумчане.

[_Lenchik]

а сайт красивый не знаю как

Практически любой человек сможет научиться основам HTML (верстке), а вот дизайнерские способности - или они есть и их можно развивать, или их нет от слова - совсем.

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

[stenking]

Сложная вёрстка, SASS, sprites, transactions, сборка, кроссплатформенность, немного JS , UX и чувство вкуса это всё довольно непростые вещи. Да, легче чем hardcore девелопмент но далеко не уровень верстальщика. Ну и по хорошему такие вещи нужно делать в несколько стадий. Сначала вы должны работать с дизайнером. Притом именно что работать с многими итерациями а не просто отдать дизайнеру на откуп. Потом сделать все страницы что бы был общий layout как в дизайне, показать все дата поинты и т.д. И только потом отдать frontend dev который ваш сырой но работающий макет сделает один в один как в дизайне.

А студенты курсов фронтенд дев с jquery сделают такую же гадость как и вы. А может даже и хуже.

Ну и можно конечно тот же WordPress использовать и на нём сделать маркетинговый сайт а сам эпп перенести на app.domain.com

[rtogan]

Я студент курса фронт-енд программирования.

Как работать со сервером не подскажу.

Щас я прохожу JQuery. Вы показали примеры, этим фреймворком можно сделать без проблем.

То что вы сделали андроид апп- круто, но мое имхо достаточно сделать риспонсив дизайн как вам советовали здесь форумчане.

А какие курсы вы берете?

[OtherSide]

Сложная вёрстка, SASS, sprites, transactions, сборка, кроссплатформенность, немного JS , UX и чувство вкуса это всё довольно непростые вещи. Да, легче чем hardcore девелопмент но далеко не уровень верстальщика. Ну и по хорошему такие вещи нужно делать в несколько стадий. Сначала вы должны работать с дизайнером. Притом именно что работать с многими итерациями а не просто отдать дизайнеру на откуп. Потом сделать все страницы что бы был общий layout как в дизайне, показать все дата поинты и т.д. И только потом отдать frontend dev который ваш сырой но работающий макет сделает один в один как в дизайне.

А студенты курсов фронтенд дев с jquery сделают такую же гадость как и вы. А может даже и хуже.

Ну и можно конечно тот же WordPress использовать и на нём сделать маркетинговый сайт а сам эпп перенести на app.domain.com

Вы хотите сказать, что аппы, которыми вы так халитесь и под которые окучиваете инвесторские миллионы, делаете на WordPress?

Я же написал, что понимаю как делать простые домашние странички с помощью CMS и как работать с дизайнарами, макетами и т.д.
Вопрос как это делается без CMS.
Дизайнеру легко отдать на откуп что-то стандартное, типа визитки или интернет-магазина. А вот промышленный софт не всегда получится. UI же пляшет от UX. А откуда ему знать, какой функционал важен для пользователя. Он сделает все красиво в плане композиции, но этим будет неудобно пользоваться потом.

Вот вы как то постили сюда ваши километры кода на HTML коде с ангуляром. Мне не очень понятно, как над ним совместно работаю дизайнеры и кодеры. И как дизайнеры современные управляются с современными UI фреймворками типа KENDO. Там же вообще чистое кодирование практически.

[valchkou]

Дизайнеры с которыми мне приходилось иметь дело все делали в фотошопе и других чисто графических тулзах.
Верстальшици это насколько я понимаю прошлый век, когда можно было из фотошопной картинки настрогать много много кусочков и вот сайт готов. Теперь же нужно глубоко знать CSS3, SASS/LESS, JS и пару тройку фремворков. Никто современный сайты уже не верстает, их разрабатывают UI/UX программисты.

[OtherSide]

Вот например мне дизайнер посоветовал выбрать доминантный цвет для меню и добавить пару эффектов. Во фрейморке KENDO который я использую меню особого внимания не уделено, похоже считается нормальным использовать стандартное и семплов нет никаких. Т.е. придется ковырять код на js/css. Но мне кажется это несколько странным и непрофессиональным. Неужели в промышленной разработке web UI считается нормой тратить дни на такую фигню. И самое главное в этом случае непонятно как с дизайнером взаимодействовать. Если он даст картинку - так кодерам все шрифты на одно лицо - будет неидентично. А сам кодить он точно не сумеет.
Вот это вводит в ступор.

[Grand Canyon]

Не совсем понял, что собственно за сайт у автора? StockChart.ru ?
По функциональности там как раз все хорошо (ИМХО), а для такого типа сайта это основное; собственно это и так неотъемлемая часть дизайна.

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

[OtherSide]

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

[SUPER]

А какие курсы вы берете?

Front-End Development в колледже, курсы длятся полтора года

Позади HTML HTML5 CSS CSS3 JS JQuery

С июля AngularJS что дальше пока не знаю, учусь до конца этого года

[stenking]

Сложная вёрстка, SASS, sprites, transactions, сборка, кроссплатформенность, немного JS , UX и чувство вкуса это всё довольно непростые вещи. Да, легче чем hardcore девелопмент но далеко не уровень верстальщика. Ну и по хорошему такие вещи нужно делать в несколько стадий. Сначала вы должны работать с дизайнером. Притом именно что работать с многими итерациями а не просто отдать дизайнеру на откуп. Потом сделать все страницы что бы был общий layout как в дизайне, показать все дата поинты и т.д. И только потом отдать frontend dev который ваш сырой но работающий макет сделает один в один как в дизайне.

А студенты курсов фронтенд дев с jquery сделают такую же гадость как и вы. А может даже и хуже.

Ну и можно конечно тот же WordPress использовать и на нём сделать маркетинговый сайт а сам эпп перенести на app.domain.com

Вы хотите сказать, что аппы, которыми вы так халитесь и под которые окучиваете инвесторские миллионы, делаете на WordPress?

Я же написал, что понимаю как делать простые домашние странички с помощью CMS и как работать с дизайнарами, макетами и т.д.
Вопрос как это делается без CMS.
Дизайнеру легко отдать на откуп что-то стандартное, типа визитки или интернет-магазина. А вот промышленный софт не всегда получится. UI же пляшет от UX. А откуда ему знать, какой функционал важен для пользователя. Он сделает все красиво в плане композиции, но этим будет неудобно пользоваться потом.

Вот вы как то постили сюда ваши километры кода на HTML коде с ангуляром. Мне не очень понятно, как над ним совместно работаю дизайнеры и кодеры. И как дизайнеры современные управляются с современными UI фреймворками типа KENDO. Там же вообще чистое кодирование практически.

Я в отличии от вас неплохо знаю как делать веб проекты и когда и почему использовать WP. Так делают компании которые отделают продукт от маркетинга ( и часто отдают маркетинг со всеми A/B отдельным агенствам) или компании где информация часто меняется/пишется не-техническим персоналом. В вашем же случае бенефитом как раз будет - дешево и с готовым темпейтом в которых вы и дизайнер вставите свои картинки и текст.

Потому что нормальный процесс делать вы не умеете да и это совсем непросто. Т.е. вполне возможно готовый theme WP ( с модулями subscribe, sliderом каким-то ) или просто готовые темплейты на бутсрапе ( https://wrapbootstrap.com" onclick="window.open(this.href);return false; ) это много лучше того что вы там надизайнете сами. Потому что правильный процесс это десятки итераций и работа с дизайнером где обсуждается и обясняется каждый елемент, общая страгегия, где рисуется каждое состояние а не "консультации" на фрилансе за 500 рублей.

Начинать нужно с того что бы продумать весь сайт заново, меню и разделы. Потом всё рисовать и после месяца работы с дизайнером и 2-3К денег у вас должен быть 50 страничный PDF с нарисованными экранами - он лендинга и графиков до логина, оплаты, FAQ, и всех емаилов. А потом это кодить, тестировать - если не умеете сам то ещё 2К денег тому кто умеет.

У нас процесс ещё лучше -backend программист выводит все дата поинты на страницу и делает логики. Фронтенд программист делает так называемый технический дизайн и пишет все темплейты и когда UX i workflow уже более менее определена то используются дефолтные компоненты а только потом, после софт запуска, подключается дизайнер который играется с функциональностью и рисует картинки которые мы долго трешаем. И так в процессе появляется первый не-технический дизайн. Потом через полгода с ростом пользователей - дизайн переосмысливается и начинается новая итерация - обычно уже с А/Б.

Таким образом появляется продукт которым можно пользоваться. Но я думаю вам лучше отделить маркетинг/логин/эккаунт пользователя/биллинг от самого продукта и использовать ну если не WP то что-то похожее ну или тратить деньги и делать как делают взрослые дяди.

[OtherSide]

Стенкин, у вас любой пост сводится к непрерывному самовосхвалению. Понятно, что по феншую нужно найти инвестора и уболтать его в лифте дать на голую идею $500K и дальше изображать бурную деятельность, осваивая выделенные средства. Но у меня ситуация другая - я к сожалению не в Силиконке и подобное развитие событий для меня мало реально.
В моей ситуации к сожалению разделить лендинг и само приложение мало реально, т.к. на базу данных завязан тот же биллинг, новостная лента, отзывы пользователей и т.д. Если это убрать, останется только сама красиво оформленная лендинг страница, а стоит ли ради нее городить CMS? Может проще заюзать готовые шаблоны на js/css что я собственно ищу

[stenking]

Стенкин, у вас любой пост сводится к непрерывному самовосхвалению. Понятно, что по феншую нужно найти инвестора и уболтать его в лифте дать на голую идею $500K и дальше изображать бурную деятельность, осваивая выделенные средства. Но у меня ситуация другая - я к сожалению не в Силиконке и подобное развитие событий для меня мало реально.
В моей ситуации к сожалению разделить лендинг и само приложение мало реально, т.к. на базу данных завязан тот же биллинг, новостная лента, отзывы пользователей и т.д. Если это убрать, останется только сама красиво оформленная лендинг страница, а стоит ли ради нее городить CMS? Может проще заюзать готовые шаблоны на js/css что я собственно ищу

Так и есть. С другой стороны - вы получаете квалифицированный бесплатный совет так что сак ит ап:)

Разделить я предлагаю не только лендинг а и пользователей. Что бы регистрация, логин, логин с социалками, 10 маркетинг страниц, features, how its works, faq, support, изменение пароля, добавление кредиток, оплата пейпалом, аплоад аватарки, настройка нотификаций, всякие напоминаловки, и админская функциональность всего этого дела было в одной системе/базе. А сам эпп со всеми графиками в другой. И предлагаю именно потому что вы не в силиконке и у вас нет денег. Обычно это более дешовый способ чем всё это писать с нуля. И на это УЖЕ есть готовые темплейты.

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

[OtherSide]

Для меня сейчас задача сделать даже скорее не лендинг и продающую страницу - дело в том что юзеры, которые заходят на мой сайт по ключевым запросам и так похоже понимают что к чему, т.к. лазят по нему по пол часа. Задача скорее в том, что бы скрыть его аматорскую природу и заставить поверить, что над ним работала толпа людей. Если я сделаю отдельную лендинговую страницу, может это и задержит немного случайных посетителей, но не заставит их заплатить больше, потому что на основном сайте все равно видно будет аматорство. Моя задача придать презентабельный вид тому, что есть. По функционалу большинство юзеров и так счастливы, но я часто вижу на отзывах на форумах что дескать доверия к сайту нет, не понятно кто и как им занимается и т.п.
Изучить less и прочую лабуду в общем не проблема, но нормальный дизайн я все равно сам не нарисую, поэтому как я писал я ищу нечто вроде cms конструктора - готовые куски дизайна, которые можно внедрить в мой код. По вашей ссылке вроде бы нечто похожее на то, что мне нужно, но не ясно насколько оно юзабельно и легко ли его подружить моим кодом. У меня в принципе все достаточно гибко - по сути singlepage app которое разговаривает с сервером исключетельно jsonами, но я уже использую фреймворк kendo, не знаю на сколько он сможет подружится со сторонним стилем

[stenking]

Ну тогда вам может и дизайнер не нужен. Найдите просто нормального фронт-дев - он разберётся в ваших темплейтах и кендо и всё это дело сильно улучшит. Особого дизайна не будет но смотреться и работать будет на порядок профессиональнее. Цена вопроса в России для вашего сайта до 1К. Сами вы будете возится много дольше потому что изучить лесс и прочую лабуду как раз и есть проблема которая занимает годы работы.

[OtherSide]

Ну тогда вам может и дизайнер не нужен. Найдите просто нормального фронт-дев - он разберётся в ваших темплейтах и кендо и всё это дело сильно улучшит. Особого дизайна не будет но смотреться и работать будет на порядок профессиональнее. Цена вопроса в России для вашего сайта до 1К. Сами вы будете возится много дольше потому что изучить лесс и прочую лабуду как раз и есть проблема которая занимает годы работы.

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

А по цене разработки вы преувеличиваете. Да, найти работу даже 2000 долл в Москве сложно. Но так же сложно найти программиста. Тем более сейчас JS программисты в тренде и самые дорогие. Я провел больше 30 собесдований зимой, прежде чем найти кого то более менее адекватного и то с условием что кендо он только будет учить.
И потому как вы представляете ТЗ. На тебе кучу кода, штуку баксов и немного кривоватый дизайн. Хочу что бы через 2 недели все выглядело прикольно!

[stenking]

Нет таких библиотек. Точнее кендо и есть одна из этих библиотек. Основные игроки это Twitter Bootstrap, Foundation. Есть ещё Semantic UI. Bootstrap самый популярный.

Вам не нужен JS программист. Вам не нужен верстальщик. И вам не нужно ТЗ или дизайн. Вам нужен фронт-энд дев - это чувак который пишет шаблоны, немного знает JS особенно с упором на UI. DOM и обладает чувством стиля. За неделю он перелопатит сайт, переделает все интерфейсы ну и контент подправит - всё будет сильно лучше. И да - это именно так и работает - чего тут городить то.

[Serguei666]

Суть в чем. На данном этапе я хорошо разбираюсь как делаются сайты технически. Понимаю как связать БД, ORM, application server. Умею делать фронтэнд. Умею делать web-based mobile apps. Парадокс - приложение для андроид сделал, а сайт красивый не знаю как
https://play.google.com/store/apps/deta ... stockchart" onclick="window.open(this.href);return false;
Но я что-то совесем не въезжаю как быстро сверстать собственно сам сайт.
Вот дизайн типа такого меня устроил бы http://rv9cohj74.ulcraft.com/" onclick="window.open(this.href);return false;
Но эта штука крутится на облачной CMS. А как быстро слабать нечто подобное без CMS, ибо будут свой сервер, свои данные и проч.
Может быть какие-то js фреймворки есть, которые позволят быстро делать модные нынче прокручивающиеся сайты типа такого https://pondmobile.ru/" onclick="window.open(this.href);return false;
Может фреймворки какие-то есть, которые добавляют функционал собственной CMS, готовые модули для отзывов пользователей, новостной ленте и т.п.
Или без CMS оно долго и мутроно ручками набивается - база, апп. сервер, верстка, стили и т.п.

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

[OtherSide]

Нет таких библиотек. Точнее кендо и есть одна из этих библиотек. Основные игроки это Twitter Bootstrap, Foundation. Есть ещё Semantic UI. Bootstrap самый популярный.

Вам не нужен JS программист. Вам не нужен верстальщик. И вам не нужно ТЗ или дизайн. Вам нужен фронт-энд дев - это чувак который пишет шаблоны, немного знает JS особенно с упором на UI. DOM и обладает чувством стиля. За неделю он перелопатит сайт, переделает все интерфейсы ну и контент подправит - всё будет сильно лучше. И да - это именно так и работает - чего тут городить то.

Если глянуть сейчас на новомодные сайты - то они похожи друг на друга как 2 капли воды по сути. Картинка на весь экран, стрелочки которые их пролистывают, видео фоном или эффект паралакса (фон сдвиагается при прокручивании). Я представляю как это сделать ручками, но наверняка же есть шаблоны, раз их юзает каждый второй

[OtherSide]

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

Ну я могу конечно через copy=paste забрать куски HTML и CSS кода, просто это сложно будет поддерживать. Да и нафига ломиться через открытыю дверь и реверс инженерить чужие сайты если эти библиотеки возможно в открытом коде все и так лежат, еще с примерами и документацией.

[BronenosezPotemkin]

Если глянуть сейчас на новомодные сайты - то они похожи друг на друга как 2 капли воды по сути. Картинка на весь экран, стрелочки которые их пролистывают, видео фоном или эффект паралакса (фон сдвиагается при прокручивании). Я представляю как это сделать ручками, но наверняка же есть шаблоны, раз их юзает каждый второй

Ну так Вам же пишут - bootstrap - основная масса wеб сайтов его использует. Его преимущество, в том что он подходит и для мобильников, и для планшетов, и для pc.
http://getbootstrap.com/" onclick="window.open(this.href);return false;

[Serguei666]

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

Ну я могу конечно через copy=paste забрать куски HTML и CSS кода, просто это сложно будет поддерживать. Да и нафига ломиться через открытыю дверь и реверс инженерить чужие сайты если эти библиотеки возможно в открытом коде все и так лежат, еще с примерами и документацией.

Конечно есть и конечно лежат. За layout отвeчает Bootstrap, а за JS код - что-нибудь типа jQuery/DoJo/AngularJS

У меня на работе меня недавно оторвали от C/C++ и привлекли к изготовлению простого сайта, пришлось изучать минимальные основы. После изучения я теперь, глядя на сайты, вижу, что bootstrap очень популярен.

[Serguei666]

Нет таких библиотек. Точнее кендо и есть одна из этих библиотек. Основные игроки это Twitter Bootstrap, Foundation. Есть ещё Semantic UI. Bootstrap самый популярный.

Вам не нужен JS программист. Вам не нужен верстальщик. И вам не нужно ТЗ или дизайн. Вам нужен фронт-энд дев - это чувак который пишет шаблоны, немного знает JS особенно с упором на UI. DOM и обладает чувством стиля. За неделю он перелопатит сайт, переделает все интерфейсы ну и контент подправит - всё будет сильно лучше. И да - это именно так и работает - чего тут городить то.

Если глянуть сейчас на новомодные сайты - то они похожи друг на друга как 2 капли воды по сути. Картинка на весь экран, стрелочки которые их пролистывают, видео фоном или эффект паралакса (фон сдвиагается при прокручивании). Я представляю как это сделать ручками, но наверняка же есть шаблоны, раз их юзает каждый второй

Вот сайт, который вы сказали вам нравитсся: http://rv9cohj74.ulcraft.com/" onclick="window.open(this.href);return false;
Смотрим на исходники. Строчка в самом начале: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> означает, что используется bootstrap.

[stenking]

Нет таких библиотек. Точнее кендо и есть одна из этих библиотек. Основные игроки это Twitter Bootstrap, Foundation. Есть ещё Semantic UI. Bootstrap самый популярный.

Вам не нужен JS программист. Вам не нужен верстальщик. И вам не нужно ТЗ или дизайн. Вам нужен фронт-энд дев - это чувак который пишет шаблоны, немного знает JS особенно с упором на UI. DOM и обладает чувством стиля. За неделю он перелопатит сайт, переделает все интерфейсы ну и контент подправит - всё будет сильно лучше. И да - это именно так и работает - чего тут городить то.

Если глянуть сейчас на новомодные сайты - то они похожи друг на друга как 2 капли воды по сути. Картинка на весь экран, стрелочки которые их пролистывают, видео фоном или эффект паралакса (фон сдвиагается при прокручивании). Я представляю как это сделать ручками, но наверняка же есть шаблоны, раз их юзает каждый второй

Нет, никаких дополнительных шаблонов нет да и не нужно. У Бутстрапа есть themes ( цветовые сеттинги ) - можно их использовать сразу. А разметка и т.д. это всё уникально для каждого сайта. Где-то слайдер, где-то крутилка, где-то просто текстовые блоки, где-то картинка на весь фон. Бутсрап это коллекция UI елементов, начиная от разметки и кнопок и заканчивая более сложными селекторами или блоками ( меню например или слайдер ). Если чего нет то обычно есть плагин какой-то.