Який типовий приклад дизайну веб-сайту старої школи? [зачинено]


12

Я хочу створити веб-сайт для ретро-речі, яка була популярною в середині 90-х (початок комерційного Інтернету).

Тому я хочу використовувати старі конструкції, які були дуже популярні в той час.

Перше, що мені спадає на думку, були ті " under construction" анімовані gif-файли. Люди часто скрізь ставлять анімовані gif-файли.

alt текст

Але й ті жахливі фони, що повторюються .

Так що так, я хочу, щоб мій веб-сайт виглядав саме так у середині дев'яностих;)

(будь ласка, запропонуйте практичні та корисні функції. Я думаю, що меню Java-аплетів не працювало б сьогодні, або сказати внизу, що цей веб-сайт оптимізовано для Netscape 3)

EDIT : для тих, хто хоче побачити результат: ретрологія


Оскільки немає жодної правильної відповіді, я зробив цю вікі спільноти
Джон Конде

Відповіді:



6

"Стиль" веб-сайту початку-середини 90-х - це в основному веб-сайт без будь-якого стилю. Зберегти на пропускній спроможності, а також через технічні обмеження веб-стандартів (або їх відсутність) звичайно. Візьміть оригінальний макет Amazon (1995):
alt текст

Це не повинно бути галасливим і з тоннами анімованих GIF або знаків, що будуються (вони були загальним явищем, але не на діючих веб-сайтах бізнесу).

Ще одним хорошим прикладом може служити pets.com (1998-2000), який виграв чимало нагород рекламної індустрії за свій дизайн веб-сайтів. Але я не можу знайти скріншот.

У будь-якому випадку, хоча сьогодні більшість з них вважатиметься поганим дизайном, все ще є як хороші, так і погані веб-дизайни 90-х. Наприклад, сірий фон є досить "ретро", як і 256-кольорова палітра, веб-графіка в стилі графічного стилю 90-х років і обличчя типу Times New Roman. Рамки також є хорошим відказом, як і посилання на ховрахи та лічильники хітів. Але такі речі, як фонова музика midi, зіткнення кольорів денного глобусу, акціонерні анімовані GIF тощо, більш характерні для поганих дизайнів, ніж веб-дизайн 90-х загалом.


2
сірий фон,
графічні картини

Боже мій! +1
Дрю

Не забувайте про літаючого голуба, два подарунки з феєрверків із високим вибухом мінометів з обох боків та моргання тексту, все ще є спосіб імітувати моргання у CSS.
Лабораторії Фіаско

3

Ви можете поглянути на мою домашню сторінку , я це зробив ще в середині 90-х. Використовувати кадри нижнього колонтитулу старого стилю з останніми оновленнями добре, що браузери сірого фону за замовчуванням мали. Старий іконки браузера. Анімовані GIF були новими і були навколо.

В основному думаю: геогради / ангелфір.


Мені подобається завантаження Netscape Navigator.
Марко Демайо

+1 за згадку про <hr>'s
Stephan Muller

2

Якщо ви плануєте зробити відкат "особистої домашньої сторінки", забудьте про використання будь-якого з цих фантазійних "каскадних таблиць стилів" - вони вам не знадобляться.

Відкрийте улюблений редактор WYSIWYG (Microsoft Word зробить за дрібницю) і зберіть щось із великою кількістю барвистого тексту та сміливого використання шрифтів (коли сумніваєтесь, займіться Comic Sans).

Не забудьте використовувати графіку з "безпечною веб-палітрою", і так, вам знадобиться безліч анімованих файлів .GIF.

Якщо ви хочете кілька прикладів того, як виглядали бізнес- сайти, вам, мабуть, краще вибрати назви кількох марок, які існують і сьогодні, та відвідати машину Wayback .


1

Перший сайт, який мені спадає на думку, - http://webpagesthatsuck.com/

Подивіться на стару шкільну категорію. До речі, цей сайт є приголомшливим як його пропозиція: вивчіть дизайн за допомогою того, що НЕ роблять зразки.


Завдяки вашому посиланню, я знайшов цю сторінку: webpagesthatsuck.com/does-my-web-site-suck/…

Поганий веб-дизайн! = Веб-дизайн 90-х. І на цьому сайті є багато надмірних узагальнень та помилкових / застарілих порад, а також нітпіків, які не мають нічого спільного з дизайном. ІМО, набагато практичніше вивчити загальні принципи дизайну та найкращі практики, а не намагатися перерахувати та запам'ятати всі мільйони способів викрутити веб-сайт.
Lèse majesté

1
  • Зображення власника веб-сайту
  • Під будівництво анімований gif
  • видно лічильник ударів
  • видимі таблиці
  • повторювані фони
  • однопросторові шрифти
  • загальні кольори посилань (синій, фіолетовий, червоний)
  • випадаючі меню
  • що робить кожен пункт меню різним кольором
  • марковані списки
  • "Клацніть тут!" - посилання
  • Картинки
  • фонова музика
  • гротескний макет (все рівномірно відстане / має однаковий розмір)
  • Шрифт Times New Roman
  • важкі, майже психоделічні градієнти
  • межі навколо зображень
  • все геоцити, в основному


1

Використовуйте Інтернет-зворотний автомат за адресою http://archive.org/web/web.php . Ви можете шукати будь-який сайт і бачити часовий графік того, як він розвивався за ці роки. Класичними прикладами, звичайно, є Yahoo, Google тощо тощо, але ви також можете вибрати блог, як Scobelizer тощо, і спостерігати, як він розвивався.

Якщо ви знаєте основні етапи історії веб-переглядачів (Netscape, IE 5, Mozilla, Firefox, Chrome, webkit), ви можете переглянути ці дати і подивитися, як розвиваються сайти, щоб отримати нову функціональність.


0

Я пам’ятаю кілька речей:

  • Більшість із них, як правило, використовують рамний дизайн.
  • Вони часто зустрічалися, щоб вам сказати This page has been visited xxx times.
  • Вони були схожі на сторінки Geocities.

Для останнього пункту Geocities більше не існує, однак вони є деяким веб-сайтом, який знову розміщує вміст географічних міст. Ви можете поглянути на них, щоб отримати більше ідей.


мухахахахаха лічильники. МЕНІ ЦЕ ПОДОБАЄТЬСЯ. Я використовував для них деякі стилі. Вони все ще з’являються, коли ви вводите моє (справжнє) ім’я в google.


0

Цікаво, я думаю, що ви можете досягти своєї мети без навмисної стрілянини по потворних речах, на кшталт класичного автомобіля, який не є Pinto. Це не так приємно, як нові речі, але ви можете оцінити його в контексті дня.

Я пам'ятаю деякі речі:

  • Посилання повинні бути підкреслені, синього кольору; відвідали фіолетові. (все ще поширена)

  • Сірий фон - обов’язковий.

  • Як уже згадувалося, кадри були дуже поширеними.

  • Звертайтеся до нас, часто мали анімований конверт.


0

Ви забули, що у вас повинна бути цільова сторінка, на якій ви можете вибрати "Переглянути сайт з кадрами" або "Переглянути сайт без кадрів"!


Подібні до "високої швидкості" та "низької швидкості"

0

Зробіть ці зображення низької роздільної здатності, зроблені з MSPaint або чогось іншого! Бічні панелі з градієнтами з низькою роздільною здатністю також будуть працювати! Дратівливі яскраві кольори, а також тонни мерехтливих gif з дуже повільним розвитком та петельними рекламами, безумовно, кричать "Інтернет @ 90-х". Нічого собі, я раптом відчув ностальгію за старими часами, переглянувши посилання П'єра. Цікаво, як вийшло б, якби один з найпопулярніших сайтів соціальних мереж сьогодні був розроблений протягом 90-х. Уявіть, FB, схожий на сайт з географічних районів LOL.


0

Не забувайте мати якийсь javascript, який слід за курсором. Можливо, пара очей, якісь снігові пластівці, що завгодно.

І це був той період, коли відбувалися автовідтворення файлів midi?


Найближчим часом був аналоговий годинник, який би спотворював міру переміщення, зроблений в Microsoft jscript.
Лабораторії Фіаско
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.