نمونه های طراحی وب سایت, وبسایت و پروفایل شخصی داود جمیری

40 صفحه خطای Clever 404 از وب سایت های واقعی

اجرای یک وب سایت موفق به معنای هوشیار ماندن در برابر خطاهایی مانند خرابی صفحات یا کندی عملکرد است. با این حال ، گاهی اوقات مشکلاتی وجود دارد که نمی توانید از آنها اجتناب کنید ، و خطاهای 404 یکی از آنها است.

404 هنگامی رخ می دهد که کاربر صفحه ای را در وب سایت شما درخواست می کند که وجود ندارد ، بنابراین صفحه خطای 404 را پرتاب می کند و باعث می شود کاربران به مکان مناسب بازگردند. صرفنظر از این که چقدر منابع را برای اطمینان از تضعیف وب سایت خود در نظر می گیرید … همیشه این احتمال وجود دارد که کاربران به اینجا بیایند.

ناخوشایند است ، اما واقعیت زندگی است. و عکس العمل بازدیدکنندگان هنگام ورود به صفحه ای که وجود ندارد می تواند از “قدم برداشتن” تا “به کلی از دست دادن ذهن” متغیر باشد.

در حالی که هیچ کاری نمی توانید در مورد مورد اخیر انجام دهید ، می توانید با داشتن یک پیام خطای 404 خلاقانه کمی درد را کاهش دهید. این می تواند باعث ایجاد شگفتی شود تا بازدیدکنندگان وب سایت شما در شرایط ناامید کننده لبخند بزنند.

برای به دست آوردن آب میوه های طراحی وب سایت ، این پست برخی از موارد مورد علاقه ما را به نمایش می گذارد صفحات خطای وب سایت امیدوارم بتوانید چند ایده را برای فاش کردن پیام 404 خود حذف کنید.

Free Download: 77 Examples of Brilliant Web Design 

خطای 404 چیست؟

خطای 404 یک کد پیام خطای HTTP استاندارد است که به این معنی است که وب سایتی که سعی می کردید به آن دسترسی پیدا کنید در سرور یافت نشد. این یک خطای سمت مشتری است ، به این معنی که یا صفحه وب حذف یا منتقل شده و URL مطابق آن تغییر نکرده است ، یا شخص فقط URL را اشتباه تایپ کرده است.

در بیشتر موارد ، می توانید سرور خود را برای ایجاد صفحه خطای 404 سفارشی پیکربندی کنید. (اگر مشتری HubSpot هستید ، برای آشنایی با نحوه سفارشی کردن صفحه 404 خود در HubSpot اینجا کلیک کنید.)

برخی از صفحات خطای 404 سفارشی شده شامل تصویر قهرمان ، شرح شوخ طبعی ، نقشه سایت ، فرم جستجو یا اطلاعات اصلی تماس می شوند.

بهترین نمونه های صفحه وب 404

در طول این سالها ، وب سایت ها روشهای متفاوتی برای اطلاع بازدیدکنندگان از خطای 404 پیدا کرده و آنها را به مکان مناسب بازگردانده اند ، برخی به سادگی ، برخی خلاقانه و برخی خنده دار. بیایید با نگاهی به برخی از صفحات 404 خلاقانه شروع کنیم ، سپس برخی از نمونه های خنده دار را که مطمئناً هر کسی که با آنها مواجه می شود ، خوشحال می کند ، بررسی کنید.

صفحه پیدا نشد: صفحات خطای TK Creative 404

1. کدو تنبل

در حالی که یک صفحه 404 می تواند به راحتی از یک وب سایت خارج شود ، صفحه خطای Pipcorn کاملاً با بقیه مارک های سایت مطابقت دارد. یک پس زمینه متحرک زیبا ، یک متن دوستانه که بازدیدکنندگان را به جستجوی وب سایت راهنمایی می کند (همراه با یک کلمه هوشمندانه) ، و یک قطعه ذرت بوداده به عنوان “0” در “404” استفاده می شود.

404 error page example from the website pipcorn

2. Spotify

غول پخش موسیقی Spotify پایه های خود را با صفحه هوشمند 404 پوشانده است. این وب سایت با یک کلمه تیز هوشانه از آلبوم “808s and Heartbreak” کانیه وست و یک انیمیشن ضبط شده ، بازدیدکنندگان را به طور مختصر سرگرم کرده و سپس به صفحه ای که از آن آمده اند باز می گرداند.

404 error page example from the website spotify

3. به طور کلی

