تصویر یک ابزار فوق العاده همه کاره است که می تواند کاربردهای مختلفی در طراحی پیدا کند. و وقتی نوبت به طراحی وب می‌شود، می‌توانیم پیاده‌سازی‌های بسیار متنوعی پیدا کنیم.
امروز می‌خواهم راه‌های کلیدی به کارگیری این ابزار را بررسی کنم تا بتوانیم ایده‌های جدیدی برای الهام بخشیدن و به چالش کشیدن طرح‌هایی که تولید می‌کنیم ترسیم کنیم.
اجازه دهید از جایی که به ندرت انجام می دهم، با یک تعریف اولیه شروع کنیم: مصور: 1) برای اینکه روشن باشد. 2) با دادن مثال یا مصداق بهروشنکردن. 3) ارائه ویژگی‌های بصری برای توضیح یا تزیین.
به نظر می رسد که در دنیای واقعی طراحی وب، تصویرسازی تمایل دارد هر دو عملکرد را در یک زمان انجام دهد. زیبا می کند در حالی که شفاف می کند. و اگر فقط یکی از اینها را انجام می دهد، ممکن است لازم باشد از خود بپرسید که چرا. شاید با به کار انداختن تصویرسازی برای انجام هر دو نقش، راهی برای استفاده واقعی از عنصر طراحی برای هر آنچه که ارزش دارد باشد.
البته این به این معنی نیست که یک طراحی نمی تواند موفق باشد اگر فقط یکی یا دیگری را مدیریت کند. قطعا می تواند اما برای اینکه بیشترین بهره را از کارمان ببریم، متوجه شدم که به چالش کشیدن تفکرمان همیشه مفید است. طبق معمول، بیایید چند گروه از نمونه ها را بررسی کنیم تا ببینیم با این دستگاه بصری چه کاری می توان انجام داد. در طول مسیر، در نظر بگیرید که آیا هر رویکرد وضوح یا تزئین یا هر دو را ارائه می دهد.
تصویر موضوعی
اولین رویکرد به تصویرسازی که می‌خواهم در اینجا به آن بپردازم، استفاده از این سبک برای تولید یک رویکرد موضوعی کلی است. در این موقعیت، تصاویر برای ایجاد یک موضوع کلی کار می کنند. آیا در حال بالا رفتن از کوه، بازدید از یک ایستگاه فضایی یا کاوش در دفتر یک شرکت هستیم؟
در حالی که این رویکرد مجبور نیست ما را به مکانی ببرد، اغلب این کار را انجام می دهد. در موقعیت های دیگر، سبک به سادگی یک موتیف کلی ایجاد می کند که سایت از آن پیروی می کند.
دلیل اینکه ما در اینجا به آن علاقه مندیم این است که از آن برای هدایت طراحی کلی به روشی رادیکال استفاده می شود. تصویر یک عنصر کوچک حمایت کننده نیست. در عوض، برجسته‌ترین عنصر طراحی است و کل طرح‌بندی را کنترل می‌کند.
رئیس من را به کیپ شمالی ببرید
در این نمونه رویکرد نمی تواند واضح تر باشد. طراحی سایت به وضوح اساسی ترین هدف آن را تکرار می کند. تصویر یک مرجع بصری به آنچه که فرد انجام خواهد داد ارائه می دهد. و از نظر تعریف تصویر، اثر هنری تزئین و زیبایی صفحه را فراهم می کند.
در این مورد، موضوع به طور محکم هدف سایت را مشخص می‌کند و به کاربر کمک می‌کند تا در این مفهوم خرید کند.
راه اندازی کیت
رویکرد موضوعی نباید به نوعی صریح باشد. گاهی اوقات می تواند بخشی طبیعی تر از یک سایت با ساختار معمولی باشد. در این مورد، سایت از نظر طرح‌بندی کمی منحصربه‌فرد است و موضوع، رابط کاربری بیش‌ازحد مبتنی بر کشتی‌های موشکی را مجبور نمی‌کند.
در عوض، موضوع به گونه‌ای در طرح بافته می‌شود که بدون تداخل با محتوا، لمس‌های تزئینی خود را به اشتراک می‌گذارد. در اینجا تصویر در خدمت تزئین است، اما نه چندان روشن. این اصلا تعجب آور نیست و البته نشان می دهد که هیچ فرمولی برای پیروی وجود ندارد.
طراحی آتلیه ناشناس
در موقعیت‌های دیگری مانند این مورد، تصویر موضوعی به معنای واقعی کلمه همان سایت است. این یک عنصر پشتیبانی نیست، بلکه کاملاً به خود طرح تبدیل می شود.
در اینجا استفاده از تصویر به وضوح نقش تزئینی دارد. اما من استدلال می کنم که سطح بالایی از وضوح را برای بازدید کننده فراهم می کند. این یک وب سایت برای یک آژانس طراحی است. طراحی و ماهیت این سایت ارتباط زیادی با بازدیدکنندگان آن دارد. به این ترتیب، من مطمئن هستم که به عنوان یک فیلتر عظیم برای پایگاه مشتری آنها عمل می کند. شما یا جذب و عاشق رویکرد بازیگوش و خلاقانه آنها خواهید شد، یا کاملاً از این روش منصرف خواهید شد. بنابراین تا این مرحله، من فکر می‌کنم که شفافیت زیادی در مورد آژانس و ذهنیت آنها فراهم می‌کند.
طراحی گرافیکی Allure
در این سایت استفاده از تصویر یک رویکرد موضوعی واضح نیز دارد. اگرچه این سایت از برخی فرمول های طرح بندی استاندارد پیروی می کند، کل طرح در یک طرح بندی موضوعی پیچیده شده است. این عناصر نه تنها طراحی سایت را هدایت می کنند، بلکه با لوگوی اصلی و کپی مورد استفاده در سایت ادغام می شوند. طرح زمینه همهجانبه است و کل پیامی را که سایت ارائه می دهد هدایت می کند.
نمونه های موضوعی اضافی
در اینجا چند سایت اضافی وجود دارد که از تصاویر موضوعی برای ایجاد یک محیط یا طرح زمینه برای یک سایت استفاده می کنند.
سنجاب
پسران دریفت
Iutopi
Chandu4u
ماسکات
چگونه می توانم ایده استفاده از تصاویر را بدون بررسی یکی از واضح ترین آنها پوشش دهم: طلسم؟ با استفاده از این عنصر بصری، طراحان تمایل دارند تا سایت، محصول یا هدف آن را با یک شخصیت تجسم کنند. نه تنها اجرای چنین عنصری متفاوت است، بلکه قدرت و استدلال پشت آن نیز متفاوت است.
inkFinder
در این طرح، طلسم مصور نقش نسبتاً واضحی دارد. واضح است که نام محصول را تکرار می کند. این نه تنها عمری را برای طراحی فراهم می کند، بلکه چهره ای به آن می بخشد. به این ترتیب مخاطب چیزی کمی منحصر به فردتر برای ذخیره کردن در مغز خود دارد. امیدواریم که طلسم به ایجاد تجربه‌ای به یاد ماندنی‌تر و منحصربه‌فرد کمک کند که به محصول کمک کند تا از شنیده‌ها متمایز شود.
شاید این قدرتمندترین هدف پشت طلسم، کمک به برجسته شدن چیزی باشد. نکته مهم در مورد یک طلسم مصور مانند این این است که می تواند کاملا منحصر به فرد و مختص این محصول باشد. با فرض اینکه برای این طرح سفارشی ساخته شده است، باید تنها مکانی باشد که این تصویر دقیق وجود دارد.
رویداد
از قضا ما در اینجا یک طلسم اختاپوس مانند دیگر را می یابیم (موجود دریایی سه پا چیست؟). در این مورد، طلسم آشکارا یک قدم بسیار بزرگتر از واقعیت است: یک ربات موجود سه پا با مغزی در حباب.
اگرچه ممکن است یک انتخاب عجیب باشد، اما یک عنصر متمایز زیبا برای رویداد ارائه می دهد. این طلسم منحصر به فرد یک عنصر بصری جالب برای ارتباط با رویداد می دهد. این یک زندگی خاص خود را می گیرد و واقعاً مردم را با چیزی ملموس مرتبط می کند. من فکر می کنم این دقیقاً هدف یک طلسم است.
طراحی این سایت زیبا است، اما در نظر بگیرید که بدون این طلسم دیوانه چقدر کسل کننده خواهد بود. تولید چنین عنصری آسان نیست، اما در این شرایط بسیار موثر است.
خلاق چشم بزرگ
برای نمونه ای از طلسم غیراختاپوسی، نگاهی به خلاقیت چشم بزرگسایت. در اینجا طلسم نقش اصلی را در طراحی بازی نمی کند. با این حال، شخصیت زیادی به آن اضافه می کند. بدیهی است که سایر تصاویر و سبک کلی سایت، ارائه کمتر رسمی را ایجاد می کند. اما طلسم در لوگو در سراسر سایت وجود دارد. این تضمین می کند که سبک سبک آنها در طراحی نفوذ کند.
تصاویر طلسم اضافی
در اینجا چند نمونه اضافی از طلسم در حال کار در طراحی آمده است. از جمله یک اختاپوس دیگر. به نظر می رسد که استفاده از آن محبوب است.
Pioneer Records Management
اختاپوس آرگیل
کوکو
Konsebt
دکوراسیون مصور
نوع بعدی استفاده ای که می خواهم در نظر بگیرم، چیزی است که به عنوان دکوراسیون موضوعی از آن یاد می کنم. این زمانی است که تصویرسازی به روشی تزئینی کار می‌کند که واقعاً مرجع فیزیکی خاصی را ارائه نمی‌کند. برای مثال، اغلب تصویرسازی شامل تصاویری از افراد، حیوانات، اشیاء یا مکان‌ها می‌شود. اما در این مورد، تصویر چیزی واقعی را نشان نمی‌دهد، بلکه صرفاً تزئینی را برای زیباتر کردن طرح به گونه‌ای ارائه می‌کند که فقط تصویر می‌تواند. مثل همیشه، اجازه دهید این را از طریق چند نمونه روشن کنیم.
1000 تم WP
برای اولین مثال ما، وب سایت 1000 تم WP را در نظر بگیرید. در این سایت استفاده از تصویر یک چارچوب و سبک اساسی برای سایت فراهم می کند. اما این کار را در مواردی که صرفاً تزئینی است انجام می دهد. سبک کلی شبیه یک تصویر است، و با این حال، عناصر معمولی انسانی را ندارد.
حالا، من می خواهم کاملاً با خودم مخالفت کنم. من فکر می کنم سبک بیشتر تزئینی است. اما من واقعاً می‌توانم ببینم که چگونه می‌توانیم استدلال کنیم که سطحی از شفاف‌سازی برای سایت فراهم می‌کند. سبکی که طراحی استفاده می کند با مخاطب خاصی ارتباط برقرار می کند. چیزی در مورد سبک سایت و موضوعاتی که ممکن است تولید کنند می گوید. از بسیاری جهات، کیفیت طرح‌بندی مصور کیفیت کاری را که ممکن است انتظار داشته باشید از طریق این سایت ببینید را نشان می‌دهد. به این ترتیب، توضیح ممکن است ظریف تر و کمتر در چهره شما باشد، اما با این وجود وجود دارد.
تاریخچه کوکاکولا
در این وب‌سایت، طرح دیگری را می‌یابیم که توسط تصویر طراحی شده است. برخی از عناصر مصور در اینجا وجود دارد که چیزهای واقعی را نشان می دهد، اما بیشتر رویکرد موضوعی با دکوراسیون خالص ایجاد شده است. این مثال نه تنها این رویکرد را نشان می‌دهد، بلکه نشان می‌دهد که تقریباً هیچ تکنیکی به روش خالص استفاده نمی‌شود. واقعیت این است که شما احتمالاً این عناصر را به روش های مختلف ادغام خواهید کرد.
متافیزیک
در این مثال آخر برای تصویرسازی تزئینی، عناصر پس زمینه عالی را پیدا می کنید. برخی از این موارد ملموس تر از بقیه هستند، اما به طور کلی بیشتر از هر چیز دیگری در مورد عناصر پشتیبانی سبک هستند. قابل توجه است که چنین نقاشی های خطی ساده وقتی با متن زیبا، رنگ های خوب انتخاب شده و نمادهای ساده ترکیب می شوند، چقدر می توانند زیبا باشند. نتیجه نهایی در اینجا فوق العاده و فوق العاده زیبا است.
طرح های بیشتر با دکوراسیون مصور
در اینجا چند نمونه اضافی برای تکمیل این نوع تصویر در طراحی آمده است.
Moo’s Cupcakes
مشاغل فنی
استادیوم Pixel
مرکز کیف های سفارشی
متن مصور
متن رندر شده با دست مطمئناً مفهوم جدیدی نیست و چیزی است که به آن پرداخته‌ام قبل از این بارها. با این حال، من هرگز چنین رویکردی را با دیدگاه تصویرسازی در نظر نگرفتم.
متن رندر دستی یکی از انواع رایج متن مصور است و راه حلی عالی برای بسیاری از خلاقان. برای اولین بار، این یک راه عالی برای به کار انداختن تمام آن آموزش های عملی مدرسه هنر است. ثانیا، این یک راه عالی برای تولید چیزی منحصر به فرد است. از این گذشته، اگر متنی را به صورت دستی رندر کنید، 100٪ منحصر به فرد خواهد بود. حتی اگر طرحی را روی یک تایپ موجود ترسیم کنید، همچنان یک اثر متمایز خواهد بود.
رنگوس
این نمونه کاملی از نوع مصور است. سبک بسیار زرق و برق دار، کاملا منحصر به فرد و بسیار جذاب است. اما به همین جا ختم نمی شود. نوع رندر شده با دست در واقع استعداد افراد را نشان می دهد. این نشان می دهد که او با دستان خود آثار هنری خلق می کند و کاملاً به مهارت های انیمیشن او مرتبط است. من به خصوص این واقعیت را دوست دارم که همه آن بر اساس یک تم تخته سیاه است، زیرا واقعاً موضوع و عناصر را به خوبی با هم پیوند می دهد. به نظر من این سایت نشان می دهد که چگونه تصویرسازی می تواند با هدف و پیام سایت یکپارچه باشد.
جوی لومانتو
در این مورد، متن مصور بسیار ظریف‌تر است. به جای اینکه تمام جهت طراحی را هدایت کند، به سادگی به خوبی اجرا می شود. در واقع، در اولین برداشت ممکن است حتی متوجه سبک رندر شده دستی متن بزرگ صفحه اصلی نشوید. البته ممکن است متن در واقع یک فونت باشد، اما به گونه ای استفاده شده است که کاملاً با سبک سایت ادغام می شود. صرف نظر از این، سبک به زیبایی یکپارچه است و تصویرسازی نقش های زیادی در طراحی کلی بازی می کند.
پخش زنده
متن مصور نیازی به ارائه دستی ندارد. همانطور که در این مثال خواهید دید، متن به روش های مختلفی استایل بندی شده است که خود متن را به تکه هایی از تصویر کلی تبدیل می کند. زیبایی این رویکرد این است که متن را با سایر تصاویر یکسان می کند. این از احساس یکپارچگی کمتری که در آن شما به سادگی تصاویر را روی متن استاندارد مبتنی بر وب دارید، جلوگیری می کند. دومی می تواند کار کند، اما در این مورد تأثیر متن مصور واضح است.
نمونه های اضافی از متن مصور
مثال‌های زیر در این دسته جای می‌گیرند. من آزادانه می گویم زیرا گاهی اوقات گفتن آن سخت است زیرا گاهی اوقات یک چیز ظریف است. در برخی از این موارد متن صرفاً مانند یک اثر هنری به نظر می رسد، بنابراین من آن را در این مجموعه قرار داده ام.
شورش کنتراست
Fakta
La Web Shop
تصاویر آموزنده
با تعریف تصویرسازی، یکی از اهداف آن، توضیح و توضیح است. بنابراین مناسب است که نمونه‌هایی را پیدا کنیم که در آن تصاویر این کار را با وضوح فوق‌العاده انجام می‌دهند.
کتابی
بیایید با سایت Bookish شروع کنیم. در این چیدمان غیرمعمول متوجه می‌شویم که تصاویر به وضوح نماد نقاط مختلف طرح‌بندی صفحه اصلی هستند. هر بلوک دارای یک عنصر بصری است که نه تنها آن را زیبا می کند، بلکه مهمتر از آن توضیح می دهد. به حدی که به عنوان یک خواننده تقریباً مجبور نیستم نسخه را بخوانم. آثار هنری دستگاه ها در پایین سمت چپ به ویژه این را نشان می دهد.
مشاوره
تصویر در این طرح به روشی بسیار کمتر برجسته به همان اندازه آموزنده است. تصویر ساده به صورت دستی موضوع سایت را نشان می دهد. ممکن است با پیام خود سر شما را شکست ندهد، اما هدف سایت را به زیبایی بازتاب می دهد.
فعال کردن
تصویر در این طرح نه تنها اطلاعاتی را در مورد رویدادی که نشان می‌دهد ارتباط برقرار می‌کند، بلکه هدف اصلی رویداد را نیز بازتاب می‌دهد. این رویداد خاص حول محور قطع ارتباط با فناوری می چرخد. این فرصتی است برای افرادی که غرق فناوری هستند تا از چنگال آن فرار کنند.
تصویر اینجا به ما نشان می دهد که شرکت کنندگان چه کاری انجام خواهند داد، بنابراین آموزنده است. و به دلیل ماهیت آن، تصویر با تکنولوژی می‌شکند و در یک احساس کاملاً ارگانیک ریشه می‌گیرد، که اساساً راهی عالی برای برقراری ارتباط با هدف سایت است.
تصاویر اطلاعاتی بیشتر
این سایت‌های اضافی همچنین ایده تصاویری را نشان می‌دهند که به ما اطلاع می‌دهند. برخی نمادهای کوچک و ابتدایی هستند، در حالی که برخی دیگر عناصر غوطه‌وری هستند که محتوا را کاملاً تعریف و نشان می‌دهند.
شهر سرزندگی
Uklizenodoma.cz
Qubiq
یک پادزهر تکنولوژیک
با مثال آخر (سایت فعال کردن) به آنچه که می‌خواهم بعداً در نظر بگیرم وارد شدیم. ، استفاده از تصویر برای شکستن احساس فناوری گرا از چیزها. گاهی اوقات لازم است که از زیربنای تکنولوژیکی وب جدا شده و احساسی بسیار ارگانیک نشان داده شود. تصویرسازی یکی از قدرتمندترین ابزارها برای تحقق چنین ایده ای است.
برنامه ارسال
این صفحه سرراست که به زودی منتشر می شود، چیزی غیرعادی نیست. و واضح است که چگونه زیبایی خود را به انجام می رساند بسیار ساده است. یک تصویر بزرگ به تنهایی ما را از این واقعیت دور می کند که این یک صفحه وب است. این بیشتر شبیه یک اثر هنری است که اتفاقاً یک عنصر تعاملی کوچک دارد، مطمئناً راهی عالی برای تأثیرگذاری عظیم بر کاربران و ایجاد یک تصویر به یاد ماندنی.
Muziekpark
در حالی که این سایت از یک رویکرد کاملاً رادیکال استفاده نمی کند، تصویر هنوز در طرح بندی بزرگ و برجسته است. در اینجا تصاویر متحرک جانی را به صفحه می بخشد. این را با یک چیدمان خلاقانه و غیرمعمول ترکیب کنید و احساس کنید که کاملاً از فناوری که آن را به حرکت در می آورد جدا شده است. شاید این واقعیت که شبیه یک سایت معمولی به نظر نمی رسد نقش قدرتمندی در این مورد ایفا کند. همچنین در نظر بگیرید که تصویر در این مورد واقعاً به ما کمک می کند تا موضوع سایت را به ما اطلاع دهید.
Egopop
در طرح‌بندی غیرمعمول دیگری متوجه می‌شویم که تصویرسازی به کار گرفته شده است. در اینجا آثار هنری نه تنها در مورد فردی که سایت نشان می دهد به ما می گوید، بلکه ما را از طرز فکر عادی وب که یک بازدیدکننده ممکن است داشته باشد نیز خارج می کند. باز هم، بیشتر شبیه یک اثر هنری تعاملی است تا یک وب سایت. اگر این هدف و نیاز شماست، پس این یک رویکرد عالی برای در نظر گرفتن است.
زارلی
در مقایسه با نمونه‌های قبلی، سایت Zaarly کاملاً متضاد است. اگرچه طراحی توسط یک تصویر بزرگ کنترل می‌شود، و این تصویر برای ایجاد لحنی برای سایت استفاده می‌کند، عملکرد زیربنایی بسیار پیچیده‌تر از این نمونه‌های دیگر است.
این سایت یک برنامه کاربردی است که برای استفاده در نظر گرفته شده است. و تصویر به ایجاد مجموعه خاصی از انتظارات کمک می کند. این احساسی ساده و انسان‌گرایانه می‌دهد که به وضوح بسیار ارگانیک و طبیعی است. تصور کنید که این برخلاف برنامه های نیمه مینیمالیستی و بدون شخصیت است. طراحی به سایت حس نزدیک بودن می دهد و انتظارات ما را تغییر می دهد.
نتیجه گیری
استفاده از تصویرسازی در طراحی یک روش قدیمی است و کاربرد آن در وب واضح است. من مانند هر عنصر طراحی دیگری از فرآیند بازنگری در هدف و استفاده از آن لذت می برم. از طریق چنین تلاشی ناگزیر متوجه می‌شوم که درک بهتری از نحوه عملکرد آن، راه‌های استفاده از آن برای هدف مورد نظر و در نهایت ایده‌های تازه و الهام‌بخش به دست می‌آورم.
چگونه از تصویرسازی در طراحی وب استفاده می کنید؟ لطفا تجربیات خود را در زیر به اشتراک بگذارید….
بدون دیدگاه