今日推薦開源項目：《先想好再動手 design-patterns-for-humans》
今日推薦英文原文：《Front End Developers Need to Diversify Into Design》
今日推薦開源項目：《先想好再動手 design-patterns-for-humans》傳送門：GitHub鏈接
推薦理由：設計一個看上去相同的軟體實際上有很多種方法，而選擇正確的方法設計它將會事半功倍。這個項目通過一些現實世界和代碼的例子講解設計方法，從而讓人更容易理解。除非這個項目不需要長期使用而是一時解決問題的簡單方案，不然選擇合適的方法設計它將會在未來做出改動時節省寶貴的時間——特別是在諸如為了偷懶用面向過程的方法解決了面向對象問題這種完全走偏路線的時候，最差的情況就是得完全推倒重來。
今日推薦英文原文：《Front End Developers Need to Diversify Into Design》作者：Aphinya Dechalert
原文鏈接：https://medium.com/better-programming/why-front-end-developers-need-to-diversify-into-design-e51e72eb7136
推薦理由：對於前端開發者來說，設計是避不開的，有時還需要自己動手
Front End Developers Need to Diversify Into Design
There』s more to it than just code, code, and more code
Front end development is a weird, special little space in programming. To be a truly effective and efficient front end engineer, there needs to be a balanced relationship between the creative and analytic sides of the brain.Visual arts creativity and imagination are skills that are often lost when we hit high school. Despite dealing with code all day, front end developers still need to rely on these skills from time to time — even when we don』t want to. Not every company comes up with complete wire frames or drill down mock ups of what a particular page may look like for a multitude of devices. As a result, the front end developer is often left to fill in the visual gaps, sometimes making executive design designs because the product needs to get done.
It happens and it happens a lot.
Even if you have everything visually delivered to you with clear specifications and expectations, having design knowledge is a handy part of your front end development toolkit.
The Nature of Front End Development
Front end development is a fuzzy area in tech because it is the connecting bridge between humans and the code beyond the screen. It represents the business and provide users with access to the goods and services that business offers.When we speak about front end development, we usually only talk about the code side of things. JavaScript, CSS, various frameworks and libraries become center front of the conversation. Conversations about design, however, often get sidelined. But front end is more than just code. It』s the materialization of digital design and the manifestation of business rules in a form that elicits a desirable response from the user.
We don』t tend to acknowledge it but front end is a multi-disciplinary field that involves a mixture of code literacy, design knowledge and digital psychology. Knowledge of visual patterns, color theory and typography are a few of the things that many front end developers encounter, regardless of role delegation and segregation.
Where Design Fits In
Front end development and design has a relationship that is akin to the relationship between backend development and database schema architectures. Effective developers don』t exist to code in isolation and need to be connected to their adjacent fields in order to effectively perform their roles, sometimes offering advisory services to their related peers.Understanding design as a front end developer leverages technical knowledge with the ability to produce at least half the product without the need for additional human resources — something any potential employer would want. To understand design, and how it impacts the user and their choices, gives the front end developer diversification of skills — beyond just knowing how to code effectively.
Design patterns also materialize into corresponding code patterns. When a developer is able to identify these patterns, it can result in CSS that is well organized and easy to extend with HTML that isn』t overly nested. In addition to this, understanding design can mean less reliance on bootstrapped libraries and solutions to create something that conforms with the expectation of good digital aesthetics.
Going Beyond the Ordinary
Features of digital design is more than just colors and typography. Here are some areas to explore in order to infuse and upgrade your front end development skills and knowledge tool sets.Digital composition design
Responsive and fluid development is something that every front end developer is expected to know and understand. However, what it really boils down to is composition. Responsive and fluid development is merely the mathematical translations of composition into CSS code.What to Google:
- layout design
- visual hierarchy theory
- visual cohesion in graphics design
- rule of thirds
- grid alignment design
Typography for digital screens
Typography matters. In conjunction with images, words are how an interface communicates to users its reason for existing. Different browsers and screens render the same font differently, despite having the same settings in your code. Pick two fonts you like — a serif and san serif — and stick with them until you』ve figured them out completely. This will give you a heads up on what to expect when it comes to other fonts.What to Google:
- typography kerning and tracking
- effective font size for desktop, tablet and mobile
- digital font weights
- optimal line length and line height for devices
Color and aesthetics intuition
Instagram exploded into the big deal that it is today because it leveraged the market and desire for aesthetically pleasing selfies. While you can』t quite put a filter on your front end interface, the ability to recognize and implement an effective color scheme and aesthetically pleasing compositions is something that is developed over time.Intuition is simply a set of internalized rules and expectations that culminates in the ability to instantly distinguish good design from bad ones — and to do that, you have to expose yourself to the world of digital design and emulate their patterns until you are able to create your own. This is the easiest and quickest method of developing your color and aesthetics intuition. Effective creativity is the act of putting different elements that worked for others together to form a visually pleasing yet unique solution.
What to Google:
- awwwards, dribbble, behance
- digital color palettes
- Adobe Awards
- common design patterns in web and mobile
User experience modeling
Design is not static. Design is an experience that』s transmitted through a physical manifestation of colors, layout, images, and typography. In the digital space this includes interactive responses.The ability to effectively and accurately model a user』s experience with their experience of the design can help a frontend developer determine future patterns in code. This in turn can help reduce potential bugs that might hamper the overall user experience.
Conversion occurs when there is a positive user experience. Abandoned carts happen when things don』t go as planned. Even the most loyal customers give up because the process is dumped into the 『too hard』 basket. It』s not just about the number of clicks — it』s about the ability to easily solve an immediate problem experienced by the user. When this is not fulfilled, the user experience diminishes.
What to Google:
- UX value proposition
- Heuristic evaluation process flow
- product road map design
- usability and utility in user experience
- heat maps integration
Final Words
Design and aesthetic recognition skills is something that everyone has the potential to develop. If in doubt, follow the web trend of stripping everything back as much as possible and focus on just the thing you』re trying to achieve.A busy design is often the unintentional effect of an untrained eye. The ability to improve on this gives front end developers additional and very marketable skills, especially in the smaller business and startup sectors. Not every company you encounter will have big budgets and having design knowledge can help position you as an expert in front end interfaces.
Understanding how design works can aide with implementation and communication — making it easier to talk to the resident digital designer in their language and make understanding each other』s needs, problems and requirements a lot easier.
下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/
