เหตุผลที่เว็บไซต์ของฉันหน้าตาไม่สวย ก็เพราะฉันเป็นคนทำมันเอง
(goodinternetmagazine.com)- ใครสักคนอาจทำให้เว็บไซต์ของฉันดูเท่กว่านี้ได้ แต่ถ้าเป็นแบบนั้น มันก็คงไม่ใช่ ของฉัน อีกต่อไป
- เอกลักษณ์ของเว็บไซต์ เกิดจากรสนิยม ความหมกมุ่น และร่องรอยจากมือของคนทำโดยตรง
- ฉันมุ่งหาความ เรียบง่ายและเป็นกันเอง จึงลด CSS และ JS ให้เหลือน้อยที่สุด และใช้ กฎการแปลง CSS แบบตรงไปตรงมาเพื่อสร้างความโกลาหล ความซ้ำ และอารมณ์แบบร้านหนังสือ
- เว็บไซต์ถูกออกแบบให้ตอบสนองต่อ ปฏิสัมพันธ์ของผู้ใช้ ด้วย CSS เพียงอย่างเดียว จึงมีพื้นผิวที่ไม่ปรุงแต่งและการเปลี่ยนแปลงที่คาดไม่ถึงเป็นจุดเด่น
- เว็บไซต์ เปลี่ยนแปลงอยู่ตลอดเวลา เติบโตและแปลงร่างไปพร้อมกับเจ้าของ ทำให้ "ความไม่สวย" แบบเฉพาะตัวของแต่ละคนยังคงมีชีวิตและเคลื่อนไหว
เว็บไซต์ที่ฉันทำเอง และความหมายของความไม่สวยนั้น
- ถ้าแม่อยากเอารูปสวย ๆ ไปติดบนตู้เย็น ก็คงจะเอารูปของศิลปินดังอย่าง Vermeer, Lichtenstein หรือ Wyeth มาคัดลอกแล้วแปะไว้
- แต่สิ่งที่แม่ต้องการไม่ใช่งานศิลปะแบบนั้น แม่ต้องการ รูปที่ฉันวาดเอง
- นักออกแบบที่มีเซนส์อาจทำให้เว็บไซต์ของฉันออกมาดูดีมากก็ได้ แต่ ถ้าเป็นแบบนั้นมันก็จะไม่ใช่ของฉันอีกต่อไป
- เวลาจะอบขนมปัง บางคนอยากปลูกข้าวสาลีเอง ขุดเกลือเอง และเพาะยีสต์เอง แต่ฉันไม่ได้เป็นแบบนั้น
- รสนิยมที่ยังไม่จัดเจน ของฉันพอใจกับการกิน breadsticks ของ Olive Garden แบบเยอะ ๆ
- รสนิยมแบบนี้คือความแตกต่างที่เกิดจาก ความรู้สึกเป็นเจ้าของ ของแต่ละคน
- ด้วยเหตุผลของตัวเอง แต่ละคนกำลังตกแต่งพื้นที่บนอินเทอร์เน็ตในแบบของตัวเอง
การมีอยู่ของเว็บส่วนตัวที่หลากหลาย
- บางคน ทำเว็บไซต์โฮสต์เองที่ขับเคลื่อนด้วยพลังงานแสงอาทิตย์
- บางคน แบ่งปันความคิดผ่าน Substack
- มีคนที่ เจาะลึกวงการการผลิต บน YouTube
- Gwern ก็กำลังทำอะไรบางอย่างที่มีเอกลักษณ์เฉพาะตัว
- การกระทำทั้งหมดนี้เกิดจาก แรงผลักดันภายใน และความอยากที่ว่า "ถ้าไม่ใช่ฉัน ก็ไม่มีใครทำได้"
- ฉันไม่ได้มีแรงจูงใจจะทำขนมปัง ทำเซิร์ฟเวอร์ หรือทำชิป แต่ ความอยาก นั้นแสดงตัวออกมาในรูปของอารมณ์ขัน ระบบ ซอฟต์แวร์ และโครงสร้าง
- พอความรู้สึกแรงเกินไป มันก็ปะทุออกมาเป็น นิยาย, HTML/CSS, หุ่นยนต์ก๊องแก๊ง, เพลงเศร้า และสิ่งอื่น ๆ
- เพราะอย่างนั้น เว็บไซต์ของฉันจึงเป็นของฉัน
ความเรียบง่ายที่อยู่ร่วมกับเอกลักษณ์
- เมื่อก่อนฉันต้องการแค่ความเรียบง่ายและความเป็นกันเอง
- ตัด noise ออก
- เน้นความต่างของแสงเงา
- ลดความลึกของเมนู
- HTML ที่เรียบจนน่าเบื่อ
- ลด CSS ให้เหลือน้อยที่สุด
- หลีกเลี่ยง JS เป็นต้น
- เว็บไซต์ของฉันในปี 2023 เป็นแบบนี้ (ดูภาพในบทความต้นฉบับ)
งานออกแบบที่โกลาหล และเรื่องของ CSS
- ปัญหาเริ่มขึ้นตอนที่ฉันตัดสินใจจะใช้พื้นที่แนวนอนให้กว้างขึ้น
- แผนแรกนั้นง่ายมาก: ใส่
flex-wrapให้กับ ul - แต่พอ ข้อความถูกตัดบรรทัดด้วย เส้นแบ่งระหว่างแต่ละลิงก์ก็ไม่ชัดเจน
- บางคนอ่านมันแบบ inline ขณะที่บางคนรู้สึกว่ามันเป็น inline-block
- ฉันลองเพิ่ม ช่องว่าง ให้มากขึ้น ล้อม เส้นขอบ รอบแต่ละลิงก์ หรือใส่ จุด คั่นระหว่างลิงก์แล้ว แต่ก็ยังไม่ชอบ
-
สุดท้ายฉันเลยเลือกวิธีเพิ่ม ความแปรผันให้กับลิงก์
-
ความโกลาหลบนหน้าโฮมจริง ๆ แล้วเกิดจากกฎง่าย ๆ ไม่กี่ข้อ
li:nth-child(4n + 0) { transform: rotate(1deg); } li:nth-child(4n + 1) { transform: rotate(-0.6deg); } li:nth-child(4n + 2) { transform: rotate(0.5deg); } li:nth-child(4n + 3) { transform: rotate(-0.75deg); } li:nth-child(6n + 0) { font-family: Times; } li:nth-child(6n + 1) { font-family: Helvetica; } li:nth-child(6n + 2) { font-family: Georgia; } li:nth-child(6n + 3) { font-family: Times; } li:nth-child(6n + 4) { font-family: Arial; } li:nth-child(6n + 5) { font-family: "Trebuchet MS"; } -
เดิมทีฉันใช้ จำนวนเต็มที่เป็น prime กัน (coprime integer) เพื่อให้เกิดความเปลี่ยนแปลงมากขึ้น แต่สุดท้ายกลับชอบความละเอียดอ่อนของรูปแบบที่ซ้ำกันมากกว่า
- ฉันรัก minimalism แต่ไม่ชอบความรู้สึกเย็นชา
- เพื่อถ่ายทอดอารมณ์อบอุ่นแบบ "ร้านหนังสือมือสอง" ฉันจึงเพิ่มลูกเล่น CSS ที่ทำให้เกิด ความประหลาดใจ เล็ก ๆ
li:nth-child(5n + 2) { font-weight: 100; } li:nth-child(7n + 2) { letter-spacing: -1px; } li:nth-child(41n + 31) { transform: rotate(181deg); }
- เว็บยังคงเป็น สื่อเชิงโต้ตอบ อยู่ดี ฉันเลยอยากให้มันตอบสนองต่อการเคลื่อนที่ของเคอร์เซอร์ได้โดยไม่ต้องใช้ JS
- CSS ด้านล่างนี้ช่วยสร้างความรู้สึกเหมือน "เอามือลูบหญ้า"
li:nth-child(2n + 0):hover { transform: rotate(-2deg); } li:nth-child(2n + 1):hover { transform: rotate(2deg); } - จึงเกิดการ ตอบสนองต่อการเคลื่อนที่ของเคอร์เซอร์แบบเรียลไทม์
- แล้วเพราะฉันอยากเน้นสัมผัสของการเลื่อนโดยไม่ทำ scrolljacking ฉันจึงใช้ พื้นหลังแบบมีเท็กซ์เจอร์ ให้หน้าดูเหมือนเป็น "กระดาษ"
- ใช้ css-doodle เพื่อ ผสมเท็กซ์เจอร์
svg { viewBox: .5 .5 10 10; fill: #000; circle*1000 { cx, cy: @r(10), @r(10); r: @r(.005, .01); } } - ใน โหมดสว่าง มันให้ความรู้สึกเหมือนฝุ่นบนกระดาษ ส่วนใน โหมดมืด จะเหมือนดาวบนท้องฟ้ายามค่ำคืน
- เว็บไซต์ของฉันในปี 2024 เปลี่ยนมาเป็นแบบนี้ (ดูภาพในบทความต้นฉบับ)
ฉันที่เปลี่ยนไป เว็บไซต์ที่เปลี่ยนตาม
- อีกไม่นานเว็บไซต์ของฉันก็คงจะเปลี่ยนไปเป็นอีกหน้าตาหนึ่งโดยสิ้นเชิง
- เพราะ ฉันเป็นเจ้าของเว็บไซต์ของตัวเอง และตัวฉันเองก็เปลี่ยนแปลงอยู่ตลอดเวลา
- คุณเองก็จะเปลี่ยนไปเช่นกัน
- ความหลงใหลและ ค่านิยม ของคุณจะกระจายตัวออกไปเป็นอย่างอื่น
- ต่อให้มันดูไม่สวย งานสร้างสรรค์ของคุณก็จะ ยังมีชีวิตและเคลื่อนไหวต่อไป
ผู้เขียน Taylor Troesh เป็นนายกเทศมนตรีของ taylor.town เป็นผู้เขียน scrapscript และเป็นคนที่ดื่มด่ำกับสิ่งก๊องแก๊งทั้งหลาย
3 ความคิดเห็น
ลองเข้าไปดูแล้ว ซับซ้อนชวนงงจริง ๆ...
https://taylor.town/
ผมเห็นด้วยกับเนื้อหาอย่างลึกซึ้งมากครับ ตัวผมเองก็พยายามใช้เฟรมเวิร์กที่นักออกแบบช่วยกันคิดมาอย่างดีเพื่อซ่อนเซนส์ด้านดีไซน์อันย่ำแย่ของตัวเอง แต่ถึงอย่างนั้นก็ยังคงทำมาเรื่อย ๆ แบบมุ่งมั่นจนถึงทุกวันนี้
ทุกครั้งผมจะคอยคิดเรื่องดีไซน์ที่ดีกว่าเดิม และก็สนุกกับการค่อย ๆ แก้ตรงนั้นตรงนี้ไปพร้อมกับการสร้างและดูแลมัน
เพราะกิจกรรมแบบนี้นี่แหละ เลยยิ่งผูกพันกับมันมากขึ้น และรู้สึกสนุกมากขึ้นด้วยครับ 555
ความเห็นจาก Hacker News
make), มีเชลล์สคริปต์หลายตัวไว้สำหรับอัปโหลดไฟล์ไปยังตำแหน่งส่วนตัว, favicon ก็เป็นพิกเซลอาร์ตที่ทำตั้งแต่สมัยมหาวิทยาลัย (ลิงก์), เคยจะทำฟอนต์ของตัวเองแต่เลิกไปแล้วเลยใช้ฟอนต์ที่ได้แรงบันดาลใจจาก Naruto แทน, และถ้าใช้ฟังก์ชันview-page-sourceดูซอร์สโค้ดก็จะเจอความสนุกอีกแบบ เวลาเห็นเว็บไซต์ตัวเองแล้วรู้สึกว่ามันบันทึกร่องรอยการเติบโตของฉันในฐานะวิศวกรซอฟต์แวร์เอาไว้ ทำให้งานชิ้นเล็กๆ นี้มีค่ามากสำหรับฉันdivให้อยู่กึ่งกลางพอดี ก็น่าจะเริ่มได้ทันทีdivให้อยู่ตรงกลางถึงกลายเป็นมีมไปได้ แค่นี้ก็เริ่มบล็อกได้แล้ว