You couldn't have said it better, @mgiambanco. There are font foundries i.e big companies that actually work just on creating and distributing quality typefaces where they employ multiple designers to craft fonts carefully and make sure they are ready for distribution.

It's my pleasure, @mevrael. 🙌 I'm always happy to help 🙂

Hello @regina23d, I've tried to answer your question to the best of my knowledge below: Summary: System fonts can be specific to a particular operating system and therefore may be only present on a single operating system. It is advisable to use web-safe fonts or font stacks that include system fonts compatible for a range of operating systems to ensure your design/product looks the way you intended it to look. System fonts: System fonts are fonts that come pre-installed on a user's computer system. System fonts can be specific to a particular operating system and therefore may be only present on one operating system. For example, San Francisco is the primary system font for new Mac OS systems and is exclusive to these systems. Web-safe fonts: Web-safe fonts are fonts that are like to be present on a wide range of systems. They are used by designers/developers in order to increase the chance that their content will be displayed as intended. Reliable sans-serif typefaces include: Arial Arial Black Tahoma Trebuchet MS Verdana Reliable sans-serif typefaces include: Courier Courier New Georgia Times Times New Roman Font Stacks: In case you decide to use a web-safe font, make sure you go with a font stack instead of just defining a single font since there will be a fallback in case the use doesn't have that font on their system. An example of a font stack would be: font -family: "Helvetica Neue" , Helvetica, Arial, "Lucida Grande" , sans-serif; In the case above, if the user does not have Helvetica Neue, the system will look for the next defined alternative. If you are testing the website on multiple operating systems then I see no problem with using web-safe fonts. They'll significantly reduce strain on your websites resources since you don't need to store the fonts or call for Google's APIs. Resources: CSS Font Stack : System compatibility of all the web-safe fonts Web-safe fonts - WC3 - List of web-safe fonts and best practices

Hello @mevrael, I've tried to answer all your questions to the best of my knowledge below: How does a professional UI/UX designer's workflow look like in reality and how it shoud look like in the ideal world? What problems still exist today? What would you change? Sadly, there's no universal design process . A designer's process can change on a project-to-project or even day-to-day basis. My current design process: Brief ⟶ Research ⟶ Wireframes ⟶ Prototype ⟶ Review ⟶ Testing ⟶ Refine The ideal UI/UX design process would involve going into depth at each stage. However, in most cases, time and money are constraints that make this challenging. See also: Shaan Suleman's response to Do you even "User Interface Design"? - Hashnode What is that process, where do you start from, which step is next, and which one is the last. Do you do any research/analysis at the beginning of any new work? Brief: Start by understanding what your client/consumer wants and ask as many questions as you can. There's nothing wrong in asking questions. This way you eliminate most back-and-forth sessions. Research: One of the most important stages in UI/UX design. Some excellent sources of UI/UX information include: Nielsen Norman Group - https://www.nngroup.com/ UXBooth - http://www.uxbooth.com/ UX Movement - http://uxmovement.com/ Usabilla - http://blog.usabilla.com/ Image source: Savvy Apps - https://goo.gl/2h7n9k Wireframes: Start with low-fidelity wireframes then move to medium/high-fidelity wireframes. Low-fidelity is all about rapid prototyping. It doesn't have to be perfect or aligned to the pixel. Just focus on creating basic layouts that may work. Learn more here . Image source: Web Design Ledger - https://goo.gl/2hjFIp Prototype: Once you've finalized on a design, prototype the interactions. Static images cannot capture animations and micro-interactions. Try and prototype or at least think about/visualize how the users will use the product. This will help the developer understand the requirements and make his/her life a little easier. Image source: Yalantis - https://goo.gl/6fb3PU Review: After you're done with the design, review it. You can even test the design yourself and find areas of intervention where you can improve the design and experience. Test: Testing is crucial to making any product work. It is best to get participants to user test with. Ask friends, family, neighbors, colleagues, and anyone else that could participate in user testing your product/design. Don't heavily rely on your targeted demographic if time and finances are a constraint. Refine: Final refinements and finishing touches to create a polished product. Which devices and apps are used? Tablets with pencils? Just a paper? Drawing with mouse? What tools should be used today? Photoshop, Illustrator, Sketch, with what plugins, Affinity Designer, GIMP, Inkscape, etc... Mac or Windows? Or just design, and write code right in the browser yourself? You could use any system that runs on either Mac OS or Windows. I personally prefer using a MacBook because of it's display color accuracy and ease-of-use. Both have their advantages and disadvantages. I don't draw on paper as much anymore because I find it easier to prototype on my system. However, if you're starting out then I suggest trying to draw on paper first before moving on to software. Tools I use on a daily basis include: Primary tools: Sketch - Powerful design tool for prototyping and designing interfaces https://www.sketchapp.com [Plugin] Sketch Measure - https://github.com/utom/sketch-measure [Plugin] Zeplin - https://zeplin.io/ [Plugin] Artboard Tricks - https://github.com/romannurik/Sketch-ArtboardTricks [Plugin] Craft - https://www.invisionapp.com/craft Image source - https://designcode.io/sketch Principle - Prototyping tool with animations and micro-interactions http://principleformac.com/ Flinto - Prototyping tool with animations and micro-interactions https://www.flinto.com/mac Mindnode - Mindmapping tool http://mindnode.com/ Zeplin - Spec sheet collaboration tool for designers and developers https://zeplin.io/ Other tools: Kap - Open-source screen recorder https://getkap.co/ SVGsus - SVG icon library application to store all your icons and easily use them http://www.svgs.us Any patterns, frameworks, methodologies used? There are many design frameworks out there to use. At Hashnode, we follow Google's Material Design Framework as much as we can. Following a framework can be useful as it helps create a consistent experience for the user. That being said, if you're an experienced designer, try working on creating your own framework or UI kit for projects you work on. Resources that could be useful to you: Google Material Design Framework https://material.google.com/ OpenColor Framework https://yeun.github.io/open-color/ Semantic UI http://semantic-ui.com/ What about collaboration? Google Drive, Marvel, InVision, what else, why? Slack: Slack App is a great collaborative tool for teams. It's one of the most popular team messaging apps and you can send files, embed code, and even call people. Additionally, Slack has a large library of third-party integrations . Image source: Quartz - http://bit.ly/2dm1zXp Google Drive: Google Drive is also a great tool for collaboration but I find that there is a lot of friction. I use it more for backups since it's reliable and trustworthy. Zeplin: Zeplin is a great tool for designers and developers to collaborate. It allows you to export your .Sketch documents into full interactive Spec Sheets and share them. This way, the developer knows specifics like font sizes, color values, padding, etc. Image source: Zeplin - zeplin.io See also: Shaan Suleman's response to How can multiple designers, working on the same design project, stay in sync? Version control/Git for designers, is it possible, does it work? I haven't used one but you could see the Git Sketch Plugin - http://mathieudutour.github.io/git-sketch-plugin/ Do you create UI kits? At the beginning, at the end? There are many existing UI kits you can use. See https://www.sketchappsources.com/category/ui.html Creating a UI kit from scratch could be challenging but it is certainly rewarding. Try and follow conventions, look at as many examples as you can and then proceed. You can begin working on a simple UI kit for your product once you move on to high-fidelity wireframes. Do pixels matter in the age of responsive design and thousands of devices and screen sizes? Pixels will always continue to hold high importance as long as devices continue to use pixels for their displays. I don't really know what the future holds in terms of screen display units but for now, pixels are still the guiding unit for any interface intended for screens. For print designers, they hold less importance since millimeters, inches, and centimeters are their primary measurement units. Do you write instructions for engineers? How they should animate, change on hover, min/max container sizes, breakpoints, etc. Some of the tools mentioned above (Zeplin, Principle, Slack, and Google Drive) will make your life easier when explaining your ideas/design with engineers. If you work closely with teammates then you could just explain it to them in person but if you work remotely then these tools along with others like Skype can help significantly.

@bmlyon that's a very valid point, clients are not always open to receiving vector based deliverables unless they have an in house designer or basic design software knowledge.

@emilmoe You're most welcome. It's good to hear that you will be working with vectors from your next sketch onwards! The benefits of vector graphics easily outweigh those of rasters. However, keep in mind what @bmlyon said about clients and vector based deliverables. You can simply export as rasters when providing deliverables to clients but your working documents can be vector.

