۴ quick ways to bring Swiss Style to your web design – Justinmind

همه آنچه باید درباره طراحی وب سایت به سبک سوئیسی بدانید

سبک سوئیس دکوراسیون را رد می کند ، عینیت را دنبال می کند و ارتباطات روشن را ترجیح می دهد. چگونه می توانیم اینها را در طراحی وب اعمال کنیم؟

سادگی ، عینیت و خوانایی. اینها ایده های اصلی جنبش سبک سوئیسی بودند.

تقریباً ۷۰ سال است که Swiss Style دنیای طراحی گرافیکی را طوفان کرده است. اما آیا اصولش مناسب امروز است؟ و آیا می توانیم از آنها درطراحی وب سایت ها و رابط ها با ابزار نمونه سازی مورد علاقه شما استفاده کنیم؟

بیایید ببینیم

 


سبک سوئیس چیست؟

سبک سوئیس یا سبک بین المللی به جنبشی اطلاق می شود که در دهه های ۱۹۲۰ و ۳۰ در روسیه ، هلند و آلمان پدید آمد. سپس طراحان در ۱۹۵۰ در سوئیس رهبری این جنبش را بر عهده گرفتند.

 

۴ quick ways to bring Swiss Style to your web design – Justinmind

سبک سوئیس مدرنیستی است. این نقطه اوجی برای constructivism روسیه ، هنرها و صنایع دستی ، عکاسی ، De Stijl و Bauhaus است. شما می توانید سبک سوئیس را با سرصفحه های برجسته (bold headlines)، ترکیب خشن (stark composition) و رویکرد مینیمالیستی (minimalist approach) تشخیص دهید.

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

پیشگامان سبک سوئیس طراحی را بخشی از تولید صنعتی می دانستند و به شدت به دنبال ارتباطات بصری عینی بودند.

 

Swiss style in UI UX design - akzidenz grotesk specimen

تایپوگرافی آنها مخصوصا صنعتی بود و فونت قرن نوزدهم Akzidenz-Grotesk بر سبک سوئیسی بسیار تأثیر گذاشت.

به عنوان حالت حروف (typeface) ، بدون تزیین است، برای مقاصد عمومی است و تایپوگرافی کاربردی است – هر چیزی که یک مدرنیست با یک فونت دوست دارد. همچنین الهام گرفته از سبک فونت مشهور Helvetica است.

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

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

وبلاگ نویس معروف ارمیا شوف ، مردِ پشتِ Typewolf ، در مورد Akzidenz-Grotesk گفته است:

“من همیشه خوشحالم که می بینم Akzidenz Grotesk در وب به جای Helvetica استفاده می شود ، زیرا فوراً احساس بسیار متمایز تری به طراحی می بخشد.”

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

پاویون بارسلونا یک مثال است. این ساختمان در سال ۱۹۲۹ ساخته شد و نمونه ای از رویکرد مدرنیستی بود.

بنابراین ، چه مشخصاتی سبک سوئیس را دارد؟

 

ویژگیها و اصول سبک سوئیسی

سبک سوئیس از اجزای مختلف تشکیل شده است ، اما قابل توجه است که طراحی سبک سوئیسی شامل موارد زیر است:

شبکه ها (Grids)
طرح بندی نامتقارن (Asymmetric layouts)
تایپوگرافی Sans-serif
دقت، درستی (Precision)
انتزاع هندسی (Geometric abstraction)
سادگی (Simplicity)
عینی بودن (Objectivity)
عکاسی (Photography)

همانطور که در مانترا باوهاوس آمده است: فرم عملکرد را دنبال می کند. این باعث می شود سبک سوئیسی عملگرا و مورد توجه قرار گیرد.

 

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

طراحان UX هنگام طراحی باید رویکرد مشابهی را در پیش بگیرند. طراحی برای شما مناسب نیست بنابراین سرمایه گذاری نکنید. این در همه جنبه ها صدق می کند. نویسندگان UX نمی توانند به کلمات خود وابسته شوند همانطور که طراحان نمی توانند به رابط کاربری خود متصل شوند.

 

طراحی وب سایت به سبک سوئیسی

سبک سوییس تنها در پوسترها و سایر طرح های گرافیکی یافت نمی شود. می توان از آن در طراحی وب و طراحی UX استفاده کرد. همه ویژگی های لیست بالا را می توان به راحتی در وب سایت ها اعمال کرد.

Diogo Terror در Smashing Magazine می نویسد که هدف سبک سویسیایجاد رابط های کاربر پسند است.

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

ولی، از کجا شروع کنیم؟

 

شبکه (گرید) به عنوان پایه و اساس طراحی

ویژگیهای بصری سبک سوئیس شامل قرار دادن عناصر بر روی یک شبکه ساخته شده براساس ریاضیات است برای ایجاد یک ترکیب واحد . شبکه به طراحی ساختاری می دهد که در آن عناصر UI شما را “محدود” می کند.

