Ищем идеи дизайна. . . Пожалуйста

Я состою в клубе радиоуправляемых самолетов, и их веб-сайт нуждается в обновлении/пересмотре. Сайт не подвергался капитальному ремонту уже несколько лет, и он уже давно назрел.

Сегодня я здесь в поисках некоторых дизайнерских идей, которые, сохраняя простоту и удобство навигации, придали бы ему более актуальный и современный вид. Вы можете увидеть на http://test.allvixen.com/revised/revised-2.jpg

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

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

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

Не думайте о реальном дизайне: если сайт правильно закодирован, изменение дизайна — это небольшая задача (вы просто меняете CSS), поэтому правильное понимание основ (серверный код и HTML) гораздо важнее.

задача.

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

Но да, Wordpress, вероятно, можно настроить так, чтобы он идеально соответствовал вашим потребностям.

Базовый вид выглядит как главная страница с боковой панелью — Wordpress из коробки.

События? Проверять.

Легко обновляется через интерфейс администратора? Проверять.

Создавать/обновлять учебные пособия и подобные элементы на подстраницах? Проверять.

Страница с картой? Проверьте (легко делается через плагин). И так далее, и так далее.

На самом деле, глядя на код сайта, он действительно не так уж и плох.

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

Я бы порекомендовал вам, возможно, немного почитать об отзывчивости и посмотреть, сможете ли вы заставить что-то работать с уже имеющимся у вас кодом, внеся некоторые незначительные изменения и переписав CSS.

Посмотрите здесь для начала: http://www.cutcodedown.com

@deathshadow, хочешь посмотреть? (Да, я знаю, что мы упомянули WP, но забудьте об этом — код не так уж и плох — основан на XHTML Strict)

Сделайте несколько фотографий потрясающе выглядящих самолетов в небе в высоком разрешении.

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

Это легко сделать и выглядит потрясающе.

Ах, я мог бы сделать ляп. Попробуй это:

 
.ws_images > div:not(.ws_controls):not(.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }

Код (разметка): И поместите его в самый конец CSS-файла, чтобы не вставить его перед другими правилами, относящимися к тем же элементам.

Мой совет: избавьтесь от раздутого и глупого слайдера, тратящего впустую пропускную способность.

такая вычурная чушь может быть визуально впечатляющей, но она также может разозлить или даже отпугнуть посетителей - ОСОБЕННО, если у вас это первый чертов контент.

на сайте, помещая ФАКТИЧЕСКИЙ контент под сгиб. Добавление ползунка там, где вы находитесь, — это шаг назад в тысячу раз.

Особенно такой неумело закодированный, как этот.

Если какой-либо слайдер заставляет вас жестко запрограммировать в разметке маленькие кружочки-селекторы? Это мусор! Но тогда все слайдеры — это мусор, которому не место на ЗАКОННЫХ веб-сайтах.

ОСОБЕННО еще до того, как у вас появится чертов H1. Примечание: тега ВСЕ ЕЩЕ не существует.

Если вам нужно что-то центрированное, сделайте это в таблице стилей! ИМХО вы сделали колоссальные шаги НАЗАД!

Спасибо за ваш вклад, PoPSiCLe.

Пару версий назад я пошел по пути WP, и мне просто не понравилось, как это сработало.

Возможно, я не очень быстро модифицирую WP в соответствии с конкретными потребностями.

Поэтому я сделал сайт с нуля.

В то время я не думал, что это выглядело так уж плохо.

Однако теперь, когда я смотрю на это, оно выглядит очень простым и дилетантским.

Настоящий сайт (вы можете увидеть его по адресу http://thebams.net

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

Возможно, мне нужно еще раз изучить WP и узнать о нем больше, чтобы заставить его работать так, как нужно клубу.

Толкайте, чтобы пихать.

. . Думаю, я мог бы просто почистить код и продолжить.

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

PoPSiCLe, я согласен, что код не так уж и плох, учитывая, что я написал его около 5 лет назад и ничего не знал по сравнению с тем, что знаю сейчас.

Я просматривал код, и мне нужно его очистить и сделать отзывчивым.

Думаю, у меня есть идея, как сделать его отзывчивым, но я не уверен на 100%. Я попробую, как только мы с новым президентом клуба (у меня будут новые президенты - LOL) придем к соглашению об изменениях, которые он хочет видеть.

Если у меня возникнут проблемы с реагированием, думаю, я знаю, где я смогу найти помощь.

Ха-ха-ха! Еще раз спасибо, и я очень надеюсь, что Deathshadow поймет, что вы, ребята, упомянули слово W, а не я.

Поскольку слайдер немного переписывает код, я думаю, вам нужно будет сделать в CSS что-то вроде этого:

 
.ws_images > div:not(.ws_controls,.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }

Код (разметка): он в основном устанавливает закругленные углы поверх каждого непосредственно под .ws_images, но не на элементах управления (кнопках) и заголовке изображения (тексте).

Ну, ПОПСИКЛ. . . Я поместил это в последнюю строку CSS, и мои углы все еще квадратные. Не хочу этого делать, но думаю, что просто покончу с закругленными углами, чтобы изображения в слайдере выглядели правильно. Большое спасибо за Вашу помощь . . .

Спасибо за предложение, Сарак. Я уже пошел по пути WP, и меня ничто особо не волновало. WP действительно не соответствует потребностям клубов, поэтому я собираюсь написать его сам, но еще раз спасибо.

Спасибо, PoPSiCLe.

. . Я включил ваше предложение в свой CSS и с грустью сообщаю, что оно не сработало.

Или я сделал что-то не так.

Ниже я добавил его в свой CSS.

 


#contentWrapper {


max-width: 60em;


margin: 0 auto;


overflow: hidden;


background: #FFF;


-webkit-box-shadow:


0 0 1px 1px #000,


0 0 1.5em 0.1em #321;


box-shadow:


0 0 1px 1px #000,


0 0 1.5em 0.1em #321;


-webkit-border-radius:


1em;


border-radius:


1em;


}


.ws_images > div:not(.ws_controls,.ws-title-wrapper) { border-radius: 1.8em 1.8em 0 0; }


/* column container */


.colmask {


position:relative;


clear:both;


float:left;


width:60em;


overflow:hidden;


}

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

. .

Я фанат WordPress для таких ситуаций, как ваша, и есть множество бесплатных шаблонов.

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

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



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

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

вокруг.

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

Фактически, вы действительно сделали то, чего я никогда раньше не видел; ненавижу думать, насколько сильно это, должно быть, нейтрализовало ваш путь обновления. На самом деле, ваша концепция jpeg (которая на самом деле не является дизайном) не НАСТОЛЬКО плоха.

НЕ то, что возня с программой рисования - это веб-дизайн, но там нет ничего, что нельзя было бы спасти.

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

Если вы выбрали для меню соотношение сине-зеленого цвета 1:2:3, например #248 или даже #369, я думаю, это поможет лучше объединить дизайн, особенно если вы выбрали соотношение 0:+1:+2. соотношение или соотношение 2:4:5 для области заголовка.

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

Я не призываю бездельничать с рисованием картинок, потому что, ИМХО, контент должен определять разметку, а контент + разметка должны определять макет.

Только после того, как у вас будет правильный полужидкий эластичный адаптивный дизайн, вам следует ДУМАТЬ о цветах, границах и презентационных изображениях.

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

Создавайте постепенно, напишите контент или разумную копию будущего контента без HTML в логическом порядке СНАЧАЛА, затем примените свои семантические теги (все, кроме DIV и SPAN), чтобы сказать, что есть или будет в профессионально написанном документе - только один раз.

у вас есть это, вы начинаете добавлять DIV и CSS для создания своего макета.



Я предлагаю начать СНАЧАЛА с устаревшего макета рабочего стола, поскольку вы не можете нацелиться на него конкретно с помощью медиа-запросов, и легче удалить / переупорядочить такие вещи, как столбцы и презентационный мусор, с помощью медиа-запросов, чем каким-то волшебным образом создать макет рабочего стола, когда невозможно сказать: «Это для устаревших настольных компьютеров, а не для современных браузеров CSS3». (Вот почему я говорю, что дизайн «сначала мобильные» — это отстой!) В заголовке я бы не хотел, чтобы логотип и текст отображались одновременно.

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

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

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

Широкое изображение клуба (например, состав самолетов и участников) с градиентным плавным переходом в логотип также может помочь украсить заголовок.

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

напоминает нашивку служащего заправочной станции 1950-х годов.

Это требует помощи/модернизации. Я бы также рассмотрел возможность создания фона во всю ширину с макетом стиля контента с ограниченной шириной.

Учитывая характер контента, я не думаю, что ограниченный «коробочный» макет будет для него полезен.

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

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

Согласно вашему требованию, 1. вам лучше использовать дизайн WordPress для своего сайта, 2. Создайте сайт шириной не менее 1000 пикселей и удобный для мобильных устройств. 3. Соберите качественные фотографии