1.The Experience Belongs to the User. ประสบการณ์ของผู้ใช้ Designers do not create experiences, they create artifacts to experience. This subtle distinction makes all the difference It just means that the experience of a design doesn’t happen simply because the designer says it does, it happens when a user actually reports it. การออกแบบนั้นต้องมีการสร้างประสบการณ์ในการออกแบบทำให้มีความแตกต่างต้องเกิดกับผู้ใช้จริง
2.Simplicity is the Ultimate Sophistication. เรียบง่าย ไม่ซับซ้อน Simplicity is treading a line: knowing what to keep and what to throw away…it comes across as magic when it works, because none of the complexity is transferred to users…only simplicity. That is the highest achievement for a designer. เรียบง่ายที่จะ treading บรรทัด รู้ว่าจะเก็บและจะทิ้งไว้ที่ไหน เมื่อการทำงานไม่มีความซับซ้อนก็จะถูกโอนไปยังผู้ใช้อย่างเรียบง่าย นั่นคือความสำเร็จสูงสุดสำหรับการออกแบบ
3.Illustrations and Cartoons ภาพประกอบและการ์ตูน ภาพประกอบและภาพวาดการ์ตูนสามารถนำมาออกแบบเว็บเพื่อ Drawing เป็นกิจกรรมสร้างสรรค์โดยผสมผสานลงในการออกแบบของเว็บไซต์เป็นหนึ่งในการสร้างสรรค์มากที่สุดของการนำเสนอข้อมูลบนเว็บ
4.Two Tone Colour สีโทนสอง Using only two colours to create a design doesn’t sound like a particularly inspiring style of design until you see it used well. When used well it can indeed be very inspiring and allows more focus on other aspects of the design ใช้เพียงสองสีเพื่อสร้างการออกแบบถ้าไม่ถูกใจแบบที่เร้าใจ ออกแบบจนกว่าจะเห็นมันเข้ากัน เมื่อเข้ากันก็จริงต้องสามารถสร้างแรงบันดาลใจได้มากและให้ความสำคัญเพิ่มเติมในด้านอื่น ๆ ของการออกแบบ
5.Beautiful Typography วิธีทำตัวพิมม์ให้สวย Ultimately good typography is what helps make text more readable on the web but he design of typography can be inspiring in its own right. Great typography is an art and therefore is one of the more creative ways to display content online. การพิมพ์ที่ดีที่สุดคือสิ่งที่จะช่วยให้สามารถอ่านข้อความในเว็บได้ง่ายการออกแบบของการพิมพ์ สามารถสร้างแรงบันดาลใจในสิทธิของตนได้ การพิมพ์เป็นศิลปะจึงเป็นวิธีที่สร้างสรรค์ขึ้นเพื่อแสดงเนื้อหาออนไลน์
1.Retro Retro design is a niche style that is a fairly recent trend in web design. It is commonly used to sell a product or service with styles that originate from anywhere from the 1920s to the 1970s. It is interesting to see modern interpretations of what was common in that era and below are some examples being used on the web currently. ปรับปรุง ออกแบบย้อนยุคสไตล์เฉพาะที่เป็นแนวโน้มล่าสุดเป็นธรรมในการออกแบบเว็บ เป็นที่นิยมใช้ในการขายสินค้าหรือบริการที่มีรูปแบบที่มาจากที่ใดก็ได้จากช่วงปี ค.ศ. 1920 ถึง 1970 เป็นที่น่าสนใจเพื่อดูตีความทันสมัยของสิ่งที่พบในยุคที่และด้านล่างเป็นตัวอย่างที่ใช้ในเว็บปัจจุบัน
2.Abstract Abstraction is a very creative artform due to the freedom it gives the designer. Abstract art can be given a meaning or have no meaning at all or it can be interpreted in any way the viewer wishes or it can simply be used as a good looking visual effect. As such, this style is probably the most diverse in its creativity meaning that designs can be unique to themselves and be more memorable as a result. นามธรรม Abstraction เป็น artform สร้างสรรค์มากเนื่องจากมันให้อิสระออกแบบ บทคัดย่อศิลปะจะได้รับความหมายหรือไม่มีความหมายเลยหรือสามารถตีความในทางใดประสงค์ดูหรือสามารถเพียงแค่ใช้เป็นที่ดีมองหาผลภาพ ดังนั้นรูปแบบนี้น่าจะเป็นที่สุดในความคิดสร้างสรรค์ที่หลากหลายของความหมายที่ออกแบบได้เฉพาะตนเองและเป็นมากกว่าความทรงจำเป็นผล
3.Nature Natural elements within a web design create a familiar relationship with the outdoors and evokes the feeling of being down-to-earth. Nature can also give a design an organic feel. Have a look at the examples below to see how nature can be used effectively in web design. ธรรมชาติ องค์ประกอบธรรมชาติในการออกแบบเว็บที่สร้างความสัมพันธ์คุ้นเคยกับกลางแจ้งและ evokes รู้สึกการตรงไปตรงมา ธรรมชาติยังสามารถให้การออกแบบอินทรีย์รู้สึก ได้ดูตัวอย่างด้านล่างเพื่อดูว่าธรรมชาติสามารถนำมาใช้อย่างมีประสิทธิภาพในการออกแบบเว็บ
4.Grunge The grunge look can often look a little messy and untidy but that is part of the appeal. Especially in web design, as current trends point more towards the clean and tidy styles that is more appealing but grunge design still has its place primarily with brands which it is appropriate for. กรันจ์ ดูรันจ์มักจะดูยุ่งน้อยและสกปรก แต่เป็นส่วนหนึ่งของอุทธรณ์ โดยเฉพาะอย่างยิ่งในการออกแบบเว็บเป็นแนวโน้มชี้ขึ้นต่อลักษณะที่สะอาดและเป็นระเบียบเรียบร้อยที่สนใจมากขึ้น แต่รันจ์ออกแบบยังมีสถานที่หลักที่มีแบรนด์ที่เป็นที่เหมาะสม
5.Textures and Patterns Using textures and patterns can be a good way of adding depth to a web design. The most common use of this style is on the background either as a repeated image or a big background image. พื้นผิวและรูปแบบ โดยใช้พื้นผิวและรูปแบบจะเป็นวิธีที่ดีของการเพิ่มความลึกในการออกแบบเว็บ ใช้บ่อยที่สุดของแบบนี้อยู่บนพื้นหลังทั้งเป็นภาพซ้ำหรือรูปภาพพื้นหลังใหญ่
1.Simplicity ความง่าย The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity "การเก็บที่ง่าย" ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้มักจะไม่ค่อยสนุกกับการออกแบบนอกจากนี้ส่วนใหญ่แล้วพวกเขากำลังมองหาข้อมูลมากกว่าถึงแม้จะมีการออกแบบก็ตาม พยายามทำให้เรียบง่ายแทนซับซ้อน
2.Clarity ความชัดเจน clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content ชัดเจนในการนำเสนอข้อมูลเกี่ยวกับเว็บไซต์และให้ผู้เข้าชมเลือกตัวเลือก ที่มีเนื้อหาที่ไม่แน่นเกินความจำเป็น
3.White space is good พื้นที่สีขาวที่ดี White space is good uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves. พื้นที่สีขาวที่ดี ใช้ช่องว่างเป็นองค์ประกอบหลักของการออกแบบ จะเป็นรูปแบบที่ดี ซึ่งทำให้เนื้อหามีตำแหน่งเหมาะสม
4.Writing การเขียน use short and concise phrases (come to the point as quickly as possible) ใช้วลีสั้น ๆ และกระชับ (มาจุดโดยเร็วที่สุด )
5.Communicateการติดต่อสื่อสาร Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system. ให้ผู้ใช้เห็นชัดว่ามีหน้าที่เป็นหลักการพื้นฐานของการออกแบบในส่วนการติดต่อที่ประสบความสำเร็จ ในสิ่งที่จริงหรือไม่จริง สิ่งที่เป็นเรื่องที่มีเนื้อหาดีเข้าใจและผู้เข้าชมรู้สึกพอใจกับวิธีที่พวกเขาทำงานกับระบบ
1.การจัดวางรูปภาพให้เหมาะสม Nick uses large images split into three columns to really let his work do the talking. 2.การเลือกใช้สี background เพื่อให้รูปภาพเด่น Sam uses a very dark background colour to produce a big contrast between his work an the page, making the images stand out more 3.การอธิบายใต้รูปภาพ เพื่อให้ดูน่าสนใจมากขึ้น explanations need to be written. The benefit is that anyone viewing your portfolio can see much more information about the project rather than just the name, picture and short description. 4.การเลือกรูปภาพธรรมชาติช่วยให้เว็บดุเป็นธรรมาชาติและน่าสนใจ Natural elements within a web design create a familiar relationship with the outdoors and evokes the feeling of being down-to-earth. Nature can also give a design an organic feel. Have a look at the examples below to see how nature can be used effectively in web design. 5.การใช่ Abstraction ทำให้แปลความหมายศัพท์เฉพาะได้ Abstraction is a very creative artform due to the freedom it gives the designer. Abstract art can be given a meaning or have no meaning at all or it can be interpreted in any way the viewer wishes or it can simply be used as a good looking visual effect. As such, this style is probably the most diverse in its creativity meaning that designs can be unique to themselves and be more memorable as a result.
If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.
1 ต้องไม่ทำให้ผู้ใช้คิดว่า
สถาปัตยกรรมเว็บไซต์ไม่ง่ายจำนวนเครื่องหมายคำถามเติบโตและทำให้ยากสำหรับผู้ใช้เข้าใจวิธีการทำงานและวิธีการได้จากจุด A ไปจุด B โครงสร้างชัดเจนร่องรอย ภาพปานกลางและจดจำได้ง่าย ลิงก์ที่สามารถช่วยให้ผู้ใช้เพื่อค้นหาเส้นทางเพื่อจุดมุ่งหมายของพวกเขา
2. Don’t squander users’ patience
In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.
As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.
Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.
As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.
10 Principles Of Effective Web Design - Presentation Transcript 1. Approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information 2. Usability and the utility , not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist. 3. In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior. How do users think? 4. Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at. 5. Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
1Test early, test often This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout. TETO หลักการนี้เรียกว่า - ควรจะนำไปใช้กับทุกโครงการออกแบบเว็บที่ทดสอบการใช้งานมักจะให้ข้อมูลเชิงลึกที่สำคัญเป็นปัญหาสำคัญและประเด็นที่เกี่ยวข้องกับรูปแบบที่กำหนด
2.Conventions are our friends Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. Conventional ออกแบบองค์ประกอบของเว็บไซต์ไม่ได้ผลในเว็บไซต์น่าเบื่อ ในความเป็นจริงอนุสัญญามีประโยชน์อย่างมากที่พวกเขาลดเส้นโค้งการเรียนรู้ที่จะต้องคิดออกว่าสิ่งงาน 3.Communicate effectively with a “visible language” ในเอกสารการสื่อสารที่มีประสิทธิภาพภาพ, Aaron Marcus ของรัฐสามหลักการพื้นฐานที่เกี่ยวข้องกับการใช้งานที่เรียกว่า"ภาษามองเห็น"-- ผู้ใช้ดูเนื้อหาบนหน้าจอ 4.Strive for simplicity The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity. ให้มันง่าย"หลักการ (KIS) ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้จะไม่ค่อยในเว็บไซต์สนุกกับการออกแบบนั้นนอกจากนี้ในกรณีส่วนใหญ่พวกเขากำลังมองหาข้อมูลถึงแม้ว่าการออกแบบ พยายามให้เรียบง่ายแทนซับซ้อน 5.Strive for feature exposure Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. ทันสมัยออกแบบเว็บมักจะมีตำหนิเนื่องจากวิธีการของพวกเขาแนะนำผู้ใช้ดึงดูดสายตา 1 - 2 - 3 ทำตามขั้นตอน, ปุ่มขนาดใหญ่ที่มีผลภาพอื่นๆ
Creative web design principal 5 ข้อ พร้อมคำแปล มีดังนี้ 1. Strive for simplicity The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity. 1.พยายามให้เรียบง่าย “หลักการออกที่เรียบง่าย” ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้จะไม่ค่อยสนุกกับการออกแบบในเว็บไซต์นั้นเท่าไหร่นัก ถึงแม้ว่าการออกแบบที่พวกเขาส่วนใหญ่กำลังมองหานั้นมันซับซ้อน จึงควรทำให้เรียบง่ายแทนการซับซ้อน 2. Don’t be afraid of the white space Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information. 2. ไม่ต้องกลัวพื้นที่สีขาว พื้นที่สีขาวมีความสำคัญจริงๆ มันยากที่จะประเมินคุณค่า ไม่ใช่การลดภาวะปัญญาของผู้เข้าชมแต่ทำให้สามารถรับรู้ข้อมูลที่แสดงบนหน้าจอ เมื่อผู้เยี่ยมชมเข้ามาชมก็จะแบ่งชิ้นส่วนของหน้าจอตามระดับสายตาของพื้นที่ที่เรากำหนด 3. Communicate effectively with a “visible language” Organize: provide the user with a clear and consistent conceptual structure. Economize: do the most with the least amount of cues and visual elements. Communicate: match the presentation to the capabilities of the user. 3.สื่อสารอย่างมีประสิทธิภาพ - จัดการ : ให้ผู้ใช้ที่มีโครงสร้างที่ชัดเจนและสอดคล้องกับแนวคิด - ประหยัด : ทำองค์ประกอบของภาพมากก็ต้องทำให้น้อยที่สุด - สื่อสาร : ควรสร้างการสื่อสารที่สมดุลกับผู้ใช้เพื่อให้เข้าใจได้ง่าย 4. Conventions are our friends Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products). 4.การประชุมเป็นเพื่อนของเรา ออกแบบองค์ประกอบของเว็บไซต์ไม่ได้ผลในเว็บไซต์น่าเบื่อ งานในความเป็นจริงอนุสัญญามีประโยชน์อย่างมากที่พวกเขาลดเส้นโค้งการเรียนรู้ที่จะต้องคิดออกว่า เช่นมันจะฝันร้ายหากการใช้งานเว็บไซต์ทั้งหมดเว็บได้นำเสนอภาพต่าง RSS - feeds ที่ไม่ที่แตกต่างจากชีวิตปกติของเราที่เรามักจะได้รับใช้หลักการพื้นฐานของวิธีที่เราจัดการข้อมูล (โฟลเดอร์) หรือจะช้อปปิ้ง (ตำแหน่งของสินค้า) 5. Test early, test often This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout. 5.ทดสอบบ่อยๆ ก่อนการทดสอบ หลักการนี้เรียกว่า - ควรจะนำไปใช้กับทุกโครงการออกแบบเว็บที่ทดสอบการใช้งานมักจะให้ข้อมูลเชิงลึกที่สำคัญเป็นปัญหาสำคัญและประเด็นที่เกี่ยวข้องกับรูปแบบที่กำหนด
1. use short and concise phrases (come to the point as quickly as possible), ใช้วลีสั้น ๆ และกระชับ
2. Strive for simplicity The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
3. Contrast With Colors Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.
4. Contrast With Fonts If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.
คมชัดด้วยอักษร พยายามสร้างความคมชัดด้วยแบบตัวอักษรที่ควร หลีกเลี่ยงการใช้สอง font และขนาด คล้ายกัน แบบตัวอักษรมีแนวโน้มที่จะสร้างความสับสนและเบลอออกแบบ แต่จะมีประสิทธิภาพมากถ้าให้แตกต่างกันมากขนาด font หรือผสมรุ่นน้ำหนักเบาของตัวอักษรร่วมกับ boldest สามารถสร้างโดยใช้สองแบบอักษรแตกต่างกันมากควบคู่ เช่น font san serif กับ font ที่เขียนด้วยมือ
5. Paradigm Reborn The headers are clear and concise. The spacing is good and the content is separated into logical chunks.
1.The Experience Belongs to the User.
ตอบลบประสบการณ์ของผู้ใช้
Designers do not create experiences, they create artifacts to experience. This subtle distinction makes all the difference It just means that the experience of a design doesn’t happen simply because the designer says it does, it happens when a user actually reports it.
การออกแบบนั้นต้องมีการสร้างประสบการณ์ในการออกแบบทำให้มีความแตกต่างต้องเกิดกับผู้ใช้จริง
2.Simplicity is the Ultimate Sophistication.
เรียบง่าย ไม่ซับซ้อน
Simplicity is treading a line: knowing what to keep and what to throw away…it comes across as magic when it works, because none of the complexity is transferred to users…only simplicity. That is the highest achievement for a designer.
เรียบง่ายที่จะ treading บรรทัด รู้ว่าจะเก็บและจะทิ้งไว้ที่ไหน เมื่อการทำงานไม่มีความซับซ้อนก็จะถูกโอนไปยังผู้ใช้อย่างเรียบง่าย นั่นคือความสำเร็จสูงสุดสำหรับการออกแบบ
3.Illustrations and Cartoons
ภาพประกอบและการ์ตูน
ภาพประกอบและภาพวาดการ์ตูนสามารถนำมาออกแบบเว็บเพื่อ Drawing เป็นกิจกรรมสร้างสรรค์โดยผสมผสานลงในการออกแบบของเว็บไซต์เป็นหนึ่งในการสร้างสรรค์มากที่สุดของการนำเสนอข้อมูลบนเว็บ
4.Two Tone Colour
สีโทนสอง
Using only two colours to create a design doesn’t sound like a particularly inspiring style of design until you see it used well. When used well it can indeed be very inspiring and allows more focus on other aspects of the design
ใช้เพียงสองสีเพื่อสร้างการออกแบบถ้าไม่ถูกใจแบบที่เร้าใจ ออกแบบจนกว่าจะเห็นมันเข้ากัน เมื่อเข้ากันก็จริงต้องสามารถสร้างแรงบันดาลใจได้มากและให้ความสำคัญเพิ่มเติมในด้านอื่น ๆ ของการออกแบบ
5.Beautiful Typography
วิธีทำตัวพิมม์ให้สวย
Ultimately good typography is what helps make text more readable on the web but he design of typography can be inspiring in its own right. Great typography is an art and therefore is one of the more creative ways to display content online.
การพิมพ์ที่ดีที่สุดคือสิ่งที่จะช่วยให้สามารถอ่านข้อความในเว็บได้ง่ายการออกแบบของการพิมพ์ สามารถสร้างแรงบันดาลใจในสิทธิของตนได้ การพิมพ์เป็นศิลปะจึงเป็นวิธีที่สร้างสรรค์ขึ้นเพื่อแสดงเนื้อหาออนไลน์
cedit: http://inspectelement.com/articles/10-fantastic-and-creative-web-design-styles/
cedit: http://bokardo.com/archives/five-principles-to-design-by/
1.Retro
ตอบลบRetro design is a niche style that is a fairly recent trend in web design. It is commonly used to sell a product or service with styles that originate from anywhere from the 1920s to the 1970s. It is interesting to see modern interpretations of what was common in that era and below are some examples being used on the web currently.
ปรับปรุง
ออกแบบย้อนยุคสไตล์เฉพาะที่เป็นแนวโน้มล่าสุดเป็นธรรมในการออกแบบเว็บ เป็นที่นิยมใช้ในการขายสินค้าหรือบริการที่มีรูปแบบที่มาจากที่ใดก็ได้จากช่วงปี ค.ศ. 1920 ถึง 1970 เป็นที่น่าสนใจเพื่อดูตีความทันสมัยของสิ่งที่พบในยุคที่และด้านล่างเป็นตัวอย่างที่ใช้ในเว็บปัจจุบัน
2.Abstract
Abstraction is a very creative artform due to the freedom it gives the designer. Abstract art can be given a meaning or have no meaning at all or it can be interpreted in any way the viewer wishes or it can simply be used as a good looking visual effect. As such, this style is probably the most diverse in its creativity meaning that designs can be unique to themselves and be more memorable as a result.
นามธรรม
Abstraction เป็น artform สร้างสรรค์มากเนื่องจากมันให้อิสระออกแบบ บทคัดย่อศิลปะจะได้รับความหมายหรือไม่มีความหมายเลยหรือสามารถตีความในทางใดประสงค์ดูหรือสามารถเพียงแค่ใช้เป็นที่ดีมองหาผลภาพ ดังนั้นรูปแบบนี้น่าจะเป็นที่สุดในความคิดสร้างสรรค์ที่หลากหลายของความหมายที่ออกแบบได้เฉพาะตนเองและเป็นมากกว่าความทรงจำเป็นผล
3.Nature
Natural elements within a web design create a familiar relationship with the outdoors and evokes the feeling of being down-to-earth. Nature can also give a design an organic feel. Have a look at the examples below to see how nature can be used effectively in web design.
ธรรมชาติ
องค์ประกอบธรรมชาติในการออกแบบเว็บที่สร้างความสัมพันธ์คุ้นเคยกับกลางแจ้งและ evokes รู้สึกการตรงไปตรงมา ธรรมชาติยังสามารถให้การออกแบบอินทรีย์รู้สึก ได้ดูตัวอย่างด้านล่างเพื่อดูว่าธรรมชาติสามารถนำมาใช้อย่างมีประสิทธิภาพในการออกแบบเว็บ
4.Grunge
The grunge look can often look a little messy and untidy but that is part of the appeal. Especially in web design, as current trends point more towards the clean and tidy styles that is more appealing but grunge design still has its place primarily with brands which it is appropriate for.
กรันจ์
ดูรันจ์มักจะดูยุ่งน้อยและสกปรก แต่เป็นส่วนหนึ่งของอุทธรณ์ โดยเฉพาะอย่างยิ่งในการออกแบบเว็บเป็นแนวโน้มชี้ขึ้นต่อลักษณะที่สะอาดและเป็นระเบียบเรียบร้อยที่สนใจมากขึ้น แต่รันจ์ออกแบบยังมีสถานที่หลักที่มีแบรนด์ที่เป็นที่เหมาะสม
5.Textures and Patterns
Using textures and patterns can be a good way of adding depth to a web design. The most common use of this style is on the background either as a repeated image or a big background image.
พื้นผิวและรูปแบบ
โดยใช้พื้นผิวและรูปแบบจะเป็นวิธีที่ดีของการเพิ่มความลึกในการออกแบบเว็บ ใช้บ่อยที่สุดของแบบนี้อยู่บนพื้นหลังทั้งเป็นภาพซ้ำหรือรูปภาพพื้นหลังใหญ่
http://inspectelement.com/articles/10-fantastic-and-creative-web-design-styles/
1.Simplicity ความง่าย
ตอบลบThe “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity
"การเก็บที่ง่าย" ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้มักจะไม่ค่อยสนุกกับการออกแบบนอกจากนี้ส่วนใหญ่แล้วพวกเขากำลังมองหาข้อมูลมากกว่าถึงแม้จะมีการออกแบบก็ตาม พยายามทำให้เรียบง่ายแทนซับซ้อน
2.Clarity ความชัดเจน
clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content
ชัดเจนในการนำเสนอข้อมูลเกี่ยวกับเว็บไซต์และให้ผู้เข้าชมเลือกตัวเลือก ที่มีเนื้อหาที่ไม่แน่นเกินความจำเป็น
3.White space is good พื้นที่สีขาวที่ดี
White space is good uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.
พื้นที่สีขาวที่ดี ใช้ช่องว่างเป็นองค์ประกอบหลักของการออกแบบ จะเป็นรูปแบบที่ดี ซึ่งทำให้เนื้อหามีตำแหน่งเหมาะสม
4.Writing การเขียน
use short and concise phrases (come to the point as quickly as possible)
ใช้วลีสั้น ๆ และกระชับ (มาจุดโดยเร็วที่สุด )
5.Communicateการติดต่อสื่อสาร
Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.
ให้ผู้ใช้เห็นชัดว่ามีหน้าที่เป็นหลักการพื้นฐานของการออกแบบในส่วนการติดต่อที่ประสบความสำเร็จ ในสิ่งที่จริงหรือไม่จริง สิ่งที่เป็นเรื่องที่มีเนื้อหาดีเข้าใจและผู้เข้าชมรู้สึกพอใจกับวิธีที่พวกเขาทำงานกับระบบ
1.การจัดวางรูปภาพให้เหมาะสม
ตอบลบNick uses large images split into three columns to really let his work do the talking.
2.การเลือกใช้สี background เพื่อให้รูปภาพเด่น
Sam uses a very dark background colour to produce a big contrast between his work an the page, making the images stand out more
3.การอธิบายใต้รูปภาพ เพื่อให้ดูน่าสนใจมากขึ้น
explanations need to be written. The benefit is that anyone viewing your portfolio can see much more information about the project rather than just the name, picture and short description.
4.การเลือกรูปภาพธรรมชาติช่วยให้เว็บดุเป็นธรรมาชาติและน่าสนใจ
Natural elements within a web design create a familiar relationship with the outdoors and evokes the feeling of being down-to-earth. Nature can also give a design an organic feel. Have a look at the examples below to see how nature can be used effectively in web design.
5.การใช่ Abstraction ทำให้แปลความหมายศัพท์เฉพาะได้
Abstraction is a very creative artform due to the freedom it gives the designer. Abstract art can be given a meaning or have no meaning at all or it can be interpreted in any way the viewer wishes or it can simply be used as a good looking visual effect. As such, this style is probably the most diverse in its creativity meaning that designs can be unique to themselves and be more memorable as a result.
http://inspectelement.com/articles/web-design-portfolio-presentation/
http://inspectelement.com/articles/10-fantastic-and-creative-web-design-styles/
1. Don’t make users think
ตอบลบIf the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.
1 ต้องไม่ทำให้ผู้ใช้คิดว่า
สถาปัตยกรรมเว็บไซต์ไม่ง่ายจำนวนเครื่องหมายคำถามเติบโตและทำให้ยากสำหรับผู้ใช้เข้าใจวิธีการทำงานและวิธีการได้จากจุด A ไปจุด B
โครงสร้างชัดเจนร่องรอย ภาพปานกลางและจดจำได้ง่าย ลิงก์ที่สามารถช่วยให้ผู้ใช้เพื่อค้นหาเส้นทางเพื่อจุดมุ่งหมายของพวกเขา
2. Don’t squander users’ patience
In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.
2 ไม่สุรุ่ยสุร่ายต่อผู้ใช้
เมื่อคุณจะให้บริการผู้เข้าชมบางส่วนหรือทุกเครื่องมือพยายามให้ความต้องการของผู้เข้าใช้ ใช้น้อยที่สุด การทำจะต้องจากผู้ใช้บริการทดสอบจริงลอง
ผู้เข้าชมหรือบริการแรกที่ไม่กรอกแบบฟอร์มเว็บยาวสำหรับบัญชีที่พวกเขาไม่อาจใช้ในอนาคต ให้ผู้ใช้ค้นหาไซต์และพบบริการของคุณโดยไม่บังคับให้เข้าร่วมกันกับข้อมูลส่วนตัว
ไม่สมควรบังคับให้ผู้ใช้ป้อนที่อยู่อีเมลเพื่อทดสอบคุณสมบัติ
3. Manage to focus users’ attention
As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.
3 การจัดเพื่อเน้นความสนใจของผู้ใช้
เว็บไซต์ที่ให้เว็บทั้ง static และ dynamic เนื้อหาบางประการของส่วนติดต่อผู้ใช้ดึงดูดความสนใจมากกว่าคนอื่นทำ แน่นอนภาพที่สะดุดตามากกว่าตัวอักษร - เช่นเดียวกับประโยคที่มีเครื่องหมายตัวหนาเป็นที่น่าสนใจยิ่งขึ้นกว่าข้อความธรรมดา
4. Strive for feature exposure
Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.
4 การตั้งเป้าลักษณะการเปิดรับ
ออกแบบเว็บทันสมัยมักจะมีตำหนิเนื่องจากวิธีการแนะนำของพวกเขาดึงดูดสายตาผู้ใช้ 1 - 2 - 3 ทำตามขั้นตอน,
ปุ่มขนาดใหญ่ที่มีผลกระทบภาพเป็นต้น แต่จากมุมมองของการออกแบบองค์ประกอบเหล่านี้ไม่เป็นสิ่งร้าย
จริงที่ขัดแนวทางดังกล่าวมีประสิทธิภาพมากเพราะนำผู้ชมผ่านเว็บไซต์ต้องการเนื้อหาในทางที่เข้าใจง่ายและใช้งานง่าย
5. Make use of effective writing
As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.
5 ให้ใช้การเขียนที่มีประสิทธิภาพ
ตามเว็บต่างจากพิมพ์ก็จำเป็นต้องปรับรูปแบบการเขียนการตั้งค่าของผู้ใช้และพฤติกรรมการเข้าชม การเขียนจะไม่ได้
อ่านบล็อกข้อความยาว โดยภาพและคำหลักที่มีในตัวหนาหรือตัวเอียง ภาษาที่พูดเกินจริงจะถูกละเว้น
Credit : http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
10 Principles Of Effective Web Design - Presentation Transcript
ตอบลบ1. Approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information
2. Usability and the utility , not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.
3. In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.
How do users think?
4. Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.
5. Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.
10 หลักการออกแบบเว็บที่มีประสิทธิภาพ -- Presentation Transcript
1. วิธีที่ใช้อย่างเหมาะสมจะนำไปสู่การตัดสินใจการออกแบบที่ทันสมัยและง่ายขั้น ตอนการรับรู้ข้อมูลที่นำเสนอ
2. การใช้งานและประโยชน์ไม่ใช่การออกแบบภาพ, กำหนดความสำเร็จหรือล้มเหลวของเว็บไซต์ ตั้งแต่ผู้เข้าชมของหน้าเป็นคนเดียวที่คลิกเมาส์จึงตัดสินใจทุกอย่างการออก แบบของผู้ใช้เป็นศูนย์กลางกลายเป็นวิธีมาตรฐานสำหรับการออกแบบเว็บที่ประสบ ความสำเร็จและกำไร เพราะหากผู้ใช้ไม่สามารถใช้คุณสมบัติก็เช่นกันอาจจะไม่อยู่
3.เพื่อที่จะใช้หลักการอย่างแรกเราต้องเข้าใจว่าผู้ใช้โต้ตอบกับเว็บไซต์เว็บ, วิธีคิดและสิ่งที่เป็นรูปแบบพื้นฐานของพฤติกรรมของผู้ใช้ คิดอย่างไร?
4.โดยทั่วไปพฤติกรรมของผู้ใช้บนเว็บไม่ได้ที่แตกต่างจากพฤติกรรมของลูกค้าใน ร้านค้า ภาพรวมผู้เข้าชมที่หน้าใหม่แต่ละสแกนของข้อความและคลิกลิงค์แรกที่ดึงดูด ความสนใจหรือรางคล้ายสิ่งที่พวกเขากำลังมองหา ความจริงมีส่วนใหญ่ของหน้าพวกเขาไม่ได้ดูที่เป็น
5.ค้นหาผู้ใช้ส่วนใหญ่บางอย่างที่น่าสนใจ (หรือมีประโยชน์) และคลิกได้; ทันทีที่มีแนวโน้มเป็นผู้พบผู้ใช้คลิก
ถ้าหน้าใหม่ไม่ตอบสนองความต้องการของผู้ใช้ที่ปุ่ม Back มีการคลิกและการค้นหาเป็นต่อ
1Test early, test often
ตอบลบThis so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.
TETO หลักการนี้เรียกว่า - ควรจะนำไปใช้กับทุกโครงการออกแบบเว็บที่ทดสอบการใช้งานมักจะให้ข้อมูลเชิงลึกที่สำคัญเป็นปัญหาสำคัญและประเด็นที่เกี่ยวข้องกับรูปแบบที่กำหนด
2.Conventions are our friends
Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work.
Conventional ออกแบบองค์ประกอบของเว็บไซต์ไม่ได้ผลในเว็บไซต์น่าเบื่อ ในความเป็นจริงอนุสัญญามีประโยชน์อย่างมากที่พวกเขาลดเส้นโค้งการเรียนรู้ที่จะต้องคิดออกว่าสิ่งงาน
3.Communicate effectively with a “visible language”
ในเอกสารการสื่อสารที่มีประสิทธิภาพภาพ, Aaron Marcus ของรัฐสามหลักการพื้นฐานที่เกี่ยวข้องกับการใช้งานที่เรียกว่า"ภาษามองเห็น"-- ผู้ใช้ดูเนื้อหาบนหน้าจอ
4.Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
ให้มันง่าย"หลักการ (KIS) ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้จะไม่ค่อยในเว็บไซต์สนุกกับการออกแบบนั้นนอกจากนี้ในกรณีส่วนใหญ่พวกเขากำลังมองหาข้อมูลถึงแม้ว่าการออกแบบ พยายามให้เรียบง่ายแทนซับซ้อน
5.Strive for feature exposure
Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc.
ทันสมัยออกแบบเว็บมักจะมีตำหนิเนื่องจากวิธีการของพวกเขาแนะนำผู้ใช้ดึงดูดสายตา 1 - 2 - 3 ทำตามขั้นตอน, ปุ่มขนาดใหญ่ที่มีผลภาพอื่นๆ
Creative web design principal 5 ข้อ พร้อมคำแปล มีดังนี้
ตอบลบ1. Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
1.พยายามให้เรียบง่าย
“หลักการออกที่เรียบง่าย” ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้จะไม่ค่อยสนุกกับการออกแบบในเว็บไซต์นั้นเท่าไหร่นัก ถึงแม้ว่าการออกแบบที่พวกเขาส่วนใหญ่กำลังมองหานั้นมันซับซ้อน จึงควรทำให้เรียบง่ายแทนการซับซ้อน
2. Don’t be afraid of the white space
Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.
2. ไม่ต้องกลัวพื้นที่สีขาว
พื้นที่สีขาวมีความสำคัญจริงๆ มันยากที่จะประเมินคุณค่า ไม่ใช่การลดภาวะปัญญาของผู้เข้าชมแต่ทำให้สามารถรับรู้ข้อมูลที่แสดงบนหน้าจอ เมื่อผู้เยี่ยมชมเข้ามาชมก็จะแบ่งชิ้นส่วนของหน้าจอตามระดับสายตาของพื้นที่ที่เรากำหนด
3. Communicate effectively with a “visible language”
Organize: provide the user with a clear and consistent conceptual structure.
Economize: do the most with the least amount of cues and visual elements.
Communicate: match the presentation to the capabilities of the user.
3.สื่อสารอย่างมีประสิทธิภาพ
- จัดการ : ให้ผู้ใช้ที่มีโครงสร้างที่ชัดเจนและสอดคล้องกับแนวคิด
- ประหยัด : ทำองค์ประกอบของภาพมากก็ต้องทำให้น้อยที่สุด
- สื่อสาร : ควรสร้างการสื่อสารที่สมดุลกับผู้ใช้เพื่อให้เข้าใจได้ง่าย
4. Conventions are our friends
Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).
4.การประชุมเป็นเพื่อนของเรา
ออกแบบองค์ประกอบของเว็บไซต์ไม่ได้ผลในเว็บไซต์น่าเบื่อ งานในความเป็นจริงอนุสัญญามีประโยชน์อย่างมากที่พวกเขาลดเส้นโค้งการเรียนรู้ที่จะต้องคิดออกว่า เช่นมันจะฝันร้ายหากการใช้งานเว็บไซต์ทั้งหมดเว็บได้นำเสนอภาพต่าง RSS - feeds ที่ไม่ที่แตกต่างจากชีวิตปกติของเราที่เรามักจะได้รับใช้หลักการพื้นฐานของวิธีที่เราจัดการข้อมูล (โฟลเดอร์) หรือจะช้อปปิ้ง (ตำแหน่งของสินค้า)
5. Test early, test often
This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.
5.ทดสอบบ่อยๆ ก่อนการทดสอบ
หลักการนี้เรียกว่า - ควรจะนำไปใช้กับทุกโครงการออกแบบเว็บที่ทดสอบการใช้งานมักจะให้ข้อมูลเชิงลึกที่สำคัญเป็นปัญหาสำคัญและประเด็นที่เกี่ยวข้องกับรูปแบบที่กำหนด
ได้มาจาก:http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
Creative web design principal (5 ข้อ)
ตอบลบ1. use short and concise phrases (come to the point as quickly as possible),
ใช้วลีสั้น ๆ และกระชับ
2. Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.
พยายามให้เรียบง่าย
"ให้มันง่าย"หลักการ (KIS) ควรเป็นเป้าหมายหลักของการออกแบบเว็บไซต์ ผู้ใช้จะไม่ค่อยสนุกกับการออกแบบในเว็บไซต์นั้น พยายามให้เรียบง่ายไม่ซับซ้อน
3. Contrast With Colors
Sprinkling in color at just the right amount is another way to create effective contrast within a website. It can be created using a different color in headers and text copy, as well as within the colors of an image or illustration.
คมชัดด้วยสี
พรมสีเพียงปริมาณที่เหมาะสมเป็นวิธีสร้างความคมชัดที่มีประสิทธิภาพภายในเว็บไซต์ จะสามารถสร้างขึ้นโดยใช้สีที่แตกต่างกันในส่วนหัวและคัดลอกข้อความเป็นภายในสีของภาพหรือภาพประกอบ
4. Contrast With Fonts
If you are trying to create contrast with fonts you should avoid using two very similar font faces and sizes. The similarity of the fonts tends to create confusion and blur the design. However, it can be very effective if you make the font sizes very different, or mix the lightest version of the font in combination with the boldest. Also, you’ll be surprised at the visually impressive combos you can create by using two very different fonts in tandem. For instance a san serif font with a hand-written font.
คมชัดด้วยอักษร
พยายามสร้างความคมชัดด้วยแบบตัวอักษรที่ควร หลีกเลี่ยงการใช้สอง font และขนาด คล้ายกัน แบบตัวอักษรมีแนวโน้มที่จะสร้างความสับสนและเบลอออกแบบ แต่จะมีประสิทธิภาพมากถ้าให้แตกต่างกันมากขนาด font หรือผสมรุ่นน้ำหนักเบาของตัวอักษรร่วมกับ boldest สามารถสร้างโดยใช้สองแบบอักษรแตกต่างกันมากควบคู่ เช่น font san serif กับ font ที่เขียนด้วยมือ
5. Paradigm Reborn
The headers are clear and concise. The spacing is good and the content is separated into logical chunks.
Reborn กระบวนทัศน
ส่วนหัวมีความชัดเจนและรัดกุม ระยะห่างจะดีและเนื้อหาแยกออกเป็นชิ้นตรรกะ
ดูแล้วทุกคนที่ส่งงานดูมีความสนใจ แต่ปัญหาที่เกิดขึ้นคือ การแปลยังไม่สละสลวย และยังไม่ใกล้เคียงกับความเป็นจริง ทางที่ดี นศ.ควรจะมีการไปถามผู้รู้บ้างแล้วค่อยตอบมา
ตอบลบแต่ก็ชมเชยในความพยายามนะคับ