این شبکه باید اطلاعات متنی و تصویری را به روشنی ارائه دهد. مهم نیست پوستر باشد یا رابط ؛ یک شبکه به کار نظم می دهد. انتخاب فونت باید sans-serif باشد و در سمت چپ تراز شود. نتیجه نهایی باید یک طرح نامتقارن باشد.

یوزف مولر بروکرمن ، یکی از پیشگامان سبک سوئیس و نویسنده کتاب Grid Systems in Graphic Design ، در مورد شبکه گفته است:

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

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

طراحان با چه روشهای دیگری می توانند استعداد Swiss Style را در طراحی وب به ارمغان بیاورند؟

 

۴ راه سریع برای معرفی سبک سوئیسی در طراحی وب سایت شما

با عناصر UI کمتر، وضوح ایجاد کنید

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

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

 

Swiss style in UI UX design - Swiss style website template

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

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

شما مدیون کاربران خود هستید که اطلاعات مورد نیاز خود را به گونه ای در اختیار آنها قرار دهید که به آنها آسیب نرساند.

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

در اصل ، وضوح اطمینان را القا می کند و منجر به استفاده بیشتر می شود.

انتخاب های تایپوگرافی خود را محدود کنید

هنگام طراحی وب سایت به سبک سوئیسی، انتخاب فونت بسیار مهم است. سبک سوئیس به سبک تایپوگرافی بین المللی نیز معروف است. این نوعی احترام به این سبک است.

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

اگر می خواهید طراحی وب سایت شما دارای سبک سوئیسی باشد ، وقت آن است که Times New Romans ، Garamonds و Caslons خود را کنار بگذارید. فونت Serif مجاز نیست.

 

Swiss style in UI UX design - deavor Swiss style design website

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

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

یکی دیگر از ویژگیهای سبک سوئیسی ، تراز کردن سمت چپ (flush left) و ناهموار کردن سمت راست (ragged right) است. این بدان معناست که متن در سمت چپ صفحه تراز شده اما جاستیفای نشده است. مثل این:

 

Swiss style in UI UX design - poster flush left ragged right

فونت هایی که باید برای سبک سوئیسی در نظر بگیرید: Montserrat ، Open Sans ، Lato و Helvetica هستند. چرا به دنبال این نباشیم که تایپوگرافی بتواند هویت نام تجاری را افزایش دهد؟

یک سلسله مراتب تایپوگرافی بسازید

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

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

برای دستیابی به سلسله مراتب بصری ، باید با موارد زیر بازی کنید:

  • اندازه
  • رنگ
  • وزن
  • موقعیت
  • تضاد
    Kerning

اگر می خواهید درس سلسله مراتب بصری داشته باشید ، به صفحه اول یک روزنامه نگاه کنید.

عنوان (headline) ، زیرعنوان (subheading) و بدنه (body) راه هایی برای ایجاد سلسله مراتب بصری است. در روزنامه ، عنوان مورد توجه قرار می گیرد (مهمترین چیز) و عناوین فرعی اطلاعات اضافی (کم اهمیت) را ارائه می دهند و سپس بدنه متن (کم اهمیت) را در اختیار شما قرار می دهد. هر دو عنوان و عنوان فرعی برای ترغیب خواننده به ادامه دادنِ خواندنِ بدنه متن استفاده می شود.

بیایید نگاهی به این دو قسمت از متن زیر بیندازیم. یکی سلسله مراتب دارد ، یکی ندارد. مشاهده تأثیر سلسله مراتب تایپوگرافی واضح است:

 

Swiss style in UI UX design - clear hierarchy

Image credit: Janie Kliever at Canva

توجه به اینکه مردم در اینترنت چگونه می خوانند، مهم است.

در بیشتر موارد ، مردم با الگوی F می خوانند ، به ویژه اگر تعداد زیادی کپی وجود داشته باشد. برای سایتهایی که نسخه کمتری دارند ، مردم تمایل دارند که با الگوی Z بخوانند. این به این دلیل است که آنها صفحه را برای اطلاعات مربوط به آنها اسکن می کنند. (در فارسی وارون F و Z نسبت به محور عمودی)

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

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

 

عکاسی را بر تصویرسازی ترجیح دهید

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

اما برای سبک سوییس ، همه چیز مربوط به عکاسی است. چرا؟ چون در ذهن طراحان آن زمان ، عکاسی راهی برای نشان دادن واقعیت بود. این یک رسانه عینی تر است، به یاد داشته باشید ، این هنرمندان عاشق عینیت هستند تا نقاشی یا تصویرسازی.

ترکیبی از تایپوگرافی و عکاسی در سبک سوئیسی به عنوان وسیله ای برای ارتباط بصری مرکزی است ، همانطور که در تصویر زیر نشان داده شده است:

همانطور که می بینیم ، آنها با هم کار می کنند. هر دو یکدیگر را تقویت می کنند.

 

طراحی وب سایت به سبک سوئیسی – the takeaway

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

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

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

ترجمه ی علیرضا صدر ثقه الاسلامی با بهره گیری از گوگل ترانسلیت

از سایت منبع این نوشته دیدن فرمایید

 

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

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