3 เว็บ 3 ดีไซน์ สไตล์มินิมอล | iTopPlus's Blog
02-029-1200
รวมเทคนิคลับ ฉบับออนไลน์ วิธีการทำการตลาดออนไลน์ เริ่มต้นทำธุรกิจบนโลกออนไลน์ด้วย เทคนิคต่างๆ ความรู้เบื้องต้น ความเข้าใจเกี่ยวกับการทำโฆษณาให้ธุรกิจคุณ บน Google.com




3 เว็บ 3 ดีไซน์ สไตล์มินิมอล

3 เว็บ 3 ดีไซน์ สไตล์มินิมอล

Categories : เคล็ดลับการตลาดออนไลน์
Date : 2018-01-19 17:39:49

ออกแบบเว็บไซต์ สไตล์มินิมอลยังไงให้ดูดี และการแสดงผลกับหน้าจอต่างๆ จะออกมาหน้าตายังไงนั้น วันนี้เรามีตัวอย่าง 3 เว็บ 3 สไตล์ มาฝากกันค่ะ

เว็บแรกที่เรานำมารีวิวในวันนี้ คือ เว็บ Talon Family เป็นเว็บเกี่ยวกับการท่องเที่ยว เป็นการแชร์ประสบการณ์การท่องเที่ยวของครอบครัว เริ่มมาจากทุกคนในครอบครัวรักการท่องเที่ยวเป็นชีวิตจิตใจ เพราะการเดินทางเป็นส่วนหนึ่งในชีวิตของครอบครัวนี้ การดีไซน์ของเว็บนี้คือ เป็นลักษณะของ Content แถวเดียว เว็บนี้ฟิลคุมโทนฟ้า-ขาว มีความมินิมอล เน้นความธรรมดา เรียบง่าย  มีความเป็นธรรมชาติ ไม่เยอะ ไม่ฟุ้ง เริ่มจากภาพโลโก้ที่ถูกจัดวางในส่วนกลางของเว็บที่ใช้ภาพ
การ์ตูนน่ารักๆ อย่างเพนกวิน โลโก้สามารถบ่งบอกตัวตนและที่สำคัญคือ เกิดการจดจำง่ายได้อย่างแน่นอน ถัดมาเป็นส่วนของ Banner ที่สามารถใส่ภาพเป็นแบบสไลด์ได้ ซึ่งเชื่อมติดกับส่วนของเมนูบาร์ เว็บนี้ใช้เมนูหลัก 7 เมนูและเมนูย่อยแยกออกมาจากTalon Review 3 เมนูและ Talon ขับถ่าย 2 เมนู ต่อมาส่วนนี้จะเป็นส่วนที่ใส่รายละเอียดหรือ Content ต่างๆ ที่แบ่งแยกเป็นหมวดหมู่เช่น Talon Reviews, Talon Inspiration, Talon Tips & Tools ส่วนท้ายสุดของหน้าเว็บไซต์นี้คือ Footer ส่วนที่ให้ข้อมูลเพิ่มเติมต่างๆ ข้อความหรือรูปภาพ เพื่อให้แสดงในทุกๆ หน้าของเว็บไซต์  ซึ่งอยู่ล่างสุดของเว็บไซต์ เช่น แสดงชื่อ ที่อยู่ เบอร์โทรติดต่อ ช่องทางการติดตาม Social Media ต่างๆ



ตัวอย่าง

การแสดงผลบนหน้าจอโทรศัพท์มือถือ
 



ตัวอย่างการแสดงผลบนหน้าจอ
-จอพีซี 
-จอเครื่องเดสก์ทอปตั้งโต๊ะ
-จอแม็คบุ๊ค


เว็บไซต์ที่เรานำมารีวิว จะสามารถลองรับ Responsive Web Design การแสดงผลเว็บไซต์ที่รองรับทุกหน้าจอการทำงานได้