یک راه ساده برای کاهش تنش در صفحه 404 شما افزودن سریع “اوه!” پیام – با راهنمایی کاربران به مکان مناسب ، به سایت شما کمک می کند تا شخصیت خود را بیشتر نشان دهد. در مورد سایت Genially ، صفحه همچنین دارای یک تصویر زیبا است که با چند نسخه بازیگوش همراه شده است.

404 error page example from the website genially

4. Adobe

همانطور که انتظار داشتید ، صفحه خطای Adobe 404 هم مفید است و هم از نظر بصری خوشایند است. در آن پیوندهای محبوب که ممکن است بازدیدکنندگان در کنار برخی از آثار هنری دیجیتالی جالب به عنوان استعاره بصری برای یک صفحه شکسته یا از دست رفته مورد استفاده قرار گیرند ، فهرست شده است. صادقانه بگویم ، وب سایت ها باید بیشتر از استعاره های بصری استفاده کنند.

404 error page example from the website adobe

5. Clorox

صفحه 404 برای محصولات تمیز کننده Clorox بین سه عکس سبک قلب می چرخد ​​تا به بازدیدکنندگان نشان دهد که آنها اشتباه کرده اند. استفاده هوشمندانه از مارک تجاری برای افزودن لحظه ای لذت بخش در حالی که به کاربران از دست رفته کمک می کنید.

404 error page example from the website clorox

6. مجموعه دوما

در مواقع دیگر ، ممکن است نیازی به یک تصویر مضحک نداشته باشید – فقط به بازدیدکنندگان بگویید که هیچ صفحه ای در آدرس وجود ندارد و بگذارید آنها حرکت کنند. آژانس مشاوره سرگرمی Duma Collective این کار را با صفحه خطای خود انجام می دهد ، اگرچه با یک تصویر پس زمینه برای برخی از استعدادهای جزئی تکمیل می شود.

404 error page example from the website duma collective

7. Chillhouse

با صحبت از استعداد ، برند مراقبت از خود Chillhouse کارهای بیشتری انجام داده است تا بازدیدکنندگان خود را با سبک جدید تغییر مسیر دهد. صفحه 404 مارک مناسبی دارد و حتی بازدیدکنندگان را در سفری کوچک از طریق چند عکس ثابت قبل از بازگشت به صفحه اصلی .

404 error page example from the website chillhouse

8. ​​کمی

اگر پیوند Bitly اشتباه وارد کنید ، به صفحه 404 Bitly منتقل می شوید. ما فرض می کنیم که این مقدار منصفانه اتفاق می افتد ، به همین دلیل است که صفحه 404 مستقیماً به اصل مطلب می رسد. این توضیح می دهد که چه چیزی ممکن است اشتباه شده باشد و کاربران را مجبور می کند تا در صورت تمایل به صفحه اصلی Bitly مراجعه کنند.

404 error page example from the website bitly

9. Ikea

صفحه 404 Ikea به طور مشابه مینیمالیستی است اما هنوز هم می تواند برخی از مارک های هوشمند را در آنجا پیدا کند. این مثال نشان می دهد که صفحات خطای شما نیازی به تفصیل ندارد تا نکته را به خوبی بیان کنید ، اما تزریق سرگرمی نیز اشکالی ندارد.

404 error page example from the website ikea

10. شرکت طراحی Moxie

مطمئناً “انفجار اینترنت” ممکن است کمی هذلولی باشد ، اما به بازدیدکنندگان می گوید که Moxie Design Co. با لغزش های کوچکی مانند این ، خود را چندان جدی نمی گیرد. همچنین ، یک نوار جستجو به راحتی در پایین قرار داده شده است تا شما را در مسیر خود بفرستد.

404 error page example from the website moxie design

11. McKissack & McKissack

آه ، ترفند کلاسیک “صفحه را گم کردیم”. باز هم ، راهی آسان برای ارائه 404 بدون بیگانگی مخاطبان. اگر سازمانی مانند McKissack & McKissack هستید که بسیاری از تعاملات مشتری را مدیریت می کند ، کپی واضح و مختصر برای همه صفحات سایت شما ، از جمله صفحات خطا ضروری است.

404 error page example from the website mckissack and mckissack

12. ترفندهای CSS

آیا تا به حال بسته بندی یک وب سایت را پاره کرده اید تا ببینید در زیر چه چیزی وجود دارد؟ این همان مفهومی است که CSS Tricks در صفحه خطای 404 خود دنبال می کرد. این هم بذله گو است و هم یادآور چیزی است که وب سایت در مورد آن است: استفاده هوشمندانه از طراحی صفحه.

