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

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

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

بهترین سایت برای طراحی رابط کاربری: آموزش Figma از صفر تا صد

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

1- سایت جدید

هنگامی که برای اولین بار Adobe Muse را روی سیستم خود نصب می کنید، صفحه خوش آمدگویی را مشاهده خواهید کرد. در این صفحه می توانید یک سایت جدید ایجاد کنید و سایت هایی را که اخیرا ایجاد شده اند باز کنید. هدف ما ایجاد یک سایت جدید است. (منبع)

صفحه Create New Site یک کادر محاوره ای با تنظیمات مختلف نمایش می دهد.

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

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

دانلود: آموزش طراحی سایت وردپرس از صفر تا صد

2- برنامه ریزی کنید

در این مرحله باید تعداد صفحات سایت و ارتباط آنها با یکدیگر را سازماندهی کنیم. در این آموزش 8 صفحه طراحی می کنیم که شامل صفحه آموزش، 2 صفحه فرعی، مقاله 1 و مقاله 2 می شود. با کلیک بر روی [+] در سمت راست صفحه اصلی صفحات اصلی را اضافه می کنیم. برای افزودن صفحات فرعی، روی گزینه کلیک کنید [+] در پایین هر صفحه اصلی کلیک می کنیم. ما به کار خود ادامه می دهیم و صفحات “چگونه کار می کند”، “قیمت گذاری و برنامه ها”، “آموزش ها”، “تالار گفتمان”، “پشتیبانی” را در سمت راست صفحه اصلی ایجاد می کنیم و همچنین صفحه فرعی “آموزش ها” را به آن اضافه می کنیم. . برای نامگذاری صفحات، کافیست روی نام ذکر شده در زیر هر صفحه دوبار کلیک کنید.

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

3- صفحه اصلی

روی صفحه اصلی در نمای پلان دوبار کلیک کنید. با این کار به صفحه Design View هدایت خواهید شد. در این صفحه می توانیم هدر و فوتر اضافه کنیم. منو نیز در این صفحه خواهد بود.

ابتدا یک پس زمینه سیاه به هدر اضافه می کنیم. برای این کار از ابزار Rectangle در بالای صفحه که به صورت (m) نشان داده شده است استفاده می کنیم. روی این ابزار کلیک می کنیم و آن را می کشیم تا یک مستطیل به اندازه بالای هدر از لبه به لبه رسم کنیم. سپس Fill of Black را انتخاب می کنیم و استروک را صفر می کنیم.

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

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

 

ما در این منو نیازی به صفحه اصلی نداریم و فقط باید رنگ ها، موقعیت و گزینه های منو را تغییر دهیم. بنابراین، ابتدا Home را از منو حذف می کنیم. به گزینه Plan در بالای صفحه برمی گردیم و روی صفحه اصلی کلیک راست کرده و Page Properties را انتخاب می کنیم.

ما هیچ گزینه ای را لمس نمی کنیم و فقط گزینه های منو در صفحه خاموش شدن را تغییر می دهیم. سپس به تب A-Master برمی گردیم یا دوباره روی Master دوبار کلیک می کنیم تا به صفحه طراحی برگردیم. حالا در سمت چپ راهنمای هدر را طوری تنظیم می کنیم که با قسمت پایین مستطیل مشکی مطابقت داشته باشد.

روشی ساده تر برای طراحی وب سایت: وب سایت ساز رایگان: معرفی 6 وب سایت ساز رایگان برتر

4- پاورقی

با استفاده از ابزار text یک جعبه متن ایجاد می کنیم و متن مورد نظر را در آن وارد یا کپی و پیست می کنیم. حالا باید فرمتش کنیم. برای این کار یک گزینه متن در نوار بالا و همچنین گزینه ای برای تغییر فونت، اندازه و رنگ وجود دارد. همچنین گزینه هایی برای تغییر سبک پاراگراف وجود دارد. فونت متن را روی Helvetica و اندازه آن را 12 و Leading را روی 160 درصد قرار می دهیم. خط اول متن را انتخاب کرده و با کلیک روی گزینه Bold T در نوار برنامه آن را پررنگ کنید.

اکنون Escape را فشار دهید و با استفاده از ابزار انتخاب (میانبر V) کادر متن را انتخاب کنید و از نوار برنامه در بالای صفحه آن را به صورت فوتر در آورید. علاوه بر این، راهنمای پاورقی را نیز در بالای کادر متن قرار می دهیم.

5- منو

اندازه منو را با توجه به عرض صفحه تغییر می دهیم.

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

اکنون از منو گزینه Label را انتخاب کرده و در نوار برنامه در بالا فونت را تغییر دهید. ما فونت Helvetica را با اندازه 16 انتخاب می کنیم.

در سمت راست منو یک دایره آبی با یک مثلث سفید وجود دارد که به ما امکان می دهد گزینه های منو را تغییر دهیم. گزینه Menu Type را روی All Pages قرار می دهیم و به هیچ گزینه دیگری دست نمی زنیم.

طراحی سایت فروشگاهی: صفر تا صد آموزش با 14 درس رایگان

6- صفحه اصلی

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

تصویر و متن را با هم انتخاب کنید و با استفاده از Command-G یا Object-G آنها را گروه بندی کنید.

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

7- تجسم

حال می خواهیم پیش نمایش کار را ببینیم. روی Preview در بالا کلیک کنید و سایتی را که تاکنون طراحی کرده ایم به یک مرورگر شبیه سازی شده تبدیل کنید. توصیه می کنیم نه تنها در این مرحله، بلکه در طول فرآیند به طور منظم سایت خود را بررسی کرده و ظاهر آن را بررسی کنید. برای تست سایت، File و سپس Test Site in Browser را انتخاب کنید تا سایت در مرورگر پیش فرض نمایش داده شود. آنچه در این مرحله می بینید همان چیزی است که کاربران می بینند.

اگر می خواهید یاد بگیرید که چگونه یک وب سایت از ابتدا بسازید، این 15 آموزش را دانلود کنید

8- شارژ

هنگامی که طراحی وب سایت خود را کامل کردید، راه های مختلفی برای آپلود آن وجود دارد. راه اول استفاده از Adobe Business Catalyst موجود در بسته Creative Cloud است و راه دوم آپلود از طریق FTP است. در روش اول که راهی آسان برای آپلود و نگهداری سایت شما محسوب می شود، Business Catalyst تمامی تنظیمات فنی و هاستینگ را انجام می دهد. برای استفاده از Business Catalyst کافیست روی گزینه انتشار کلیک کنید و مشخصات ثبت شده خود را در سایت Business Catalyst وارد کنید تا بقیه کار برای شما انجام شود.

روش دومی که بسیاری از افراد از آن استفاده می کنند، آپلود سایت از طریق FTP است. هزاران ارائه دهنده میزبانی وجود دارد که شما در آنها ثبت نام می کنید و جزئیات در اختیار شما قرار می گیرد. وقتی این جزئیات را داشتیم، روی File و سپس روی FTP Host کلیک می کنیم.

پس از پر کردن اطلاعات ارائه دهنده میزبان، روی OK کلیک کنید. به این ترتیب Adobe Muse سایت ما را در هاست FTP آپلود می کند.

حتما دانلود کنید: برنامه نویسی فروشگاه اینترنتی با 27 آموزش + نکته

خلاصه و ویدئو

 

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

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