نمونه های طراحی سایت

فهرست مطالب:

نمونه های طراحی سایت
نمونه های طراحی سایت
Anonim

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

اثر جاذبه

موافقم، همه مجموعه‌ای از سایت‌های خاصی دارند که هر روز از آنها بازدید می‌شود. مطمئنم که اکثر سایت های نشانه گذاری شده سایت های مورد علاقه با فیلم، کتاب، اخبار، بازی و غیره هستند. چرا پس از یافتن یک سایت، سعی نمی کنیم مشابه دیگری را پیدا کنیم که شاید بهتر باشد؟ پاسخ ساده است! سایت هایی که ما نشانک گذاری می کنیم برای استفاده راحت هستند - چنین سایت هایی معمولاً دارای ترتیب مناسبی از عناصر ، دسته ها و طراحی دلپذیری هستند که چشم را تحریک نمی کند. این "اثر جاذبه" است، یک بار بازدید از یک سایت به درستی طراحی شده - ترک آندیگر نمی خواهم.

بیایید به مثال دو سایت پلت فرم معاملاتی نگاه کنیم:

سایت های نمونه
سایت های نمونه

بی شک و بدون شک سایت شماره 1 می خواهد هر چه زودتر بسته شود و سایت شماره 2 برعکس می خواهد معطل بماند. چرا این اتفاق می افتد؟ در سایت اول، علاوه بر یک محصول به صورت تصادفی، اشباع بیش از حد رنگ نیز وجود دارد که در مورد سایت دوم نمی توان گفت. چنین ضرب المثل شگفت انگیزی وجود دارد: "آنها با لباس خود ملاقات می کنند ، اما آنها را با ذهن خود می بینند" ، برای سایت ها نیز قابل استفاده است ، فقط به جای لباس یک طرح وجود دارد و به جای ذهن یک ساختار ناوبری وجود دارد. بازدید کننده با ورود به سایت اولین چیزی که می بیند طرح رنگ است و تنها پس از آن به ناوبری داخلی و ساختار سایت توجه می کند.

درک رنگ

قانون اصلی در انتخاب رنگ ها این است که زیاده روی نکنید. گاهی اوقات حتی دو یا سه رنگ به درستی انتخاب شده بیش از اندازه کافی هستند، یک مثال واضح از این سایت fb.ru است. بسیاری از طراحان وب از جدول رنگ های "ایمن" برای طراحی سایت html خود استفاده می کنند.

جدول رنگ های مطمئن
جدول رنگ های مطمئن

Safe به این دلیل نامیده می شود که همه رنگ های نمایش داده شده در اینجا کاملاً توسط همه کاربران به یک روش منتقل می شوند. می توان گفت که این رنگ ها در هنگام ایجاد طرح در سایت استاندارد هستند.

سازگاری رنگ

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

ترکیب رنگ مکمل
ترکیب رنگ مکمل

T. یعنی رنگ مقابل داخل دایره سازگارترین رنگ در نظر گرفته می شود. اگر نیاز به انتخاب 3 رنگ منطبق دارید، از چرخه رنگ نیز استفاده می شود، فقط خط چینش رنگ از قبل تغییر خواهد کرد.

سه گانه - ترکیبی از 3 رنگ
سه گانه - ترکیبی از 3 رنگ

و بسیاری از این دایره ها وجود دارد، می توانید رنگ های مشابه بیشتری انتخاب کنید. به عنوان مثال، چهار.

تتراد - ترکیبی از چهار رنگ
تتراد - ترکیبی از چهار رنگ

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

ساختار داخلی سایت

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

همه عناصر ناوبری باید از قبل در نظر گرفته شوند، و حتی بهتر - یادداشت شوند. ساختارسایت قبل از هر چیز باید برای بازدیدکنندگان قابل فهم و راحت باشد. بسیاری از سایت ها بازدیدکنندگان خود را از دست می دهند فقط به این دلیل که دومی ها هنگام ورود به سایت متوجه نمی شوند کجا و کجا قرار دارد. بدون نیاز به شلوغی با انبوه دکمه ها و آویزان کردن یک دسته از عملکردها. شما همیشه باید از طریق چشمان بازدید کننده نگاه کنید، اگر کاربر به عملکردی نیاز ندارد، بهتر است آن را حذف کنید. مجدداً یک مثال روشن و صحیح از طراحی وب سایت، وب سایت Fb.ru است که تمام بخش ها به گونه ای قابل درک و راحت برای بازدید کننده قرار گرفته اند.

بزرگترین اشتباه

طبق تجزیه و تحلیل متوسط، کاربری که نتواند در عرض 15-30 ثانیه بخش یا اطلاعات لازم را در سایت پیدا کند، معتقد است که این بخش یا اطلاعات در سایت نیست و منبع را ترک می کند. در بیشتر موارد برای همیشه. نمونه بارز یک سایت با ناوبری وحشتناک:

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

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

فرم ثبت نام

یکی دیگر از عوامل مهم و ترسناک در سایت، فرم ثبت نام است. برخی سعی می کنند تقریباً داده های مادربزرگ بزرگ را در پنجره ثبت نام جمع آوری کنند.

فرم ثبت نام اشتباه است
فرم ثبت نام اشتباه است

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

فرم ثبت نام صحیح
فرم ثبت نام صحیح

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

الگوهای وب سایت

اکنون بسیاری از سایت‌ها بر روی سیستم‌های CMS مدرن ایجاد می‌شوند که طراحی سایت رایگان را ارائه می‌کنند. اما طراحی رایگان (الگوها) هیچ گونه طراحی بصری ندارد، بنابراین اگر صاحب سایت به هیچ وجه سعی در تغییر آن نداشته باشد، چنین سایتی در جستجو ناپدید می شود.

همچنین شایان ذکر است که کل پورتال های اینترنتی که پیشنهاد می کنند وب سایت خود را بر اساس آنها راه اندازی کنید. در این مورد، هم مزایا و هم معایب وجود دارد:

  • اولین و شاید تنها مزیت آن سادگی است. قاب سایت در حال حاضر، به عنوان یک قاعده، بر اساس چنین منابعی توسط طراحان با تجربه الگوبرداری شده است، طراحی سایت تحت الزامات و قوانین خاصی قرار می گیرد. باقی مانده است که آن را با مطالب موضوعی پر کنید و منتظر اولین بازدیدکنندگان باشید. بنابراین، سادگی و راحتی چنین خدماتی افراد مبتدی را به خود جذب می کند. اما اگر سایت برای توسعه و رقابت جدی راه اندازی شده باشدرتبه اول در موتورهای جستجو، پس بهتر است از چنین خدماتی خودداری کنید.
  • از معایب - الگوهای ارائه شده در بیشتر موارد قابل ویرایش یا تغییر نیستند، باید همیشه از الگوهای ارائه شده استفاده کنید. یکنواختی نقطه ضعف اصلی است که در همان ابتدا در مورد آن صحبت کردیم، زیرا هر سایتی باید فردی باشد و از نظر ظاهری با سایت های دیگر متفاوت باشد. محدودیت‌های زیادی وجود دارد که توصیف آنها غیرممکن خواهد بود، زیرا هر یک از این سرویس‌ها مختص به خود هستند.

بخش پایانی

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

توصیه شده: