طراحی سایت چگونه است

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

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

آموزش طراحی سایت

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

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

صفحه تبلیغات کارناوال Spotify فونت های بد بو را با شکل حروف انتزاعی با رنگ های روشن و بافت های جالب جفت می کند.
در اینجا در این وب سایت برای شرکت برنامه ریزی رویداد Goliath Entertainment احساس آینده نگرانه وجود دارد . تایپوگرافی جسورانه به گذشته اشاره می کند در حالی که هنوز لحظه لحظه ای را حس می کنید.

طراحی سایت رایگان

وب سایت Goliath Entertainment از قلم های یکپارچه برجسته همراه با رنگ های به همان اندازه پررنگ استفاده می کند.
همانطور که سال 2021 اتفاق می افتد ، ما منتظریم که تصورات تصویری خلاقانه تری را ببینیم.

2. انیمیشن های پیمایشی Parallax
جلوه های پیمایشی Parallax از سالها قبل در طراحی وب سایت روندی بوده است و امیدواریم در سال 2021 شاهد اکتشافات ظریف و خلاقانه تری در مورد آنچه با اختلاف منظر می توان انجام داد ، باشیم.

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

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

قیمت طراحی سایت

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

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

طراحی سایت وردپرس

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

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

طراحی سایت فروشگاهی

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

طراحی سایت چیست

صفحه ویژگی طراح Webflow پیمایش افقی را برای نشان دادن جزئیات UI به تصویر بزرگی از Webflow Designer اعمال می کند.
MOMENTO استودیو طراحی صفحه اصلی را شامل یک نشانه روشن در کنار دکمه های اولیه که همچنین به عنوان یک لینک عمل می کند، به آرامی به شما کشویی را به آثار برجسته بر روی کلیک کنید. حرکت پیمایش به خوبی گام برمی دارد و خیلی طولانی نیست و به تصاویر برجسته می دهد.

Momento Design Studio از اسکرول افقی برای نمایش تصاویر بزرگ از پروژه های مختلف خود استفاده می کند.
طراحی McBride با استفاده از پیمایش افقی عکسهای بزرگی از کارشان را به نمایش می گذارد بدون اینکه فضای زیادی از صفحه اشغال کند. آنها همچنین شامل یک نشانگر واضح در پایین سمت راست هستند که انتظار می رود صفحه به صورت افقی پیمایش شود.

McBride Design Studio تصاویری بزرگ و تقریباً تمام قد را با استفاده از پیمایش افقی برای صرفه جویی در فضای صفحه به نمایش می گذارد.

هزینه طراحی سایت

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

آژانس خلاق Sennep با عناصر سه بعدی در سراسر وب سایت خود خطوطی عمیق ایجاد می کند. در اینجا بین همه عناصر طراحی حس هماهنگی خوبی وجود دارد. این یک نمونه عالی از این است که چگونه در طرح های مینیمالیستی تر ، 3D می تواند تأثیر بزرگتری ایجاد کند.

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

قهرمان صفحه اصلی یایا یک تصویر سه بعدی دقیق را نشان می دهد که شخصی را نشان می دهد در حال تعامل با یک ماشین ساخت آینده است.

طراحی پورتال

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

قهرمان وب سایت Pitch محصول خود را نشان می دهد و برای افزایش جذابیت بصری ، در چند عنصر 3D انتزاعی پاشیده است.
عناصر سه بعدی حس منحصر به فرد بودن و ابعاد بعدی هر صفحه وب را اضافه می کنند.

طراحی سایت شرکتی

با بیشتر دسترسی افراد به سرعت اینترنت بیشتر ، تجارب وب چندرسانه ای در همه جا ظاهر می شوند. گردآوری تصاویر ، متن ، فیلم و صدا تجربه کاربری غنی را برای شما ایجاد می کند.

در طراحی های موفق در سال 2021 از محدودیت تجارب چندرسانه ای استفاده خواهد شد:

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

 آموزش طراحی سایت رایگان

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

سایت Nicolas Errera شامل کنترل های پخش برای یک ویدیوی زیبا در پس زمینه است: با کلیک کلیک می کند ، و همچنین می تواند مکث شود. این همچنین شامل یک انیمیشن ظریف است که نشان می دهد تا چه حد از ویدیو فاصله دارید.

قهرمان وب سایت Nicolas Errera شامل یک ویدیوی کاملاً کامل با کنترل کامل پخش کاربر است.
تجارب چندرسانه ای در زمینه های مختلفی کار می کنند. در مثال زیر ، یک عکس از Black Yearbook مشاهده می کنیم . این یک کتاب با سرمایه گذاری گسترده است که توسط Adraint Bereal و دوستانش تهیه شده است تا نشان دهد یک دانشجوی آمریکایی آفریقایی تبار که در مدارس غالباً سفیدپوست حضور دارد ، چگونه است.

طراحی پورتال سازمانی

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

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

آموزش طراحی سایت با وردپرس

و با تجربه های چندرسانه ای ، همه تجربه های غوطه وری شگفت انگیز با استفاده از واقعیت افزوده (AR) را فراموش نکنیم. AR در حال حاضر معنایی بیش از شکار Pokémon در دستگاه تلفن همراه Apple یا Android دارد. فناوری های جدید مانند WebXR API و نرم افزار ساخته شده توسط Wayfair Technologies این قلمرو را برای تقریباً همه باز کرده است.

جیپ از AR برای این صفحه " ساخت و قیمت یک جیپ " استفاده می کند. برای کسانی که از قدم گذاشتن در نمایندگی های اتومبیل متنفر هستند ، این تجربه بدون روح و فشار را ایجاد می کند. وب سایت های خرده فروشی و تجارت الکترونیکی بیشتری از قدرت AR برای کمک به فروش محصولات خود و توانمند سازی مشتریان بالقوه در فرآیند خرید استفاده می کنند.