10 نمونه چیدمان وب سایت راک جامد

 10 نمونه چیدمان وب سایت راک جامد

John Morrison

10 نمونه چیدمان وب سایت راک جامد

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

هر پروژه منحصر به فرد است و یک راه حل منحصر به فرد را می طلبد، اما من این کار را انجام داده ام. در نظر گرفتن چند تراز سنگی جامد و فوق‌العاده همه‌کاره که می‌توانم زمانی که گیر می‌کنم از بین بروم، مفید است.

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

همچنین ببینید: 50+ بهترین فونت اعداد برای نمایش اعداد

کاوش دیجیتال دارایی ها

ساده نگه داشتن آن

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

طراحان اغلب در مورد فرآیند چیدمان بیش از حد تاکید می کنند. ما تمایل داریم به یک پروژه نزدیک شویم در حالی که فکر می کنیم باید از هر نظر کاملاً منحصر به فرد باشد تا ارزش وقت ما و پول مشتری را داشته باشد.

با این حال، اگر شما یکبرای مثال، قالب وب‌سایت Vcard. نگاه کنید که چگونه از عکس یک شخص به عنوان پس‌زمینه برای کل وب‌سایت استفاده می‌کند.

یا می‌توانید از همین مفهوم برای ایجاد وب‌سایت‌های تجارت الکترونیک بهتر، مانند طرح زمینه وردپرس Flatsome استفاده کنید.

9. شبکه برق

شبکه برق پیچیده‌ترین طرح‌بندی در این مقاله است، اما یکی از مؤثرترین طرح‌بندی‌هایی است که برای صفحاتی که نیاز به انواع محتوای مرتبط دارند دیده‌ام. از تصاویر و پخش‌کننده‌های موسیقی گرفته تا متن و ویدیو، می‌توانید تقریباً هر چیزی را در این طرح‌بندی قرار دهید و قوی باقی می‌ماند.

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

نمونه‌های الگوهای وب‌سایت and Themes

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

موضوع وردپرس روزنامه یکی از بسیاری از تم های وبلاگ نویسی است که از طرح شبکه برق استفاده می کند. همین طرح‌بندی را در بسیاری از وب‌سایت‌های خبری معتبر از BBC گرفته تا CNN، Huffington Post و موارد دیگر مشاهده خواهید کرد.

10. عکس تمام صفحه

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

خواندن محتوا زمانی که روی یک تصویر پس‌زمینه گذاشته می‌شود، بنابراین ایده اصلی در اینجا ایجاد یک نوار افقی مات (یا تقریباً مات) است که در بالای تصویر قرار می‌گیرد و به عنوان محفظه‌ای برای پیوندها، کپی‌ها، لوگوها و سایر محتواها عمل می‌کند.

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

نمونه‌های قالب و تم‌های وب‌سایت

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

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

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

نتیجه گیری

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

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

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

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

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

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

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

1. Three Boxes

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

همچنین ببینید: آیا تا به حال باید یک لوگو با قیمت 5 دلار طراحی کنید؟

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

اشکال شبح‌شده در امتداد بالا، قسمت‌هایی هستند که می‌توانند برای آرم‌ها، نام‌های شرکت، پیمایش، نوارهای جستجو استفاده شوند. و هر محتوای اطلاعاتی و کاربردی دیگری که معمولاً در یک وب سایت وجود دارد.

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

نمونه قالب ها و تم های وب سایت

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

Hurst یک الگوی وب سایت HTML است که از طرح بندی سه جعبه به طور کاملاً مؤثر استفاده می کند. همانطور که در این مشاهده می کنیدبه عنوان مثال، طرح به خوبی کار می کند تا هم کسب و کار و هم محصولات آن را بدون اضافه کردن درهم و برهمی به طراحی برجسته کند.

Bloom نمونه عالی دیگری از یک قالب HTML است که از مفهوم طراحی برای ایجاد یک طراحی نمونه کار جذاب استفاده می کند. . این طراحی از تمام مزایای صفحه نمایش برای ایجاد یک وب سایت منظم برای نمایش کارهای شما استفاده می کند.

2. اسکرین شات های سه بعدی

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

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

نمونه قالب ها و تم های وب سایت

در حالی که راه هایی برای ایجاد افکت های سه بعدی حتی با هیچ چیز جز CSS وجود دارد، بهترین و ساده ترین راه برای ایجاد هدرهای سه بعدی جالب در وب سایت ها استفاده از یک افزونه وردپرس مانند Slider Revolution است. این به شما امکان می دهد تخیل خود را آزاد کنید تا مسحور کننده ایجاد کنیدنمایش های اسلاید سه بعدی و اشیاء تعاملی در وب سایت ها.

به عنوان مثال، ما می سازیم یک تم وردپرس است که از افزونه Slider Revolution برای ایجاد بخش های تعاملی شگفت انگیز در قالب های وب سایت خود با طرح های سه بعدی استفاده می کند.

