สร้างเว็บไซต์จากเว็บไซต์ที่คุณชอบ
หากคุณเคยเห็นเว็บไซต์ที่ชอบเลย์เอาต์หรือบรรยากาศ ชี้ Briks ไปที่เว็บไซต์นั้น Briks ศึกษาว่าหน้านั้นประกอบกันอย่างไร แล้วสร้างเว็บไซต์ของคุณในแนวทางเดียวกัน ด้วยคำและรูปภาพของคุณเอง หน้านี้อธิบายการเพิ่มเว็บไซต์และภาพหน้าจอ สิ่งที่ Briks อ่านและไม่เคยนำไป และสิ่งที่ควรทำเมื่ออ่านเว็บไซต์ไม่ได้
การเพิ่มเว็บไซต์และภาพหน้าจอ
เปิดขั้นตอน
ที่ไหน: Show what you like
เป็นขั้นตอนที่สามของ New project และมีป้ายกำกับ Optional แผงนี้บอกว่าใช้ทำอะไร: "Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business."
เพิ่มเว็บไซต์
ที่ไหน: A site to learn from
พิมพ์หรือวางที่อยู่ แล้วกด Add หรือ Enter จะไม่ใส่ https ก็ได้ แต่ละโปรเจกต์ใส่ได้ 1 เว็บไซต์ หากใส่เว็บไซต์ที่สองจะขึ้นข้อความ “One site per project. Remove it to add another.” เว็บไซต์จะแสดงเป็นแท็กพร้อมเครื่องหมายกากบาทสำหรับลบ
เพิ่มภาพหน้าจอ
ที่ไหน: Screenshots
กด Add screenshots แล้วเลือกไฟล์ JPEG, PNG หรือ WebP ขนาดไม่เกิน 12 MB ต่อไฟล์ ตัวนับจะแสดงจำนวนที่คุณมี สูงสุด 6 of 6
บอกว่าภาพหน้าจอแต่ละภาพแสดงอะไร
ที่ไหน: Screenshots
เลือก Whole page และหากทราบ ให้เลือกหน้าจอที่ใช้ถ่ายภาพ: Desktop, Tablet หรือ Phone (Screen size: detect จะหาให้เอง) หรือเลือก One section แล้วเลือกส่วนที่ภาพแสดง เช่น hero, pricing, testimonials หรือ footer
ไปต่อ
ที่ไหน: Show what you like
กด Next หน้าตรวจทานจะแสดงที่อยู่ของเว็บไซต์และนับภาพหน้าจอของคุณ
คุณยังนำหนึ่งเว็บไซต์จากกล่องบน briks.dev มาได้ก่อนสมัคร: เปิดเมนู + เลือก Add a site you like แล้วเว็บไซต์จะมาอยู่ที่ขั้นตอนนี้หลังสมัคร
สิ่งที่ Briks อ่าน
เว็บไซต์จะถูกอ่านที่ความกว้างของเดสก์ท็อป แท็บเล็ต และโทรศัพท์ หลังจาก Briks ตอบแบนเนอร์คุกกี้และปิดป๊อปอัปแล้ว โดยตรวจสิ่งต่อไปนี้:
- Layout: ส่วนต่าง ๆ จากบนลงล่าง ความกว้างของเนื้อหา จำนวนคอลัมน์ และสิ่งที่เปลี่ยนไปบนโทรศัพท์
- Spacing: จังหวะระหว่างส่วนต่าง ๆ และภายในแต่ละส่วน
- ตัวอักษร: ขนาดและน้ำหนักของหัวข้อและข้อความ และบุคลิกของแบบอักษร
- Colour: พื้นหลัง สีของข้อความ และสีเน้น
- การเคลื่อนไหว: สิ่งที่ค่อยๆ ปรากฏหรือเลื่อนเข้ามาเมื่อเลื่อนหน้า สิ่งที่ตรึงอยู่กับที่ แถวที่เคลื่อนที่เอง และสิ่งที่ลิงก์กับปุ่มทำเมื่อชี้เมาส์ไปที่มัน
- ส่วนหัวและเมนู: แถวลิงก์ธรรมดา เมนูแบบเลื่อนลง หรือแผงขนาดใหญ่ แต่ละแผงจะถูกเปิดและตรวจดู
- ภาพวาด: หากหน้านั้นใช้ภาพวาดแทนภาพถ่าย รูปภาพของคุณจะถูกวาดด้วยลายเส้นที่คล้ายกัน
ภาพหน้าจอบอก Briks ได้น้อยกว่า คือเลย์เอาต์และการจัดแนว ระยะห่าง ขนาดของพาดหัว สี และว่าเป็นโทนสว่างหรือโทนมืด ภาพหน้าจอที่ทำเครื่องหมาย One section ใช้กับส่วนนั้นเท่านั้น
สิ่งที่ไม่เคยเก็บ
แผงนี้บอกไว้ตรง ๆ ว่า “หนึ่งเว็บไซต์ต่อหนึ่งโปรเจกต์ เราวัดโครงสร้าง จังหวะ และตัวอักษรของเว็บไซต์นั้น ไม่มีการคัดลอกใด ๆ” ในทางปฏิบัติคือ:
- ถ้อยคำ ก่อนเผยแพร่ Briks จะตรวจเว็บไซต์ของคุณว่ามีประโยคที่ยกมาจากเว็บไซต์ที่คุณชอบหรือไม่ และเขียนใหม่ด้วยน้ำเสียงของธุรกิจคุณเอง ส่วนประโยคจากบรีฟของคุณจะไม่ถูกแตะต้อง
- โลโก้และชื่อ ส่วนหัวของเว็บไซต์แสดงชื่อของคุณ โลโก้ที่คุณอัปโหลด หรือสัญลักษณ์ที่วาดขึ้น
- รูปภาพ รูปของคุณมาจากคลังของสตูดิโอ ถูกวาดใหม่ให้คุณ หรือเป็นรูปที่คุณเพิ่มเอง
- บริษัทอื่น แถวโลโก้ลูกค้าหรือพันธมิตรจะแสดงเฉพาะชื่อที่คุณให้มา
คำถามก่อนสร้างเขียนจากบรีฟและที่อยู่เว็บของคุณเท่านั้น ไม่ได้มาจากข้อความของเว็บไซต์อื่น
เว็บไซต์ ภาพหน้าจอ หรือทั้งสองอย่าง
Briks ทำตามเว็บไซต์ได้ใกล้เคียงเพียงใด ขึ้นอยู่กับสิ่งอื่นที่คุณให้
| สิ่งที่คุณเพิ่ม | Briks ทำอะไรได้บ้าง |
|---|---|
| หนึ่งเว็บไซต์และไม่มีอะไรอื่น | หน้านั้นกำหนดลำดับส่วนต่าง ๆ ของหน้าแรก สร้างขึ้นให้เหมาะกับธุรกิจของคุณ |
| เว็บไซต์พร้อมภาพหน้าจอ | ทั้งสองอย่างร่วมกันนำทางการสร้าง เว็บไซต์จึงไม่ได้กำหนดลำดับอีกต่อไป ภาพหน้าจอของหนึ่งส่วนจะกำหนดส่วนนั้น |
| ภาพหน้าจอเท่านั้น | ใช้เป็นแนวทางของเลย์เอาต์และหน้าตา ส่วนภาพหน้าจอของแต่ละส่วนจะเป็นตัวกำหนดส่วนนั้น |
| การตั้งค่าใน Your brand | สิ่งเหล่านี้สำคัญกว่าเว็บอ้างอิงทุกเว็บ สีเฉพาะของคุณจึงยังคงอยู่ แม้เว็บที่คุณชอบจะเป็นสีเขียว |
วัดผลงานที่สร้างเทียบกับเว็บไซต์
เมื่อเพิ่มเว็บไซต์แล้ว ขั้นตอนนี้จะแสดง Measure the build against the reference ซึ่งปิดไว้เป็นค่าเริ่มต้น เมื่อเปิด Briks จะเปรียบเทียบหน้าที่สร้างกับเว็บไซต์ที่คุณชอบก่อนเผยแพร่ และแก้ความแตกต่างที่วัดได้ ใช้ได้เฉพาะเมื่อเว็บไซต์เป็นข้อมูลอ้างอิงเดียวของคุณ โดยไม่มีภาพหน้าจอ เพราะเป็นกรณีที่หน้าของคุณทำตามเลย์เอาต์ของเว็บไซต์นั้น ตัวเลือกนี้ใช้เครดิตและเวลาในการสร้างเพิ่ม จึงควรปิดไว้ เว้นแต่คุณต้องการให้ตรงกันมาก ภายหลังเปลี่ยนได้ใน Preferences ที่ Measure builds against the reference
เว็บไซต์ส่งผลต่อส่วนอื่นของการตั้งค่าอย่างไร
- ไม่มีรูปลักษณ์หรือฮีโร่ให้เลือก ขั้นตอน How it is built แสดงข้อความ "Your reference site decides the look and the hero, so there is none to choose." บน briks.dev Pick a look first จะปิดอยู่พร้อมข้อความ "The site you like sets the look." ดู เลือกรูปลักษณ์
- คำถามน้อยลง Briks ไม่ถามเรื่องเลย์เอาต์ หน้าตา หรือสิ่งที่ควรนำหน้า เพราะเว็บไซต์ตอบเรื่องเหล่านั้นอยู่แล้ว
- Dashboards ใช้ภาพอ้างอิงได้เช่นกัน Briks อ่านหน้าจอเพื่อดูการนำทาง (แถบด้านข้างหรือแถบด้านบน) และจำนวนแผง ตาราง และแผนภูมิที่มี แดชบอร์ดส่วนใหญ่อยู่หลังการลงชื่อเข้าใช้ จึงมักใช้สกรีนช็อตเพื่อแสดง
ระหว่างที่กำลังสร้าง การสนทนาจะมีกล่องชื่อ What your references decided แสดงสิ่งที่แต่ละรายการกำหนดไว้ ได้แก่ ความกว้างของเนื้อหา จังหวะ เมนูของส่วนหัว และการเคลื่อนไหว
เมื่ออ่านเว็บไซต์ไม่ได้
หน้าสาธารณะส่วนใหญ่อ่านได้ปกติ เหตุผลที่พบบ่อยที่ทำให้บางหน้าอ่านไม่ได้มีดังนี้
- อยู่หลังหน้าลงชื่อเข้าใช้ Briks เห็นสิ่งที่ผู้เยี่ยมชมที่ไม่ได้ลงชื่อเข้าใช้เห็น ใช้ภาพหน้าจอสำหรับสิ่งที่อยู่หลังการลงชื่อเข้าใช้
- ปฏิเสธผู้เยี่ยมชมอัตโนมัติ บางเว็บไซต์ตอบกลับด้วยการตรวจสอบว่าไม่ใช่หุ่นยนต์แทนที่จะแสดงหน้าเว็บ Briks จะลองเข้าอีกทางหนึ่ง และหากถูกบล็อกอีกก็จะข้ามเว็บไซต์นั้น
- แบนเนอร์คุกกี้และป๊อปอัป ไม่ค่อยเป็นปัญหา เพราะ Briks ตอบรับแบนเนอร์และปิดป๊อปอัปก่อนเริ่มตรวจ
หากอ่านเว็บไซต์ไม่ได้แต่อ่านภาพหน้าจอของคุณได้ การสร้างจะดำเนินต่อโดยไม่ใช้เว็บไซต์นั้น และกล่องจะแสดงว่า "1 reference could not be read and was skipped." หากอ่านสิ่งที่คุณเพิ่มไม่ได้เลย การสร้างจะหยุด แทนที่จะออกแบบเว็บไซต์ที่คุณไม่ได้ขอ การสร้างที่หยุดแบบนี้จะไม่ถูกเรียกเก็บเงิน และเครดิตที่กันไว้จะคืนให้ สิ่งที่สตูดิโอแจ้งขึ้นอยู่กับสาเหตุ:
| สิ่งที่สตูดิโอแจ้ง | สิ่งที่ต้องทำ |
|---|---|
| ‘ไม่สามารถเปิดที่อยู่อ้างอิงได้’ และ ‘ไม่มีการเรียกเก็บเงิน’ | กด Build without it เพื่อสร้างตามคำขอเดิมด้วยคำและคำตอบของคุณตามที่เป็นอยู่ โดยจะกันเครดิตของโปรเจกต์ใหม่ไว้อีกครั้ง หรือกด Remove it ซึ่งจะเปิด Reference site ใน Preferences ที่ปุ่ม Remove จะนำที่อยู่ออก |
| “The reference site turned the studio's browser away, so it could not be read. Please try a different reference.” | เริ่มโปรเจกต์ใหม่ด้วยภาพหน้าจอของหน้าเว็บใต้ Screenshots หรือด้วยเว็บไซต์อื่น |
| "ไม่สามารถอ่านเว็บไซต์อ้างอิงของคุณได้เนื่องจากข้อผิดพลาดของระบบ โปรดลองอีกครั้งภายหลัง" | กด Try again ภายหลัง ข้อความและคำตอบของคุณถูกเก็บไว้ จึงไม่ต้องตอบคำถามซ้ำ หรือพิมพ์ในช่องเพื่อเริ่มใหม่โดยเพิ่มข้อความใหม่ของคุณเข้าไป |
กลุ่ม Reference site ใน Preferences แสดงที่อยู่จนกว่าเว็บไซต์จะถูกเผยแพร่ครั้งแรก คุณจึงตรวจได้ว่าบันทึกตามที่ตั้งใจ
ตัวอย่างการใช้งานจริง
บรีฟ: คลินิกทันตกรรมครอบครัวในแฮร์โรเกตที่มีทันตแพทย์สี่คน เปิดเช้าวันเสาร์ และมีฟอร์มขอนัด เว็บไซต์ที่เพิ่มเข้ามา: หน้าแรกของโรงแรมเล็กๆ ที่เจ้าของรู้สึกว่าสงบและโปร่งสบาย ไม่มีอะไรอื่นอีก
หน้าแรกของคลินิกใช้ลำดับและระยะห่างที่โปร่งโล่งตามหน้าของโรงแรม แต่ใช้ถ้อยคำ การรักษา และรูปภาพของคลินิกเอง ชื่อ รูปภาพ และถ้อยคำของโรงแรมไม่ปรากฏเลย
เว็บไซต์: ร้านคั่วกาแฟที่เมนูเปิดออกเป็นแผงขนาดใหญ่ ภาพหน้าจอ: กริดสินค้าของร้านค้าแห่งหนึ่ง ทำเครื่องหมายเป็น One section พร้อมเลือกสินค้าแล้ว Your brand: สีเน้น
#B4542D
เมื่อเพิ่มภาพหน้าจอ หน้าเว็บของโรงคั่วกาแฟจะไม่กำหนดลำดับของส่วนต่างๆ อีกต่อไป เมนูแบบแผงของเว็บนั้นถูกนำมาใช้ ส่วนสินค้าตามภาพหน้าจอ และสีเน้นของโรงคั่วเองมาก่อนสีของเว็บไซต์ตัวอย่าง
คำถามที่พบบ่อย
เพิ่มข้อมูลอ้างอิงหลังสร้างเว็บไซต์เสร็จได้หรือไม่
ได้ ในรูปแบบรูปภาพ ในกล่องข้อความของสตูดิโอ ให้แนบภาพหน้าจอ คงไว้ที่ Reference แล้วบอกว่าจะให้นำอะไรจากภาพนั้น: ทำส่วนราคาให้ให้ความรู้สึกแบบนี้ สามคอลัมน์ โดยคอลัมน์กลางยกสูงขึ้น
ฉันสามารถทำเว็บไซต์ที่ต้องใช้รหัสผ่านได้หรือไม่
ไม่เป็นประโยชน์ Briks เห็นเพียงหน้าสาธารณะ ให้แคปภาพหน้าจอแทนและเพิ่มใต้ Screenshots
ทำไมฉันจึงเลือกลุคไม่ได้อีกแล้ว
เว็บไซต์ที่คุณชอบจะเป็นตัวกำหนดหน้าตา หากต้องการเลือกจากสามบอร์ดแทน ให้นำออกที่ Show what you like