Web Design

9. My Portfolio

ฮาๆๆๆๆ ทำเว็บพอร์ตตัวเอง สนุกมากกกชอบมากกก เสียดายว่าทำน้อยไปหน่อย โค้ดไม่เป็นด้วย ลองโค้ดดูหน้านึงภูมิใจอ่อนๆ

เรียนจบคลาสนี้แล้ว แต่จะยังอัพบล็อกต่อไปเรื่อยๆ ถ้าไม่ขี้เกียจไปซะก่อน ไว้ปีกกล้าขาแข็งจะไปเปิดเว็บตัวเองกับเค้าบ้าง ชอบวิชาทำเว็บมาก (เผื่อคนสอนมาอ่าน) อยากตั้งใจทำทุกชิ้นเลยแม้ว่าจะทำได้บ้างไม่ได้บ้าง

หน้าแรก เปิดมาให้เอาเม้าส์ hover ปัดลูกเทนนิสสีเหมือนผลไม้ออกให้พ้นทางเพื่อหาลูกที่มีตาของเราฝังอยู่ แล้วคลิกเข้าไป

giphy

พอคลิก จะมาเจอผิวหนังอักเสบของเรา ซึ่งจะมีสิวขึ้นมามากมาย แต่ละเม็ดคือ category งานในพอร์ต พอคลิกแล้วสิวจะบวมอักเสบขึ้นเรื่อยๆ ส่วนเม็ด Biography จะขึ้นมาเป็นกล่องแบบในภาพ กดย้อนกลับที่ลูกเทนนิส เมนูลอยครอบหน้าจอตลอดเวลา เมื่อกดเม็ด category งาน หน้าจอจะเลื่อนลงไปบริเวณที่งานชนิดนั้นอยู่ แต่ถ้า scroll ลงไปเลยจะเห็นงานวางเรียงกันไปยาวๆ

giphy1

แบบนี้

2

หน้าแยกงาน อันนี้ยังไม่ค่อยสวยแต่ไม่คิดอะไรมาก เป็นหน้าเดียวที่โค้ดออกมาได้ ฮาๆๆๆ

4

จบแว้ว อยากมีเว็บเป็นของตัวเองจริงๆ จัง

Standard
Web Design

8. Artist Application : North × Wes

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

ในแอพสำหรับไอโฟนนี้ พี่เวสจะพาทุกคนไปเที่ยวเกาหลีเหนือในสไตล์ของพี่เค้า

เปิดมาหน้าแรก เราอยู่ที่เกาหลีเหนือแล้ว

mockup3.png

homewes.gif

ไปเปิดล็อคเกอร์ตามที่นิ้วไกด์บอก

weshome2.jpg

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

ตัวอย่างเช่น เราเลือกไปดูมหาวิทยาลัยคิมอิลซอง

ilsung-01.jpg

ตัวอย่าง Experience สำหรับแอพนี้

ประสาทมาก แต่สนุกดี ถ้ายังจินตนาการไม่ออกสามารถดู 360 องศาในเกาหลีเหนือได้ที่ลิงก์ข้างล่างนี้นะ มีอีกหลายสถานที่ในแอคเคาทน์

Shout out to Aram Pan at SpinAttic – Thank you for your wonderful picture!

Experience North Korea in 360 degree

สุดท้ายคือเว็บขาย Application

web.jpg

Standard
Web Design

7. E-commerce : minä perhonen

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

ช่วงนี้ไม่สบาย นอนเยอะจนรู้สึกว่า เอ๊ะนี่ไม่สบายหรือขี้เกียจ นอนเท่าไรก็ไม่หายเหนื่อย

Homepage

minahome.jpg

Shopshop.jpg

Single merchandiseหน้าแยก.jpg

Cartbag.jpg

Shippingshipping.jpg

Paymentpayment.jpg

Standard
Web Design

5. City Site : Hill Valley

ระวังดูแล้วอ้วกเพราะมีแต่ GIF ทั้งโพสเลย ทำไปก็จะอ้วกไป

การบ้านทำเว็บคราวนี้โจทย์คือให้เลือกเมืองอะไรก็ได้มาทำเว็บให้ เป็นในจินตนาการหรือว่าจริงก็ได้ ตอนแรกก็คิดถึงเกาหลีเหนือแต่ว่าไหนๆ จินตนาการได้ก็เลยเลือก Hill Valley จาก Back to the Future เพราะว่าเป็นเมืองที่มีไทม์ไลน์ของตัวเองครบมาก แล้วก็รักหนังเรื่องนี้มาก

ใน Back to the Future มี timeline หลักๆ คือปี 1885 1955 1985 1985 ภาคดิสโทเปีย แล้วก็ 2015 เราก็เริ่มจากการไปดูหนังแบบกรอเร็วมากแล้วแคปฉากไว้ กับรีเสิร์ชซึ่งมีคนรักเมืองนี้มากมายทำแผนที่ไว้ ก็เลยคิดว่าจะทำเว็บที่มันเปลี่ยนไปเปลี่ยนมาตลอดเวลาเหมือน Hill Valley ตัวจริง แต่เสียดายที่เวลาน้อยเกินไปไม่งั้นคงจะเล่นเรื่องการหักเหไทม์ไลน์แล้วก็ใส่ตัวละครสนุกๆ แบบคนจรจัด Red หรือนายกผิวดำ Goldie Wilson ได้อีก ตอนนี้ทำได้แค่เมืองแห้งๆ ก่อน

เปิดโฮมเพจมา เป็นหอนาฬิกา อยากให้มีฟ้าผ่าทุกสิบวิ แล้วให้มันเป็นอนิเมชั่นวิดีโอเนียนๆ เล่นไป แต่ฝีมือทำได้เท่านี้ จริงๆ เว็บมันจะหน้าต่อกันไปเรื่อยๆ

homepage

หน้าที่สองเป็น History เอาเรื่องเข็มนาฬิกามาใช้ ถ้าเลื่อนเข็มไปก็มีประวัติในแต่ละช่วงยุคของเมืองเขียนขึ้นมาตรงช่องระหว่างเข็มสองอัน รูปแบคกราวด์ข้างหลังก็เปลี่ยนด้วย

history.gif

อันถัดมาเป็นข่าวเมือง ก็เลยเอาลูกเล่นเครื่องย้อนเวลามาใช้ ถ้ากรอกเลขวันเดือนปีก็จะได้ข่าวเมืองในยุคนั้น  หรือจะใช้ลูกศรขึ้นลงเปลี่ยนเลขปีแบบเร็วๆ ก็ได้ พวกข่าวก็วิ่งไปทางซ้าย ซึ่งยิ่งปีเก่าๆ ยิ่งวิ่งช้าลง เพราะอยากให้นึกถึงถนนรถบินในปี 2015 ของหนัง

หน้าข่าวจะเชื่อมกับหน้าแผนที่แบบเลื่อนต่อกันได้ ฉะนั้นแบคกราวด์จะเป็นสีเดียวกับปีหน้าที่ดูข่าวค้างไว้แผนที่ก็จะเปลี่ยนไปตามปีด้วย

news.gif

 

การดูรีวิวสถานที่ แค่กดคลิกขึ้นมาเฉยๆ ตรงรูปเราเอาฉากที่ถ่ายร้านเดิมแต่คนละยุคมาซ้อนสลับกัน

 

loucourthouse

 

นี่คือไซต์แมพอันงงงวย แต่ไม่กะพริบแล้ว แมพสีเหลืองคือของปี 1885 ซึ่งทำเล่น

 

sitemap-01.jpg

 

จบแล้ว อยากจะกรี๊ดดดดด ต้องไปมหาวิทยาลัยแล้ว ลาไปก่อน เดี๋ยวจะมาเม้าเรื่องหนังชุดนี้ทีหลัง สวัสดี

Gotta get back to the future

Standard
Web Design

4. AKB48 Official Website

เดี๋ยวจะมาอัพสเกตช์อีกรอบ ตอนนี้แค่อยากจะบอกว่าปวดตามากฮือๆ สัปดาห์นี้ส่งงานทุกวันเครียดหัวจะแตก

โฮมเพจก่อน

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

An AKB48 official website I did for the web design course advised by Mr Plaimanas. Since he suggested we bring the identity of the artist we choose I tried to translate the puzzling and crazy world of AKB48 by using a lot of their uncountable members.

Off design topic, AKB48 is hugely successful because of the genius system and partly because of those unique Japanese value. Normally I’m not into female idol whether K or J but I do follow their news and documentary from time to time. My dad always got frustrated when he browses news in Japanese site and mistakenly click ‘Election news’ which turned out to be AKB48 election instead.

For the homepage I just want these portraits to float slowly to the bottom and bounce up around slowly.

bio.jpg