404 error page example from the website css tricks

13 بازیهای خوب قدیمی

برای وب سایت های دیگر ، قسمت جلویی را باز می کنید و … فقط خالی فضا وجود دارد. این صفحه مرجع هوشمندانه ای برای GOG Galaxy است که مشتری اصلی بازی های ویدیویی Good Old Games است. خوشبختانه یک شخصیت بازی ویدئویی کوچک وجود دارد تا در صورت تمایل مکانی برای گزارش خطا به بازدیدکنندگان ارائه دهد.

404 error page example from the website good old games

14. Canva

برای چیزی کمی متفاوت ، صفحه 404 Canva را بررسی کنید. این شامل فقط یک پیام خطا نیست ، بلکه یک پازل فریبنده کاشی می تواند برای سرگرمی مختصر بازی کند. این اجازه نمی دهد که بازدیدکنندگان خود را برای چند دقیقه خاموش کنند ، درست است؟

404 error page example from the website canva

15. Innotech

مشابه رویکرد Canva ، Innotech یک بازی Pong-esque را در صفحه 404 خود برای ارائه سرگرمی کوتاه ارائه می دهد. به احتمال زیاد شما یک وب سایت مانند این را به خاطر می آورید. بعلاوه ، این مسیر سرگرم کننده مکمل یک وب سایت واقعاً چشمگیر است – به طور جدی ، وقتی بازی را به پایان رساندید ، به صفحه اصلی بروید و همه چیز را وارد کنید.

404 error page example from the website innotech

16. تعداد زیادی

آژانس ویدئویی Myriad یک صفحه 404 عجیب و غریب را انتخاب کرده است که از نوارهای رنگی SMPTE کلاسیک که در نوارها و تلویزیون های قدیمی ظاهر می شود تقلید می کند. این یک بازگشت خنده دار به فناوری های قدیمی است در حالی که نمایانگر مشکل مدرنتر یک صفحه وب موجود نیست.

404 error page example from the website myriad

17. KonMari

Known for her popular cleaning and organization methods and brand, Marie Kondo has brought a similar feel to her website’s 404 page. The copy briefly and humorously harkens back to her tidying philosophy — a small but well-branded detail that fans will recognize.

404 error page example from the website mario kondo

18. BrandCrowd

Not only is the illustration on this error page detailed and engaging — the copy is clever, too. We love the reference to the Semisonic song “Closing Time”: “You can click anywhere else, but you can’t click here.”

404 error page example from the website brandcrowd

19. Hot Dot Productions

Hot Dot’s error page stays true to its tagline, “the intersection of new technologies and design.” The page is animated by hundreds of tiny dots that change direction in response to where you move your cursor. It’s mesmerizing and a great showcase of the agency’s design capabilities.

404 error page example from the website hot dot

20. OrangeCoat

If you’re going to give an error message, why not entertain the user for a few seconds while you help them out? Following a friendly greeting, OrangeCoat offers a flowchart that actually helps users figure out why they reached an error page in the first place.

404 error page example from the website orangecoat

21. Ervin & Smith

This 404 page does more than redirect users back to active pages. Instead, Ervin & Smith’s 404 page invites you to scroll down and learn why you need a digital marketing agency, and why to choose Ervin & Smith in particular, capped off with a contact form. True to its mission, this agency shows that any page can be a conversion opportunity.

404 error page example from the website ervin and smith

22. DayCloud Studios

… or, your 404 can just be a place to waste time for a minute, as can be seen on the website for DayCloud Studios. Moving the cursor around the screen reveals a 404 message illuminated by lasers shooting from a cat’s eyes. Because why not?

404 error page example from the website daycloud studios

23. Headspace

Another instance of a website smartly incorporating its brand messaging into a 404 page — guided meditation app Headspace makes the effort to calm users, encouraging us to take a deep breath, then return to the main site.

404 error page example from the website headspace

24. Wildwood Bakery

Some websites thus far have integrated clever branded copy in their pages, while others have hosted full-blown online games on theirs. But, there’s nothing wrong with a brief push back in the right direction. Wildwood Bakery’s exquisite site keeps things short and sweet (literally).

404 error page example from the website wildwood bakery

Page Not Found: TK Funny 404 Error Pages

25. Astuteo

Design agency Astuteo’s 404 page is a perfect balance of elegant visuals, humor, and helpfulness. The minimal layout gives users the information they need alongside another amusing visual metaphor, a sinking cargo ship and a fleeing figure.