ถัดมาเว็บ Treasurehunt เป็นหน้าเว็บของธุรกิจ บ้านพักส่วนตัว ในสไตล์ของวัฒนธรรมที่มาผสมผสาน ที่มีการตกแต่งตามเจ้าของบ้าน เหมาะกับนักท่องเที่ยวที่ชอบหาที่พักในสไตล์การเที่ยวแต่เหมือนพักผ่อน
อยู่บ้าน ภาพรวมการดีไซน์ธีมเว็บเลือกใช้พื้นหลัง เป็นลายหินอ่อนสี rose gold texture ตัดกับสีน้ำตาลเข้ม การดีไซน์เว็บนี้จะเป็นเว็บไซต์ 2 ภาษา สังเกตจากรูปธงชาติบนสุดขวามือของหน้าเว็บไซต์ ส่วนโลโก้จะจัดอยู่ส่วนกลางของเว็บไซต์ แถบเมนูของหน้าเว็บนี้จะใช้พื้นหลังเป็นสีน้ำตาลกลางตัด กับฟอนต์สีขาว ให้เมนูหลักต่างๆ เด่นชัดขึ้น Banner มีทั้งหมด 3 ภาพเลื่อนไปเรื่อยๆ ซึ่งภาพจะเปลี่ยนไปตามเวลาที่เรากำหนดไว้ แต่เราสามารถคลิกเลื่อนดูไปเรื่อยๆ Banner ลักษณะนี้เราสามารถสั่งรูปภาพได้มากกว่า 3 ภาพได้อย่างแน่นอน ถัดลงมา การจัดแบ่งภาพกับข้อความเป็นซ้าย ขวา ต่อมาจะเป็นในส่วนของรูปภาพของบ้านพัก ที่จัดวางเป็น 3 แถวบนกับ 3 แถวล่าง ซึ่งจัดแสดงไว้ทั้งหมด 6 ภาพ แน่นอนว่าทุกเว็บไซต์จะต้องจบด้วย ส่วนท้ายคือ Footer ส่วนที่ให้ข้อมูลเพิ่มเติมต่างๆ เช่น ข้อความหรือรูปภาพ โลโก้ เพื่ออำนวยสะดวกให้กับผู้ที่สนใจ สามารถติดต่อใช้บริการได้ง่ายขึ้น ช่วยเน้นย้ำความสนใจของลูกค้าได้อีกด้วย


ตัวอย่าง

การแสดงผลบนจอโทรศัพท์มือถื
 



ตัวอย่างการแสดงผลบนหน้าจอ
-จอพีซี 
-จอเครื่องเดสก์ทอปตั้งโต๊ะ
-จอแม็คบุ๊ค


เว็บไซต์ที่ออกแบบให้ดูผ่านหน้าจอคอมพิวเตอร์อย่างเดียว มักจะมีปัญหาในการทำงาน เมื่อใช้งานผ่านอุปกรณ์ที่มีหน้าจอขนาดเล็กว่า เช่น Mobile Internet Users อุปกรณ์มือถือ เพราะเนื่องจากปัจจุบันนี้ การใช้งานผ่าน Mobile Internet มีการเจริญเติบโตสูง และมีแนวโน้มที่จะแซง Desktop Internet Users ทำให้บุคคลทั่วไปสามารถเข้าชมเว็บไซต์ได้ตลอดเวลา ดังนั้นการออกแบบหน้าจอ Responsive Web Design จะสามารถแสดงผลเว็บไซต์ที่รองรับทุกหน้าจอการทำงานในปัจจุบันได้เป็นอย่างดี
 



เว็บสุดท้ายที่เราจะมารีวิวในวันนี้ เว็บโรงไม้ ณ บางชัน เป็นหน้าเว็บของธุรกิจโฮมสเตย์ สไตล์คันทรี เน้นใช้วัสดุที่เรียบง่ายอย่าง ไม้ หิน และตกแต่งด้วยเฟอร์นิเจอร์ หรืองานผ้าต่างๆ ถึงแม้ในปัจจุบันอาจจะไม่ค่อยได้ยินโฮมสเตย์สไตล์คันทรี ที่นี่มีบริการทั้งห้องพักและอาหาร ท่ามกลางบรรยากาศดีๆ ที่ชาวบ้านแถวนี้เรียกว่า “ท้องอ่าว” นอกจากนั้นหน้าโฮมยังมีพื้นที่ให้ลูกค้าสามารถตกปลา และสามารถจะมองเห็นพระจันทร์ได้ด้วยในยามค่ำคืน


ตัวอย่าง

การแสดงผลบนจอโทรศัพท์มือถือ การดีไซน์เว็บไซต์ ลักษณะของ Content แถวเดียว หน้าเว็บออกแนวคันทรีหน่อย หน่อย โดยใช้พื้นหลังเว็บไซต์เป็นลายไม้ เพื่อสื่อให้เห็นถึงความเป็นธรรมชาติ จะสังเกตว่าเว็บนี้เป็นการดีไซต์เว็บแบบ Content แถวเดียวก็จริง แต่โลโก้ถูกจัดวางอยู่ที่มุมซ้ายมือของหน้าเว็บ และที่เห็นเด่นชัดเลย คือ ในส่วนของเบอร์โทร อยู่กับแถบเมนูของหน้าเว็บ แบ่งออกเป็น 5 เมนูหลักและมีเมนูย่อยแยกออกมาจาก ราคาห้องพักที่มี 2 เมนูย่อยและแตกเมนูย่อยออกอีก 5 เมนู ซึ่งจะเห็นว่าแถบเมนูนี้ไม่จำเป็นต้องมีเยอะ มีแค่จำเป็นที่ต้องใช้ก็ทำให้การดีไซน์ออกมาได้สวยงามเช่นกัน ถัดมาจะเป็นส่วนของ Banner เป็นแบบไซด์เพื่อโชว์ภาพที่เป็นจุดเด่นของธุรกิจ เช่น บริการต่างๆ ของทางโฮมสเตย์ มาถึงส่วนของภาพความประทับใจ แพ็คเก็จห้องรวม แพ็คเก็จห้องเดียว ซึ่งมีการออกแบบแบ่งไว้ชัดเจนอยู่แล้ว และยังสามารถแบ่งพื้นที่ในการใส่แพ็คเก็จและโปรโมชั่น เพื่อสะดวกมากๆ กับผู้ที่สนใจ Footer ของเว็บนี้ ใส่โลโก้พร้อมเบอร์โทร และช่องทางการติดต่ออื่นๆ เช่น Facebook fanpage Line@ และสามารถกรอกอีเมลเพื่อติดตามข่าวสารของทางโฮมสเตย์ได้อีกด้วย  เว็บนี้ถือว่าเป็นการดีไซน์สุดๆ ด้วยการตอกย้ำความสนใจของลูกค้าเพื่อให้ง่ายต่อการจดจำอีกด้วย


รวมตัวอย่าง

การแสดงผลเว็บไซต์ที่รองรับ
ทุกหน้าจอการทำงาน 3 เว็บ 3 สไตล์ ดีไซน์ มินิมอล ดูเผินๆ แล้วดูเรียบไม่มีอะไร  แต่จริงๆ แล้วแฝงไว้ด้วยความสวยงามของงานศิลปะ และตกแต่งเว็บไซต์น้อยชิ้น แต่ว่าแต่ละอันช่างดูเก๋ไก๋เหลือเกิน ซึ่งเว็บไซต์สไตล์มินิมอลแบบนี้ต่าง หากที่เห็นเมื่อไหร่แล้วต้องทำให้เราหยุดดู ดึงความสนใจได้ดีนักเชียว ซึ่งถ้าคุณอยากให้เว็บไซต์ของคุณดูน่าดึงดูดมากขึ้น ก็สามารถลองแต่งเว็บไซต์ให้เป็นสไตล์มินิมอลดูได้ 

______________________________________________________________________________

ITOPPLUS ให้คุ้มคุณภาพครบ!

มืออาชีพจัดทำเว็บไซต์, โฆษณา Google,ให้บริการทุกวัน ทุกเวลา 24 ชั่วโมง กับ 3 ช่องทางการติดต่อ

โทร 02-029-1200

Line : @ITOPPLUS

www.ITOPPLUS.com









ปรึกษาฟรี
ลงทะเบียนรับสิทธิพิเศษตอนนี้!
รับทำเว็บไซต์, Google AdWords









สนใจทำการตลาดออนไลน์
ปรึกษาทีมงาน
รับทำเว็บไซต์, โฆษณา Google

สนใจบริการ