หน้าโฮม ถ้าคลิกที่ AKB48 ที่เป็นสีชมพูข้างใน จะเปลี่ยนมาหน้ากำหนดการเล่นโชว์ใน Theatre

Click in the pink logo and this schedule page will pop up, Battle Royale style. Hover over the date and the teams performing that day will show up.

AKB copy.jpg

เอาเม้าส์อังที่วันที่ จะแสดงให้เห็นว่าวันไหนมีทีมไหนเล่นที่เธียเตอร์บ้าง หากคลิกก็จะขึ้น Schedule ด้านบ

ทีนี้อยากให้เว็บ scroll ไปทางซ้ายทางขวาแทนแนวดิ่ง เอาแบบใช้เม้าส์ scroll ได้เลย

I want the site to be scroll-able sideway.

AKB copy 2.jpg

พอเลื่อนไปทางซ้ายก็จะเจอกับหน้านี้ ซึ่งจะเล่น MV เป็นแบคกราวนด์ ถ้าคลิกที่ปกอัลบั้มต่างๆ ก็จะเปลี่ยนเพลงได้ด้วย เป็นการแสดง Discography  ในคราวเดียว พวกปกอัลบั้มก็อยากให้ลอยเคลื่อนแบบ random ไปเรื่อยๆ เคลื่อนไหวเปลี่ยนไปตามจังหวะเพลงเร็วหรือช้า

To the left is where I want the discography to display floating around, they are clickable and will change the PV that is playing in the background. If possible may be the speed of them floating will be according to the song tempo.

mvanddisco.jpg

หน้า News/Update ถ้าเอาเม้าส์ไปจ่อตรงข้างบนๆ ข่าวก็จะเลื่อนไปวันที่บนๆ ด้วย คลิกอ่านต่อได้ที่ข่าวสั้นเลย

The News/Update page, hover the cursor over the date and it will scroll up to see past news.

news.jpg

มาถึงหน้าช็อป เป็นหน้าที่ scroll มาทางขวาต่อจากหน้า NewsAKB copy 3.jpg

ส่วนที่เป็น Merchandise พวกทีม A K B 4 8 สามารถคลิกดูต่อไปได้ มีหน้าแยกรถเข็นสินค้าและสมัครสมชิก

ตรง Wheel ให้แสดงซิงเกิ้ลที่เพิ่งออกใหม่ พร้อมแสดงข้อมูลของที่กำลังดูอยู่ตรงกลาง

จบแล้ว เย้ๆ

สรุปแล้วคือ ปวดตามาก และมีรูปสาวๆ เต็มเครื่องเลย ไม่ชินเลย ปกติมีแต่รูปดาราผู้ชาย เฮ่อ แต่น่ารักดี หัวใจสั่นไหวไปหมด

Standard
Web Design

3. Online Shop : Nokair Shop

ทำเว็บให้นกแอร์ ก็เลยไปดูเว็บ Beams ของญี่ปุ่นมาเพราะขายสินค้าไลฟ์สไตล์น่าจะเอารูปและสัญลักษณ์มาใช้ในงานได้ ของน่ารักดีอยากได้หลายชิ้นเลย

Sketch คร่าวๆ และไอเดียว่าจะมี category อะไรบ้าง ตัดออกไปเยอะเพราะรู้สึกมันซ้ำกัน

คราวนี้พี่ปลายบอกว่าไม่ต้องคิดเรื่องคอนเซปต์มาก แต่ก็รู้สึกว่ายังทำไม่สวยเท่าไร ส่วนเรื่องไทโปพอมีความรู้ก็รู้สึกว่างานออกมาดูใช้งานได้จริงมากขึ้น

โฟโต้ชอป ก็ยังงงเหมือนเดิม ปวดหั้ว

S__26689547.jpg

ต่อไปเป็นงานแล้ว

artboard-1%e0%b8%ab%e0%b8%99%e0%b9%89%e0%b8%b2%e0%b8%a3%e0%b8%a7%e0%b8%a1%e0%b8%aa%e0%b8%b4%e0%b8%99%e0%b8%84%e0%b9%89%e0%b8%b2%e0%b9%81%e0%b8%a2%e0%b8%81%e0%b8%aa%e0%b8%b4%e0%b8%99%e0%b8%84%e0%b9%89%e0%b8%b2

แถมเลคเชอร์เรื่องไทโปกับโฟโต้ชอปไว้ตรงนี้ด้วย เผื่อสมุดหาย

S__26689549.jpgS__26689551.jpg

Standard