نحوه ساخت وایرفریم برای طراحی وب در Adobe XD

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

آیا روی پروژه بعدی طراحی وب خود کار می کنید؟ این آموزش شما را از طریق مراحل اصلی ایجاد یک A کاربردی راهنمایی می کندوایرفریم dobe XD.

در این آموزش Wireframes برای طراحی وب در Adobe XD به موارد زیر خواهیم پرداخت:

1. Adobe XD چیست؟
2. وایرفریم چیست؟
3. یک طراحی وب خوب باید شامل چه بخش هایی باشد؟
4. نحوه شروع وایرفریمینگ از ابتدا
5. نحوه ایجاد وایرفریم در Adobe XD
6. نحوه انتخاب بهترین قالب Adobe XD Wireframe برای وب سایت من

1. Adobe XD چیست؟

اول چیزهای مهم. اگر در دنیای طراحی وب و ابزارها تازه کار هستید، برای شما مهم است که بدانید Adobe XD چیست و همچنین ویژگی های اصلی آن را بدانید. Adobe XD یک ابزار طراحی UI/UX مبتنی بر برداری است. می‌توانید از XD برای طراحی اپلیکیشن‌ها تا وب‌سایت‌ها استفاده کنید.

این رو چک کن ویدیوی سریع از آدی پوردیلا و یک نمای کلی از Adobe XD دریافت کنید:

2. وایرفریم چیست؟

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

• 

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

3. یک طراحی وب خوب باید شامل چه بخش هایی باشد؟

قبل از وایرفریمینگ، ایده خوبی است که فهرستی از بخش ها و محتوایی که وب سایت شما در آن قرار می گیرد، ایجاد کنید. بخش‌های یک Adobe wireframe با انواع مختلف وب‌سایت‌ها متفاوت است، اما اینها موارد اصلی هستند که باید در نظر گرفته شوند:

• سرتیتر: این منطقه معمولاً شامل لوگو، پیوندهای ناوبری و گاهی اوقات یک تصویر قهرمان است.
• بالای چین: این اولین چیزی است که کاربر شما هنگام ورود به وب سایت شما می بیند. این باید تاثیرگذارترین بخش وب سایت شما باشد.
• زیر تاشو: این جایی است که اطلاعات بیشتری را برای ادامه کاوش کاربر قرار می دهید.
• پاورقی: این قسمت پایین یک وب سایت است. معمولاً دارای اعتبار، پیوندهای رسانه های اجتماعی، شرایط و ضوابط و غیره است.

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

1. صفحه نخست
2. نمونه کارها
3. صفحه پروژه
4. در باره

4. نحوه شروع وایرفریمینگ از ابتدا

حتی قبل از باز کردن Adobe XD، پیشنهاد می کنم ساختار کلی وب سایتی را که می خواهید ایجاد کنید، ترسیم کنید. من یک آدم قلم و کاغذ هستم، اما می‌توانید با Procreate یا Photoshop هم کار کنید.

وب‌سایت نمونه کار خلاقانه من دارای چهار بخش خواهد بود، بنابراین من ایده‌ها و محتوای طرح‌بندی را برای هر بخش ترسیم کردم. طرح شما باید شامل عناصری مانند:

• تصاویر و ویدئو
• جهت یابی
• دعوت به اقدام (دکمه ها)
• گالری تصاویر
• سرفصل ها
• بدنه متن

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

5. نحوه ایجاد وایرفریم در Adobe XD

زمان آن فرا رسیده است که طرح های خود را به وایرفریم تبدیل کنیم. بیایید جلو برویم و برخی از وایرفریم‌های با کیفیت پایین را در Adobe XD ایجاد کنیم. Adobe XD را باز کنید و جدید ایجاد کنید وب 1920 x 1080 پیکسل تابلوی هنری

مرحله 1: یک سیستم شبکه را وارد کنید

پیروی از سیستم شبکه استانداردی که Adobe XD استفاده می کند، نقطه خوبی برای شروع است.

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

مرحله 2: تابلوهای هنری ایجاد کنید

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

مرحله 3: Sketch را به شکل ها ترجمه کنید

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

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

انتظار می رود که برخی از مناطق و بخش ها به صورت دیجیتالی متفاوت عمل کنند، بنابراین اشکالی ندارد که برخی از نقشه های خود را تنظیم کنید.

مرحله 4: محتوا را مشخص کنید

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

و شما بروید! شما می دانید که چگونه یک ساختار اساسی برای A ایجاد کنیدوایرفریم های dobe XD.

6. نحوه انتخاب بهترین قالب Adobe XD Wireframes برای وب سایت من

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

هنگام انتخاب قالب وایرفریم مناسب باید به هدف وب سایت خود فکر کنید. آیا شما ایجاد می کنید تجارت الکترونیک، آ مبل فروشی یا یک وب سایت دوره آنلاین? الگوهای خاص یا یک کیت Wireframe Adobe XD را جستجو کنید که شامل عناصر اصلی است که می‌خواهید در وب‌سایت خود قرار دهید.

الهام و منابع Adobe XD بیشتر

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

ما تعدادی مقاله و آموزش را برای کمک به شما با الهام گرفتن از طراحی وب سایت Adobe XD و منابع خود انتخاب کرده ایم: