Страхотен дизайн в дивата природа: Sevenly.org
От време на време попадам на сайт, който има един или два наистина вдъхновяващи бита на дизайна и потребителския интерфейс, които са достатъчно добри за мен, за да пиша за тях. В дори по-редки случаи намирам цял сайт, който просто е толкова препълнен с уникално страхотни дизайнерски идеи, че трябва да го споделя с вас. Тази статия е за един такъв сайт.
Sevenly.org е сайт, посветен на подпомагане на благотворителни организации чрез продажбата на персонализирани тениски с ограничено издание. Отвъд факта, че обичам организацията и това, за което се застъпват, аз съм взривен от това, което са направили със сайта и смятам, че той служи като средство за обучение на уеб дизайнерите. Нека да разгледаме!
Разгледайте дизайнерските ресурси
Запознайте се Седем
Мисията на Sevenly е проста: „Да се използва силата на изкуството и общността да се изгради устойчива осведоменост и финансиращи движения, които подкрепят благотворителните организации в техните усилия за промяна на света.
На практика как изглежда това, те продават супер страхотни продукти (тениски, суитчъри, бутилки с вода и т.н.) и даряват 7 долара от всяка покупка на благотворителната организация, която са избрали да подкрепят през тази седмица. Към днешна дата те са събрали почти 600 000 долара за различни благотворителни организации.
Страхотен дизайн
За пореден път каузата и стратегията спечелиха щракване от мен в Twitter, но именно дизайнът ме разточи и ме заинтересува. Както можете да видите на екрана по-горе, началната страница е доста привлекателна.
Той показва продуктите красиво с хубави, големи снимки на добре изглеждащи, усмихнати хора, носещи много привлекателно проектирани дрехи. Оформянето на зидарията придава на страницата органично усещане, а минималният дизайн / цветова схема наистина насочва вниманието ви към тези големи снимки.
Сайтът изглежда страхотно на пръв поглед, но като започнете да го използвате, има толкова много приятни изненади и страхотни малки трикове, че се оказах изгубен, играейки с всяка страница в продължение на няколко минути. Нека да разгледаме някои от интересните щрихи.
Hover Effects Galore
Аз съм голям почитател на ховър ефектите, знам, че те не винаги се превеждат много добре на сензорни екрани, но можете да отчитате това. На работния плот те са един от основните начини за взаимодействие с потребителите на основно ниво.
Sevenly е просто препълнен с хладни ховър ефекти. Малки анимации ви очакват на всеки етап. Започва с визуализации на облеклото на началната страница:
По подразбиране името на продукта и цената са скрити, но щом задръжте курсора на изображението, той се плъзга надолу, за да разкрие тази информация. Преминавайки към страницата на страницата, тук има три бутона, всеки от които се разширява в дълга хоризонтална лента при движение на курсора.
Следвайки същата тема за промяна на размера на елемента при задържане на курсора, малките ленти за споделяне имат и бутони, които стават по-широки, когато задържите курсора върху тях, насърчавайки това, че всички важни щраквания.
Чисто превъртане Вуду
Моето абсолютно любимо нещо за тази страница е превъртащата магия, която се случва на началната страница. Това всъщност е наистина прост ефект, но е толкова добре обмислен, че нямаше как да не се впечатля.
По подразбиране, когато зареждате страницата, това виждате:
Коефициентът е, първата ви реакция ще бъде да превъртите надолу по страницата. Докато правите това, тъмната секция, която описва сайта, става по-къса и по-къса, докато не стане само малка навигационна лента, която остава с вас, докато превъртате.
Голямата част е, че не спира дотук. Въпреки че може да не мислите да го направите, всъщност можете да превъртите нагоре покрай първоначалната начална позиция. Това прави обратното на това, което видяхме преди и разширява затъмнения раздел, за да ви даде повече информация за текущата благотворителност на сайта.
Това е толкова елегантен начин да съхранявате тон информация в малко пространство и постепенно да я разкривате пред потребителите. Просто е достатъчно скрито, че да не ви затрупва, когато зареждате страницата, но просто е достатъчно очевидно, че не можете да я пропуснете, когато превъртите обратно нагоре в началото на страницата след първоначалното проучване.
Числа и споделяне
Като се има предвид, че този сайт е толкова фокусиран върху благотворителността, има две цели, които бяха заложени за дизайна. Можете да кажете, защото те задвижват цялото оформление. Първият е ниво на прозрачност и напредък, съобщени чрез статистиката. Ето колко сме събрали досега, ето какви са нашите целеви суми и т.н.
Втората цел е да се насърчи споделянето доколкото е възможно по човешки начин чрез използване на социалните медии. Има огромна секция за коментари във Facebook, вградена точно в началната страница, и множество други социални бутони и барове около сайта.
Лично докосване
Преминавайки покрай началната страница, невероятният дизайн не спира. Следваща страница е „Екип“, където можете да се срещнете с различни членове, участващи в проекта.
Както преди, тук виждаме някои забавни ефекти на ховър. Всеки член на екипа е показан в кръг, като само главата му се извисява. След като задържите курсора над кръга, те изскачат на поглед с глупаво лице.
Когато погледнах тази страница, разбрах, че тя съдържа още една изненада: фонът всъщност е видео! Това е много фино и може дори да не забележите в началото, което го прави толкова хубаво. Видеото е замъглено и тъмно, така че да не е твърде разсейващо.
Storygraphic
Последното нещо, което бих искал да покажа, е страницата „Нашата история“, която ви разказва малко за това защо е започнато „Седем“. Не се задоволява да направи нещо по начина, по който очаквате, тук екипът на Sevenly реши да ви даде страхотна инфография вместо дълга, скучна история.
Забележете начина, по който е структурирана тази инфографика: проблем срещу решение. Виждате този формат, използван другаде в целия сайт, за да предаде историята зад всяка благотворителна организация. Първо, те заявяват проблем с много прости думи, след това предават как помагат да се реши. Това е освежаващо просто и ясно.
Какво мислиш?
Бих искал да поясня, че никога не съм разговарял със Седемте души, те не са се приближили към мен, за да напиша тази статия, или да се свържат с мен по никакъв начин. Просто наистина оценявам това, което правят, и като човек, и като дизайнер.
Не забравяйте да обиколите Sevenly.org следващия път, когато имате нужда от солидно вдъхновение. Не гледайте, взаимодействайте със сайта и усещайте всички приятни малки дизайнерски щрихи, благодарение на които се чувствате толкова изискани. Освен това, ако сте на пазара за някои тениски, отговарящи на статуса на вашия дизайнер, не можете да победите страхотните дизайни на Sevenly.