Hello @emilmoe, Choosing between vector and raster graphics is a matter of what you are working on. I've simplified my opinion below and I hope this helps. Summary: If you're working on wireframes and documents with shapes, lines, and colors then vector trumps raster. However, if you're working on documents dominated by photography or illustrations, then working with raster graphics is a better approach. Vectors graphics are created with mathematical curves and paths while raster graphics (or bitmaps) are composed of pixels. Below is a diagram to show the difference between the two: The benefits of vectors include: Scalability: Vectors can be scaled to any size while retaining quality File-size efficiency: Vectors are usually smaller in size and can easily be shared with others Editing capabilities: Vectors are made up of anchor points and can easily be modified in the future Print quality: Vector graphics usually look better when printer as compared to raster graphics One of the only disadvantage of vector graphics is compatibility. Not all applications support vector formats such as .SVG and .EPS. However, most applications which do support vectors, allow you to export them as rasters. Conclusion: Vectors graphics are easily a better option. Try and use them in as many places where it's appropriate, and you'll slowly learn of the many advantages along the way.

Hello @cengkuru, The Icons vs Labels vs Icons & Labels is an ongoing debate in UI. I've tried to simplify my opinion below and hope this helps. Summary: Since there are few 'universally recognizable icons', it is suggested to use text labels along with icons to communicate meaning. Research has shown that some icons may be difficult to memorize without training or experience and as a result, can be inefficient in conveying full meaning to the user. Users tend to remember positions of elements rather than their graphic representations. This is why we expect the Site ID (logo) to be on the top left of a webpage or the search bar to be on the top or top right of a webpage. Hence, it is important to follow existing conventions when positioning text labels and icons. Few universally recognizable icons include the 'close' icon, 'print' icon, 'search' icon, and the 'hamburger menu' icon: There are, however, advantages to icons: Icons are small, save space, and can help simplify interfaces (especially mobile interfaces) When used appropriately, icons need no translation and can be inclusive for people of all cultures and backgrounds Icons can be visually appealing and can enhance the aesthetic of the design Universally recognizable icons work well alone to convey meaning (search icon, close icon, print icon, etc.) As explained above, icons can be effective in conveying information if used appropriately. I suggest using icons along with text labels if your interface has space to accommodate both. Conclusion: If you choose to use icons only, ensure all icons have alt tags or title tags to assist visually-impaired users who are using screen readers. (In addition, make sure you make use of universally recognizable icons) And if you choose to use text only, make sure you translate text for users who speak different languages I suggest you use icons with text labels for desktop, and go with icons only for mobile if space is an issue.

Yes absolutely @hipkiss91, I shared Prototypo a few days back on Hashnode. It's a good tool for those looking to quickly create a font - https://hashnode.com/post/prototypo-create-your-own-font-in-a-few-clicks-ciu7v7fcd01h6kn53afq9xoon . I've made an edit to the answer, added it, and given you due credit. Thank you for the suggestion!

Hello @jonathan, Summary : Creating a font involves a good understanding of typography and the tools used to manipulate it. Learn Adobe Illustrator , Font Lab and Fontographer Understand the fundamentals of typography, and; Ask yourself some of the questions below Image Credits: FontLab Studios Why design a custom font? : As a part of the Hashnode rebranding, I created the font for the Hashnode logo from scratch using the principles of geometry and symmetry. Here are some of the questions I asked myself: Why design a new font? A fundamental question to ask yourself before designing a font is "why?". There are thousands of fonts to choose from. Is your font going to solve a problem ? Where is your font going to be used most? Who is it going to be used by? What fonts inspire you? Look at some of the fonts that inspire you and/or your design. Understand their anatomy, and learn from them. Is the font going to be 'Serif' or 'Sans-Serif'? Understand the differences, and select a category according to the intent of designing your font. For example, if you're designing for print, then consider making it a Serif font because of improved legibility. (See also Serif vs Sans-Serif ) Are you creating a 'font' or a 'typeface'? Creating your own 'typeface' requires a lot of time and resources. Once you understand why you are designing your own font, you will have the answer to this question. (See also Fonts vs Typefaces ) Design for optimal legibility and readability? Learn the basics of legibility and readability and apply them to your design. (See also Legibility, Readability, and Comprehension ) Useful resources: Adobe Illustrator (Mac OS and Windows) Industry-standard vector editing tool. www.adobe.com/in/products/illustrator FontLab Studio (Mac OS and Windows) Font editor for font professionals www.old.fontlab.com/font-editor/fontlab-studio/ Anatomy of Typography (Article) Understand the essentials of typography. www.designersinsights.com/designer-resources/anatomy-of-typography How to create your own font: 18 top tips (Article) A guide to creating your own font. www.creativebloq.com/typography/design-your-own-typeface-8133919 Prototypo (Web tool) Quick, but limited,tool for generating a custom fonts. Suggested by @hipkiss91 www.prototypo.io