15+ روند طراحی نمونه کارها در سال 2020


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

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

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

1. بایوس صفحه اصلی

طراحی نمونه کارها

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

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

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

2. بسیاری از تعامل

طراحی نمونه کارها

پرتفوی تعاملی موجود است.

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

نکته جالب توجه در مورد پرتفوی بسیار تعاملی این است که مکانی برای نشان دادن مهارت های عالی UX فراهم می کند.

چالش این است که گاهی اوقات طرح ها می توانند کمی از بین بروند. حتماً رفتار و مشارکت کاربر را ردیابی کنید و اگر بازدید کننده خود را گم کرده اید ، شایسته است. (همچنین می تواند آزمایش خوبی برای بکارگیری تکنیک های مشابه در پروژه های دیگر باشد.)

3. الگوهای طراحی غیر معمول

طراحی نمونه کارها

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

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

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

روند نمونه کارها باعث می شود که در هنگام غواصی در کار ، درباره هنجارهای طراحی و اینکه در مورد آنها چه احساسی دارید ، فکر کنید.

4. سیاه و سفید

طراحی نمونه کارها

طرح های سیاه و سفید ، اغلب با لهجه رنگ ، در حال حاضر بسیار زیاد هستند.

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

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

5. تایپوگرافی مرسوم ، مد روز

طراحی نمونه کارها

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

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

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

6. اثرات بالا

طراحی نمونه کارها

نمونه کارها ویکتور کاستا نمونه ای از نحوه ایجاد یک نمونه کار با کارایی بالا است.

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

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

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

7. فضای زیادی

طراحی نمونه کارها

چیزی که در طراحی های بیشتری در سراسر تخته ظاهر شده است ، می تواند به طراحی نمونه کارها و همچنین فضای زیادی بین عناصر و اشیاء کمک کند.

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

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

8. UI Groovy

طراحی نمونه کارها

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

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

این نمونه کار شما می توانید ساعت ها با تشکر از UI groovy.

9. تایپوگرافی بزرگ

نمونه کارها

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

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

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

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

10. پرتفوی هایی که مانند پرتفوی ها به نظر نمی رسند

… شما به عنوان یک طراح نیازی به ارائه چیزهای کاملاً جدید برای نشان دادن کار خود ندارید

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

نمونه کارها رابین ماسترومارینو به نظر می رسد بسته به اینکه در ابتدا کدام قسمت از کشویی را مشاهده می کنید ، یک وب سایت برای نوار یا طراح مد یا ورزشکار حرفه ای باشد. زیبا و ساده است و برجسته ترین اتاق اتاق برای درخشش هر پروژه است.

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

موارد دیگری که در مورد این سبک نمونه کارها بسیار جالب است این است که شما به عنوان یک طراح مجبور نیستید چیزهای کاملاً جدیدی را برای نمایش کار خود ارائه دهید. با وجود “هنر” بزرگ برای پروژه ها ، شغلهای تکمیل شده به جای ایجاد چیزی کاملاً جدید ، تمرکز دارند. (برای ایجاد چیزی که می توانید سریع آن را به روز کنید چگونه است؟)

11. ناوبری متحرک تمام صفحه

نمونه کارها

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

صفحه اصلی به عنوان ناوبری در پروژه ها و صفحات فردی با افکت های متحرک در این پروژه ها استفاده می شود تا یک تجربه همهجانبه و کاملاً تعاملی را برای کاربران ایجاد کند.

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

12. الگوهای صفحه تقسیم

نمونه کارها

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

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

این یک روش خوب برای مدیریت پروژه های بزرگ است – در ضمن حفظ هویت خود در طراحی نمونه کارها ، گرافیک Adidas Climaheat را در اینجا یادداشت کنید. (حتماً از اینجا پروژه های جداگانه را کلیک کرده و از آنها بازدید کنید ؛ طراحی کلی نمونه کارها چشمگیر است.)

13. طراحی مینیمالیسم-الهام بخش

روند نمونه کارها

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

طراح شاون پارك اخیراً در مورد چگونگی طراحی مجدد سبد خود برای هر سال در UX Collective نوشت – من به شما توصیه می كنم كه آن مقاله را در اینجا بخوانید – و طراحی فعلی (فوق) نشان دهنده سیر تحول روند طراحی در خود است.

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

14. عکسهای صفحه بزرگ

روند نمونه کارها

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

این روند نمونه کارها ممکن است محبوب باشد زیرا نمایش بصری این اثر سخت تر است: کد را برجسته می کنید؟

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

و چند اثر عالی نمی تواند صدمه ببیند.

15. شبکه های مدولار

نمونه کارها

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

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

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

16. روشن ، زیبایی شناسی نور

روند نمونه کارها

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

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

وقتی مانند این سبد کار می کنید – جلوی اول ، JavaScript ، آموزش – کمی خلاقیت می تواند خیلی طول بکشد. نه تنها به جذب کاربران کمک می کند بلکه چیزی در مورد سبک کار و فلسفه طراحی شما می گوید. (این می تواند به شما در یافتن مشتریانی که مناسب هستند کمک کند.)

17. پوشش رنگ

روند نمونه کارها

نمونه کارها Heather Shaw کار می کند زیرا هر پروژه بسیار متفاوت است ، اما پوشش های رنگی باعث ایجاد صفحه اصلی می شوند.

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

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

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

18. نمایش ویترین پروژه

کارت های تلفن همراه

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

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

ظاهری جلا و مطبوع دارد و لحن خاصی برای کار این طراح ایجاد می کند.

نتیجه

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

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



Source link

طراحی سایت

برچسب ها

ممکن است به این موارد نیز علاقه مند باشید:

0 دیدگاه در “15+ روند طراحی نمونه کارها در سال 2020”

پاسخی بگذارید

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