404 error page example from the website astuteo

26. LEGO

There’s few words needed on LEGO’s 404 error page — the character’s expression makes everything clear. Plus, fans of the LEGO movie franchise will enjoy the fun reference in the copy.

404 error page example from the website lego

27. Magnt

In this funny error message, Magnt pokes fun at the fact that, yes, they could have broken something — or, you just can’t type. The visual serves as a quick way to quickly illustrate their point.

404 error page example from the website magnt

28. IconFinder

IconFinder’s error page is simple but delightful. The company’s mascot wearing a robe and appearing weary is a relatable nod to lost visitors. No worries though, since the site lists some of its links to visit down below.

404 error page example from the website iconfinder

29. Sweet Dreams

Apparently, the team at sleep aid company Sweet Dreams took too many of its products according to the website’s 404 page. Not only is this page humorous — it also blends well with the rest of the site’s front-end aesthetic and messaging for a cohesive feel.

404 error page example from the website sweet dreams

30. GitHub

The line “These aren’t the droids you’re looking for” refers to Obi-Wan Kenobi’s Jedi mind trick on Stormtroopers in Star Wars Episode IV, and it’s become a well-known phrase used to tell someone they’re pursuing the wrong course of action. GitHub plays on this famous line in their 404 error message.

404 error page example from the website github

31. Patagonia

Patagonia’s custom 404 page captures the brand’s vibe perfectly, complete with a boomerang video of a frisbee twirler, a clever pun combining “404” and “aloha,” and links to its product pages. It’s a friendly and funny way to greet visitors who wound up in the wrong place.

404 error page example from the website patagonia

32. Cloud Sigma

Check it out: Cloud Sigma’s letting us in on some behind-the-scenes action. Their 404 error page pretends to be a “junior developer’s homepage” — that junior developer being, well, a cat.

404 error page example from the website cloud sigma

33. AMC Theatres

You might have been to an AMC movie theater before, but you’ve hopefully never seen their website’s 404 page. The website makes use of a quick, funny, and relevant one-liner before it sends you back to the right place.

404 error page example from the website amc

34. Bruno

It’s no coincidence that creative agencies are great at coming up with cool 404 pages. Here’s another one from the creatives at Bruno that plays off the 2000 cult comedy classic Dude, Where’s My Car? No, it has nothing to do with the company or website, but it’s sure to get a chuckle.

404 error page example from the website bruno

35. NPR

At first, NPR’s error page seems like nothing special. But keep reading and you’ll see how they cleverly link to some of their great stories about lost people, places, and things, like a piece on Amelia Earhart and one on Waldo. This might just make lost users feel a little less alone.

404 error page example from the website npr

36. Medium

Medium takes a similar approach to NPR’s 404 page, recommending articles about getting lost and losing things. Check these articles out if you have time — they’re quite good reads.

404 error page example from the website medium

37. HomeStarRunner

HomeStarRunner.com, home to a Flash-animated cartoon series, has had a series of hilarious 404 error pages over the years. The most recent features characters from the cartoon series in a scene that could’ve come straight out of one of their episodes. If you turn the sound on when you load the page, you’ll hear their character Strong Bad — known for yelling phrases out loud — saying, “404’d!”

404 error page example from the website homestarrunner

38. Blizzard Entertainment

Here’s a simple idea that ends up looking slick: Blizzard Entertainment’s 404 page features an animated character lost in an actual blizzard and some humor that World of Warcraft fans will appreciate.

404 error page example from the website blizzard entertainment

39. Hello Big Idea

A quick trip around marketing and social media experts Hello Big Idea’s website will tell you what you need to know about its bold and blunt style of copy. And, of course, its 404 error page is no exception.

404 error page example from the website hello big idea

40. HubSpot

It happens to us, too! This is the message we put up to tell our site visitors that there are some website issues. Our goal was to stay true to HubSpot’s brand voice by being as lovable, empathetic, and helpful as possible.

404 error page example from the website hubspot

Turn a 404 Error Page Into a Delight Moment

Nobody wants to land on a 404 page — they’re annoying and unexpected. However, you can’t really avoid them, so it’s always a good idea to have a 404 page to fall back on for your website.

And, from a user experience perspective, your 404 page should be a small speed bump, not a brick wall. The right design can be the difference between a frustrated bounce and a possible conversion, so why not make it fun?

Editor’s note: This post was originally published in December 2015 and has been updated for comprehensiveness.

examples of brilliant homepage, blog, and landing page design

نوشته ها مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *