طراحي سايت

بخشي از هنر و بخشي علم ، طراحي وب در جنبه هاي خلاقانه و تحليلي ذهن افراد تأثير مي گذارد.

طراحان وب آنچه مفهومي است را در نظر مي گيرند و آن را به صورت تصويري ترجمه مي كنند. تصاوير ، تايپوگرافي ، رنگها ، متن ، فضاي منفي و ساختار در كنار هم قرار مي گيرند و نه تنها يك تجربه كاربر بلكه مجرايي براي انتقال ايده ها را ارائه مي دهند.

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

صرف نظر از تصاوير بصري طراحي وب ، بدون سازماندهي بي معني است. منطق بايد نظم و ترتيب ايده ها و تصاويري را در هر صفحه هدايت كند و همچنين نحوه سفر كاربران به آن را مشخص كند. يك طراح وب ماهر طرح هايي را ايجاد مي كند كه در حداقل تعداد كليك ارائه مي شود.

طراحي وب سايت را مي توان به چندين زيرشاخه تقسيم كرد. برخي از طراحان حرفه خود را در زمينه هايي مانند UI ، UX ، SEO و ساير زمينه هاي تخصصي تخصص مي دهند. با شروع سفر خود به عنوان يك طراح ، بايد كمي در مورد همه اين جنبه هاي مختلف طراحي وب بدانيد.

شركت طراحي سايت  از قسمت پشتي پشتيباني مي شود 

شما در حين يادگيري با اصطلاحات back end و front مواجه مي شويد. اكثر مبتديان اين موارد را با هم مخلوط مي كنند ، بنابراين مهم است كه تفاوت آنها را بدانيد.

قسمت پشتي همه چيزهايي است كه در پشت صحنه نمايش يك وب سايت وجود دارد. وب سايت ها روي سرورها قرار دارند. هنگامي كه يك كاربر درخواست مي كند مانند پيمايش به بخش خاصي از وب سايت ، سرور اين اطلاعات ورودي را مي گيرد و به نوبه خود تمام HTML و ساير كد ها را خارج مي كند تا در مرورگر كاربر به درستي نمايش داده شود. سرورها داده هايي را كه يك وب سايت براي عملكرد لازم دارد ، ميزباني مي كنند.

توسعه دهندگان وب كه در توسعه پشتيبان تخصص دارند اغلب برنامه نويسان هستند كه به زبان هايي مانند PHP كار مي كنند ، ممكن است از چارچوب پايتون مانند Django استفاده كنند ، كد جاوا بنويسند ، پايگاه هاي داده SQL را مديريت كنند يا از زبان ها يا چارچوب هاي ديگر براي اطمينان از سرورها ، برنامه ها ، و پايگاه هاي داده همه با هم كار مي كنند.

براي تبديل شدن به يك طراح وب ، نيازي نيست كه در مورد آنچه در پشت سر اتفاق مي افتد عميق شويد ، اما حداقل بايد هدف آن را درك كنيد.

بدانيد قسمت جلويي چيست

قسمت پشتي سمت سرور در نظر گرفته مي شود در حالي كه قسمت جلويي سمت سرويس گيرنده است. قسمت جلويي جايي است كه HTML ، CSS ، جاوا اسكريپت و ساير كدها براي نمايش يك وب سايت با هم كار مي كنند. اين بخشي از طراحي وب است كه افراد با آن درگير مي شوند.

همانطور كه در حرفه خود پيشرفت مي كنيد ، ممكن است وارد حوزه هاي تخصصي تري براي توسعه وب شويد. ممكن است در نهايت با چارچوب هايي مانند React يا Bootstrap كار كنيد يا با JavaScript يا jQuery عميق تر شويد. اينها مناطق پيشرفته تري هستند كه در ابتدا نبايد خيلي نگران آنها باشيد.

اگرچه بهترين طراحي وب در اجرا بي دردسر به نظر مي رسد ، اما همه آنها بر اساس اصول راهنماي طراحي بصري است. اگرچه طراحان وب كميابي وجود دارند كه به طراحي بصري ذاتي توجه دارند ، اما براي اكثر ما اين موضوعي است كه بايد به تنهايي ياد بگيريم.

نحوه عملكرد طراحي بصري را درك كنيد. قوانين تركيب بندي را بشناسيد و نحوه تركيب عناصر مانند شكل ، فضا ، رنگ و هندسه را درك كنيد.

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

1. مفاهيم كليدي طراحي بصري را درك كنيد

خط

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

شكل ها

سه شكل اساسي در طراحي بصري مربع ، دايره و مثلث است. مربع ها و مستطيل ها براي بلوك هاي محتوا ، دايره ها براي دكمه ها و مثلث ها اغلب براي نمادهايي استفاده مي شوند كه يك پيام مهم يا فراخوان به عمل را همراهي مي كنند. اشكال همچنين داراي احساسات احساسي هستند ، مربع هايي با قدرت مرتبط هستند ، دايره هايي با هماهنگي و راحتي ، و مثلث هايي با اهميت و عمل.

بافت

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

رنگ

براي ايجاد طرح هايي كه چشم را خسته نمي كند ، بايد خود را در زمينه تئوري رنگ آموزش دهيد. درك چرخه رنگ ، رنگ هاي مكمل ، رنگ هاي متضاد و احساساتي كه رنگ هاي مختلف به آن گره خورده اند ، شما را به يك طراح وب بهتر تبديل مي كند.

شبكه ها

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

2. اصول اوليه HTML را بشناسيد

زبان نشانه گذاري ابرمتن (HTML) دستورالعمل هايي براي نحوه نمايش محتوا ، تصاوير ، ناوبري و ساير عناصر وب سايت در مرورگر وب افراد ارائه مي دهد. اگرچه نيازي به متخصص در HTML نداريد ، اما هنوز هم مي توانيد با نحوه كار آن آشنا شويد ، حتي اگر از يك پلت فرم طراحي بصري مانند Webflow استفاده مي كنيد.

تگ هاي HTML دستورالعمل هايي هستند كه مرورگر براي ايجاد وب سايت از آنها استفاده مي كند. عنوانها ، پاراگرافها ، پيوندها و تصاوير همه توسط اين برچسبها كنترل مي شوند. شما به ويژه مي خواهيد بدانيد كه برچسب هاي عنوان مانند H1 ، H2 و H3 براي سلسله مراتب محتوا چگونه استفاده مي شوند. برچسب هاي هدر علاوه بر تأثير بر ساختار طرح بندي ، در نحوه طبقه بندي خزنده هاي وب در طراحي و تأثير آنها بر نحوه نمايش آنها در رتبه بندي جستجوي ارگانيك مهم است.

CSS (يا تركيب ورق هاي سبك) يك ظاهر طراحي شده و دستورالعمل هاي اضافي در مورد نحوه ظاهر شدن يك عنصر HTML را ارائه مي دهد. انجام كارهايي مانند استفاده از فونت ، افزودن پد ، تنظيم تراز ، انتخاب رنگ و حتي ايجاد شبكه ها همه از طريق CSS امكان پذير است.

دانستن نحوه عملكرد CSS به شما اين مهارت را مي دهد كه وب سايت هايي منحصر به فرد ايجاد كنيد و قالب هاي موجود را سفارشي كنيد. بياييد چند مفهوم كليدي CSS را مرور كنيم.

كلاسهاي CSS

كلاس CSS ليستي از ويژگي هايي است كه در ايجاد يك عنصر جداگانه گرد هم مي آيند. چيزي شبيه به متن اصلي مي تواند فونت ، اندازه و رنگ را همه بخشي از يك كلاس CSS واحد داشته باشد.

كلاسهاي تركيبي CSS

يك كلاس تركيبي بر اساس يك كلاس پايه موجود ساخته مي شود. اين ويژگي همه ويژگي ها مانند اندازه ، رنگ و تراز را كه ممكن است قبلاً وجود داشته باشد به ارث مي برد. سپس مي توان ويژگي ها را تغيير داد. كلاسهاي تركيبي در وقت شما صرفه جويي مي كند و به شما امكان مي دهد تغييرات كلاس را تنظيم كنيد كه مي توانيد هرجا كه نياز داريد در طراحي وب اعمال كنيد.

آگاهي از نحوه عملكرد CSS هنگام يادگيري طراحي وب ضروري است. همانطور كه در بخش مربوط به HTML ذكر شد ، توصيه مي كنيم براي مشاهده نحوه كار CSS به دانشگاه Webflow مراجعه كنيد.

4. پايه هاي UX را بياموزيد

UX جادويي است كه يك وب سايت را زنده مي كند و آن را از چيدمان ثابت عناصر به چيزي تبديل مي كند كه با احساسات شخصي كه در آن حركت مي كند درگير مي شود.

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

در اينجا چند اصل UX وجود دارد كه بايد بدانيد.

پرسوناي كاربر

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

ساختار اطلاعات

بدون سازماندهي واضح ، مردم دچار سردرگمي و جهش مي شوند. معماري اطلاعات و نگاشت محتوا نقشه اي را براي نحوه عملكرد وب سايت و هر بخش در ارائه يك سفر واضح از مشتري ارائه مي دهد.

جريان هاي كاربر

ممكن است هنگامي كه به پروژه هاي طراحي گسترده تري مي پردازيد ، ايجاد جريان كاربر ايجاد شود ، اما اگر در مورد اينها فكر كنيد و آنها را براي طرح هاي اوليه خود بسازيد ، در آينده وضعيت بهتري خواهيد داشت. جريان هاي كاربر نحوه حركت افراد در يك طرح را بيان مي كند. آنها به شما كمك مي كنند تا مهمترين بخشها را اولويت بندي كرده و از دسترسي افراد به آنها اطمينان حاصل كنيد.

واير فريم ها

Wireframes نشان مي دهد كه در كدام صفحه صفحات وب عنوان ها ، متن ، تصاوير ، فرم ها و ساير عناصر قرار داده مي شود. حتي اگر در حال طراحي يك وب سايت ساده يك صفحه اي هستيد ، ترسيم يك قاب سيم به شما راهنماي محكمي براي كار مي دهد. همانطور كه به وب سايت هاي پيچيده تر مي رويد ، فريم هاي سيمي در ايجاد يك تجربه سازگار ، ساختار بندي طرح ها و از دست ندادن هر چيزي كه نياز به گنجاندن دارد ، ضروري هستند.

نمونه سازي

نمونه هاي اوليه مي توانند سطوح مختلفي از وفاداري داشته باشند اما به عنوان نمايشي از يك طرح عملكردي عمل مي كنند. تصاوير ، تعاملات ، محتوا و ساير عناصر مهم همه سر جاي خود هستند و طرح دنياي واقعي را تكرار مي كنند. نمونه هاي اوليه براي دريافت بازخورد و تنظيم دقيق طرح در طول فرآيند استفاده مي شوند.

5. با UI آشنا شويد

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

بياييد دو اصل كليدي رابط كاربري را مرور كنيم: طراحي بصري و سادگي.

نحوه ايجاد رابط هاي بصري

تعامل و تعامل با يك وب سايت بايد سازگار باشد و از الگوهاي قابل تكرار پيروي كند. افرادي كه بر روي يك وب سايت فرود مي آيند بايد فوراً سيستم هايي را كه در حال حركت در آن هستند ، درك كنند.

UI را ساده كنيد

UI براي بهينه سازي قابليت استفاده وجود دارد. اين بدان معني است كه استفاده از كنترل ها آسان و همچنين در عملكرد آنها واضح است. اين كه آيا تعداد گزينه هاي ناوبري را به حداقل مي رسانيد ، فرآيند تسويه حساب را سريع مي كنيد يا ساير عناصر تعاملي را كه دسترسي را افزايش مي دهند ، ادغام مي كنيد ، درك UI به شما كمك مي كند تا تجربه شخصي را در تعامل با يك وب سايت ساده كنيد. طراحي سايت املاك

البته ، رابط كاربري يك موضوع گسترده است كه نمي توان آن را تنها در چند پاراگراف ضبط كرد. پيشنهاد مي كنيم پست وبلاگ "10 نكته ضروري در طراحي UI (رابط كاربري)" را به عنوان آغازگر رابط كاربري بررسي كنيد.

مطالب مرتبط: UX در مقابل UI: تفاوت هاي كليدي كه هر طراح بايد بداند

6. آشنايي با اصول ايجاد طرح بندي

چشمان ما به طور خودكار به الگوهاي طراحي خاصي مي چسبد و مسيري آسان را از طريق طراحي وب ايجاد مي كند. ما به طور شهودي مي دانيم كجا بايد نگاه كنيم زيرا اين الگوها را بارها و بارها هنگام استفاده از رسانه ها در طول زندگي خود ديده ايم. دانستن الگوهاي طراحي به شما كمك مي كند وب سايت هايي ايجاد كنيد كه جريان صافي در محتوا و تصاوير داشته باشند. دو الگوي معمول طرح بندي وب كه بايد در مورد آنها بدانيد الگوهاي Z و الگوهاي F هستند.

الگوي Z

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

الگوي F

طرح هاي متن دار ، مانند يك نشريه آنلاين يا يك وبلاگ ، اغلب از الگوي F متمايز پيروي مي كنند. در سمت چپ صفحه ، ليستي از مقالات يا پست ها را مشاهده مي كنيد و در قسمت اصلي صفحه ، رديف هايي از اطلاعات مرتبط را مشاهده مي كنيد. اين الگو به گونه اي بهينه شده است كه همه اطلاعات مورد نياز را در اختيار افراد قرار دهد ، حتي اگر آنها به سرعت به آن توجه كنند.

مطالب مرتبط: طرح صفحات وب: آناتومي وب سايت كه هر طراح بايد ياد بگيرد