今日推荐开源项目：《先想好再动手 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/
