ماکآپ وب سایت توسط یان پیلون

پرسیدن درباره اینکه "بهترین راه برای طراحی یک نمونه اولیه برای وب سایت چیست؟" مانند پرسیدن این است که "بهترین راه برای طراحی یک وب سایت چیست؟" هیچ "بهترین" راهی که منحصر به فرد باشد وجود ندارد. هر نمونه اولیه، مانند هر وب سایت دیگری، دارای شکل، اهداف و استراتژی های خاص خود است. در این مقاله، ما سه روش رایج ایجاد الگوی اولیه برای وب سایت ها را بررسی خواهیم کرد: نرم افزار presentation (عمدتا برای مبتدیان)، نمونه های اولیه کدگذاری شده (متوسط ​​تا پیشرفته) و برنامه های تخصصی نمونه سازی (برای همه سطوح تخصص).

نمونه سازی با نرم افزار presentation

Keynote برای ساخت نمونه های اولیه بسیار محبوب شده است.

برای مبتدیان، همان پاورپوینت قدیمی، یک پایه کسب و کار قابل اعتماد است که منظور ارائه در بیش از دو دهه استفاده شده است. اگر شما به دنبال یک جایگزین مدرن تر هستید، Keynote در حال محبوب شدن است.

بیایید به جوانب مثبت و منفی آن نگاه کنیم تا بتوانید تصمیم مدبرانه ای بگیرید.

مزایای نمونه سازی با برنامه های presentation

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

نقاط ضعف نمونه سازی اولیه با برنامه های presentation

• چشم انداز محدود: همانطور که در کتاب رایگان UXPin راهنمای نهایی برای نمونه سازی، شرح داده شد هنگامی که شما شروع به رسیدگی به جریان کاربران پیشرفته و تعامل با آنها می نمایید، شما در واقع به سقف مهارت های presentation می رسید و نمی توانید از آن انتظار قابلیت های بیشتری داشته باشید.
• همکاری متقابل محدود: اکثر نرم افزارهای ارائه (presentation) دارای همکاری متقابل خاصی نیستند (به جز برای Google Presentation). نکته این است که نرم افزارهای ارائه با همکاری متقابل، فاقد تعامل، امکانات گرافیکی، گزینه های شکل، متن و رنگ است که آنها را برای نمونه سازی اولیه ارزشمند می کند. اگر می خواهید بدون مصالحه همکاری کنید آنگاه یک ابزار نمونه سازی را انتخاب نمایید.
• نمودار جریان محدود: هرچند امکان ارتباط جریان های کاربری پیشرفته وجود دارد اما انجام آن آسان نیست و نقشه های سایت به نمونه های اولیه لینک نمی شوند در حالیکه آنها به یک نرم افزار نمونه سازی اختصاص دارند.
• تعامل متقابل محدود: کاربران مبتکر می توانند خیلی بی نیاز  از نرم افزارهای دیگر باشند اگر از تمام ویژگی های Keynote یا Powerpoint استفاده کنند، اما اگر قصد دارید پیشرفته تر باشید، ممکن است ساده تر و موثرتر باشد که به سمت چیزی تخصصی تر بروید.

اگر میخواهید بیشتر بدانید، Keynotopia دارای تعدادی آموزش درباره ساخت نمونه اولیه برای پاورپوینت و Keynote است.

نمونه سازی اولیه (HTML)

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

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

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

مزایای نمونه سازی اولیه  بصورت کدگذاری شده

• Platform-agnostic: نمونه های اولیه HTML بر روی هر سیستم عامل کار می کند و هیچ کس برای استفاده از آن نیازی به نرم افزار خارجی ندارد.
• مدولار: HTML مبتنی بر مولفه است که می تواند به بهره وری کمک کند.
• هزینه کم: ویراستاران متن HTML رایگان بسیاری وجود دارد، اما لازم است که زمانی را صرف یادگیری زبان نمایید قبل از اینکه بتواند مفید باشد (یا اینکه از این صفحه HTML cheat sheet استفاده نمایید)
• اساس فنی: اگر شما کد آماده ایجاد نمایید (و نه فقط به خاطر یک نمونه اولیه سریع)، به این نحو می توانید در زمان صرفه جویی نمایید.

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

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

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

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

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

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

مزایای استفاده از یک ابزار نمونه سازی اولیه اختصاصی

• سرعت: کاربران قدرتمند می توانند با ابزارهای تخصصی حتی سریعتر از نمونه اولیه کاغذی طراحی کنند زیرا می توانند با چند کلیک ماوس تعاملات پیشرفته ای را ایجاد و کپی نمایند.
• کتابخانه عناصر: در حالی که ابزارهایی مانند InVision برای نمونه های اولیه قابل کلیک سریع عالی هستند یعنی نمونه های اولیه ای که چند صفحه نمایش را با تعاملات ساده (مانند کلیک و حرکت هوور) به یکدیگر پیوند می دهند، ابزارهای دیگر مانند UXPin دارای کتابخانه عناصر داخلی هستند (و به شما اجازه می دهند که حرکات خاص خود را برای استفاده مکرر ایجاد نمایید )
• جریان کاربران پیشرفته: جریان و قابلیت، مهمترین جنبه های نمونه سازی اولیه هستند و اکثر ابزارها دارای این ویژگی های داخلی و نصب شده هستند. اکثر آنها همچنین شما را قادر به تولید نقشه های سایت می نمایند حین آنکه شما صفحه های جدیدی را ایجاد می نمایید و به شما اجازه می دهد آنها را در کنار یکدیگر برای انتقال آسان مشاهده کنید.
• همکاری داخلی: بسیاری از ابزارهای اختصاصی ایجاد همکاری متقابل و متمرکز می نمایند از جمله توانایی اظهار نظر در باره طراحی، ویرایش آنها به عنوان یک تیم، و اشتراک گذاری آنها از طریق URL. بهترین مورد آنها دارای تاریخچه مرور و ذخیره سازی ابری برای ساده سازی گردش کار شما است.
• Presentation بصورت ساده و موثر: این امر به معنی ایجاد خروجی به صورت PDF و یا خروجی برای وب سایت یا برنامه تلفن همراه به منظور تجربه واقعی نمونه اولیه است.طرا

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

انتخاب یک روش نمونه سازی اولیه

برای پاسخ دادن به سوال «بهترین راه برای نمونه سازی اولیه چیست؟» بیان خواهیم کرد که «هر کدام از روش ها می تواند برای شما بهترین باشد». هرچند که هیچ حسن تعبیر و برتری برای "هر کدام که ساده ترین است" و یا "هر کدام که کمترین نیاز به کار را داشته باشد" وجود ندارد. بهترین راه برای نمونه سازی اولیه این است که برای شما بهترین نتایج را تولید کند. شما باید مشخصات هم محصول و هم تیم طراحی را در نظر بگیرید. طراحان و برنامه نویسان با کدامیک از پلاتفرم ها و روشها حرفه ای تر و یا راحت تر هستند ؟ اهداف خاص، فریم های زمانی و محدودیت های مربوط به محصولی که در حال کار با آن می باشید چه هستند. دانستن اینکه می خواهید به کجا بروید مهم ترین بخش است - ما فقط راه های مختلف برای رسیدن به آن را توضیح می دهیم. برای راهنمایی های کاربردی بیشتر در مورد الگو سازی اولیه با فیدلیتی بالا و پایین، راهنمای نمونه سازی اولیه رایگان را دانلود کنید. یاد بگیرید چگونه و چه زمانی از ابزارها و تاکتیک های مختلف ساخت  نمونه اولیه استفاده کنید که بهترین روش های آن مربوط به Zurb، Google Ventures، IDEO و بسیاری دیگر هستند.