یا می توانید یک نوار لغزنده تصویر سه بعدی CSS خالص مانند این بسازید.

3. شبکه پیشرفته

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

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

همانطور که در مورد اول ذکر کردیم. چیدمان، بلوک ها نباید تصویر باشند. برای مثال، می‌توانید آن را به‌عنوان بلوک‌هایی از متن روی تصاویر مربع سمت چپ در سمت راست تصور کنید.

نمونه‌های قالب‌ها و تم‌های وب‌سایت

شما می‌توانید رویکردهای بسیاری برای طراحی وب‌سایت‌های مبتنی بر شبکه داشته باشید. . چارچوب هایی مانند Bootstrap و Foundation برای این نوع وب سایت ها ساخته شده اند. با این حال، طرح شبکه پیشرفته عمدتا در طراحی وب سایت نمونه کارها محبوب است.

Leedoیک مثال عالی که نشان می‌دهد چگونه می‌توان یک وب‌سایت نمونه کار تمیز با استفاده از طرح‌بندی شبکه‌ای پیشرفته ایجاد کرد.

الگوی نمونه کارها مینیمالیسم HTML از طراحی شبکه به روشی متفاوت برای نمایش گالری نمونه کارها استفاده می‌کند.

این به شما بستگی دارد که این مفهوم را از آن خود کنید.

4. گرافیک ویژه

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

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

نمونه قالب ها و تم های وب سایت

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

Lamira یک تم وردپرس است که به شما نشان می دهد چگونه از این گرایش به طور موثر برای تبلیغ محصول خود در صفحه اصلی وب سایت استفاده کنید. برای نمایش و نمایش بهترین محصولات شما عالی است.

این مفهوم همچنین برای وب‌سایت‌های تجاری کاملاً کار می‌کند. قالب وب سایت FinWin HTML از استراتژی برای انسانی کردن یک تجارت شرکتی استفاده می کند.

5. Five Boxes

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

بدیهی است که با اضافه کردن به چیدمان، موارد ثانویه کوچکتر و کوچکتر می شوند، بنابراین برای بیشتر استفاده ها، احتمالاً پنج جعبه نزدیک می شوند. محدودیت.

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

نمونه‌های قالب‌ها و تم‌های وب‌سایت

پنج جعبه مفهوم بسیار عجیبی است که شما آن را به دفعات مشاهده نمی‌کنید. . اما در اینجا و آنجا با وب سایتی مواجه خواهید شد که از این استراتژی بسیار عالی استفاده می کند.

ECOSHOP یک قالب HTML برای فروشگاه های تجارت الکترونیک است و از مفهوم پنج جعبه برای ایجاد یک طراحی صفحه اصلی شبکه مانند استفاده می کند. .

همچنین می توانید از آن برای وبلاگ ها و وب سایت های نمونه کار نیز استفاده کنید، یک مثال خوب الگوی Voku HTML است.

6. نوار کناری ثابت شده

تا کنون تمام سایت هایی که دیده ایم دارای ناوبری افقی بالا بوده اند. راگزینه محبوب دیگر البته ناوبری عمودی است که به ایجاد یک ستون عمودی قوی در سمت چپ صفحه کمک می کند. اغلب این یک عنصر ثابت است که در حالی که بقیه صفحه اسکرول می شود در همان جایی که هست می ماند. دلیل این امر این است که پیمایش می تواند به راحتی از هر نقطه از سایت قابل دسترسی باشد.

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

نمونه‌های قالب‌ها و تم‌های وب‌سایت

اصلاح سایدبار یک طرح رایج است که در طراحی وب سایت نمونه کارها استفاده می شود. این به ویژه برای وب سایت های شخصی به سبک CV برای افزودن یک بخش نمایه مانند مفید است.

Sonex یک قالب HTML نمونه کار زیبا است که نوار کناری ثابتی دارد. این به شما امکان می دهد منو و پیوندهایی را به کانال های اجتماعی خود به روشی خلاقانه اضافه کنید.

الگوی Moler HTML راه دیگری برای استفاده از مفهوم نوار کناری ثابت را به شما نشان می دهد.

7. عنوان & گالری

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

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

نمونه قالب ها و تم های وب سایت

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

Satie یک الگوی HTML عالی است که به شما نشان می‌دهد چگونه این کار را انجام می‌دهید.

Park یکی دیگر از الگوهای HTML است. به عنوان مثال می توانید از آن برای ایجاد وب سایت های نمونه کار الهام بگیرید.

8. عکس ویژه

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

نمونه قالب ها و تم های وب سایت

مطمئنا، این یک مفهوم بسیار رایج است. اما چالش این است که چقدر می‌توانید با این مفهوم خلاق شوید؟

Centrix را انتخاب کنید.

John Morrison

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