Reverse Engineering WhatsApp Web’s CSSIf you’re like the majority of readers, recreating CSS and HTML by reverse engineering might look suspicious to you, and you might wonder what could be the benefits of doing such a thing. In my opinion, playing with — or recreating — code that interests you, is the best way to learn and to enjoy what you do. The following are some more benefits, some of which most web developers aren’t aware of. Before we continue, here is my full WhatsApp Web Reverse Engineering Demo. The Benefits It’s fun! It helps you become a better architect It improves your creativity It shows the potential that the app can reach It proves a concept You can use cutting edge technologies You can advertise yourself It can help you become well-known My Benefits (Besides Fun😃) Following my previous article of “Why the World Needs CSS Developers”, I want to show a CSS...The post Reverse Engineering WhatsApp Web’s CSS appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/dev/reverse-engineering-whatsapp-webs-css-5141/

CSS Findings from the New Facebook DesignI am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. This is the first time that I blog about something like this. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. At first, every UI element was a bit bigger for me but it was a matter of days until I got used to it. In this article, I will talk about all the interesting things I saw. Let’s dive in! Using SVG For The Avatars SVG is being used for the avatar images like the profile photo, your pages or the groups you’re in. I asked myself, why did they use it? Here are my...The post CSS Findings from the New Facebook Design appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/funny/css-findings-from-the-new-facebook-design-5145/

MediaIt’s an era of Social Media, and emotions play a vital role in providing useful information about your customer’s interests. The make-shift trend of Digital Design and vibrant color palettes help the heads turn and keep eyes hooked to your content. But we all know that creating a mental hook is a difficult job. So, here are a few tips with which you can get a larger attention span of your audience. Portraying the brand is what designers must do, which is not an easy task. Also, designers must bring out emotion from the viewers through social media design. If the designer manages to evoke emotions in the viewer, then he or she has been successful in creating a fantastic social media design. Here are 10 ways in which designers can bring out various emotions through social media design: 1. Similar Interests: Finding something that is relatable is quite easier...The post 10 Ways to Evoke Emotions Through Social Media Design appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/outside/10-ways-to-evoke-emotions-through-social-media-design-5143/

What Graphic Designers doOur today’s article will be based on frequently asked questions about graphic design I answered on Quora, so now have collected the most popular questions here for our readers. The issues to discuss here are the following: What is graphic design? What are the creative directions of graphic design? Is graphic design art? Why is graphic design important? What skills are needed to reach success in graphic design? Can you be a graphic designer without drawing skills? Let’s get started with theory, practice and big set of examples from studio designers. What Is Graphic Design? Graphic design is a professional sphere of human activity that lies at the crossroads of visual arts, communication, psychology, and other expert areas. Graphic designers create the ways and assets of communication by means of graphic (visual) elements: images of different styles and complexity, photos, types and fonts, pictograms, shapes and sizes, colors and shades, lines and...The post What Graphic Designers do appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/outside/what-graphic-designers-do-5147/

Talk to Me: The Evolution of Emoji🤷‍♀️ A brief history of emoji Emoticons—proto-emoji, made from keyboard characters—first showed up about 40 years ago, with emoji coming along 20 years later. Relative to all written language, this is nothing. Written language emerged somewhere around 80,000 to 150,000 years ago, and as McWhorter has said: If humanity existed for 24 hours, writing only came around at 11:07 p.m.   When emoji first arrived on the scene in Japan in 1999, they quickly became popular for their ability to add a layer of humanity to texts that otherwise felt too dry or perfunctory. The word itself is Japanese: e (絵, “picture”)  moji (文字, “character”) = emoji. At that time emoji were available on three semi-incompatible Japanese mobile phones (Docomo, KDDI, Softbank). It wasn’t until western vendors like Apple, Google, and Microsoft started adopting emoji for their products that the tiny pictograms became part of the Unicode family. close Early emoji from Softbank, Docomo, and KDDI What...The post Talk to Me: The Evolution of Emoji appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/outside/talk-to-me-the-evolution-of-emoji-5149/

Things Markdown Got WrongJohn Gruber’s Markdown is almost a perfect content authoring format. Here are 6 things it got wrong (in my opinion, of course). This post is an expanded tweet 1. Lazy List Numbering🔗 In Gruber’s original spec, this was the way he explained it: If you instead wrote the list in Markdown like this: 1. Bird 1. McHale 1. Parish or even: 3. Bird 1. McHale 8. Parish you’d get the exact same HTML output. The point is, if you want to, you can use ordinal numbers in your ordered Markdown lists, so that the numbers in your source match the numbers in your published HTML. But if you want to be lazy, you don’t have to. This laziness is good for, well, the lazy. I know some people love this feature. But we read markdown more than we write it – even as the people writing it! It is a...The post Things Markdown Got Wrong appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/dev/things-markdown-got-wrong-5153/

MediaMarch 16, 2020 Collection of free Bootstrap form template code examples: responsive, payment, contact, with validation, with input mask, etc. Bootstrap Login/Registration Forms CSS Forms Author BBBootstrap Team February, 2020 Made with HTML / CSS / JS About a code Bootstrap 4 Modal Dialog Form-Wizard Bootstrap 4 modal dialog form-wizard with arrows transitions. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Bootstrap version: 4.3.1 Author Omkar Bailkeri October, 2019 Made with HTML / CSS / JS About a code Bootstrap 4 Payment Form Bootstrap 4 payment form with input mask. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Bootstrap version: 4.3.1 Author Ujjwal October, 2019 About a code Bootstrap 4 Newsletter Form Bootstrap 4 newsletter form with background image. Compatible browsers: Chrome, Edge, Firefox, Opera, Safari Responsive: yes Bootstrap version: 4.3.1 Author Omkar Bailkeri October, 2019 Made with HTML / CSS / JS About a code Bootstrap 4...The post 19 Bootstrap Forms appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/resources/19-bootstrap-forms-5151/

New WebKit Features in Safari 13.1This year’s spring releases of Safari 13.1 for macOS Catalina, iPadOS, iOS, and watchOS bring a tremendous number of WebKit improvements for the web across Apple’s platforms. All of this with many more updates for improved privacy, performance, and a host of new tools for web developers. Here’s a quick look at the new WebKit enhancements available with these releases. Pointer and Mouse Events on iPadOS The latest iPadOS 13.4 brings desktop-class pointer and mouse event support to Safari and WebKit. To ensure the best experience, web developers can use feature detection and adopt Pointer Events. Since a mouse or trackpad won’t send touch events, web content should not depend on touch events. Pointer Events will specify whether a mouse/trackpad or touch generated the event. Web Animations API These releases ship with support for the Web Animations API, a web standard offering developers a JavaScript API to create, query, and...The post New WebKit Features in Safari 13.1 appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/silicon-valley/new-webkit-features-in-safari-13-1-5155/

Itturat. Ituratte. Iterat. Iterate. Iterate.Iteration is the key to a successful design. Start small and make incremental improvements. Why? Good question. Photo by Roman Hinex on Unsplash A high school ceramics teacher wanted to do an experiment. At the beginning of the school year, he divided his class into two groups. Group A had one objective: make the perfect pot. They only had to make one pot the entire school year, but it better be flawless to get an A. Group B had a different objective: make as many pots as possible. They were graded on weight. If they made 50 lbs of pots, they got an A, 40 lbs a B, and so on. At the end of the school year, the ceramics teacher had astonishing results. The best pots came from group B. Why? Iteration. Group B made pots over and over and over again, learning from their mistakes. They got noticeably...The post Itturat. Ituratte. Iterat. Iterate. Iterate. appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/outside/itturat-ituratte-iterat-iterate-iterate-5159/

MediaAbstract and minimal desk illustration by Mixkit In the last few years, more and more brands (e.g. Mailchimp, Dropbox, WeTransfer and numerous more), tend to decorate their user experience with unique illustrations that add style and personality to their homepage, landing page, infographic, or any web page their visitors land on. Illustrations have a magic attribute to make your user interface more playful and clear at the same time. It is easier to communicate your message and engage with your audience through a descriptive graphic instead of the standard stock photos. As a designer/maker/developer, it could be tough to create your own custom illustration work. But that doesn’t mean your project has to lack in visual appeal. That’s the reason why I curated the current list. Below I share a couple of fantastic resources, apps, and tools that help you create your own unique illustrations by customizing various parts or...The post 8 Top Illustration Resources to Level up your Project appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/resources/8-top-illustration-resources-to-level-up-your-project-5157/

Top UI/UX Mistakes to AvoidUX is often dubbed as an effective way of connecting prospective users to a business — all the touchpoints from marketing, sales, development to distribution channels. In today’s highly competitive business scenario, “user experience” provides the way for relevant and meaningful interaction with an end-user. It is important to understand everything from the overall look to its response when users interact with it and how it aligns into people’s everyday lives. Similarly, there are success stories about UX connecting a consumer to a business — all the touchpoints from marketing to product development. It is essential to partner with a professional UI/UX design company to ensure that you avoid roadblocks associated during the design process. UI/UX Mistake 1 Creativity is placed above usability Many UI/UX designers fail to strike a balance between usability and creativity. Very often in the bid to satisfy creativity, designers compromise on critical features. Designers often...The post Top UI/UX Mistakes to Avoid appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/ux/top-ui-ux-mistakes-to-avoid-5161/

MediaMore and more companies and entrepreneurs are striving to create a multilingual website for their business needs – whether that’s in order to expand into other countries, or be able to communicate with clients in multiple languages. This is increasing competition, as companies are now competing in both the local and international market. When designing a multilingual website you must also plan for the further promotion of your project in search engines, and to design the site according to important SEO optimization guidelines. There are several basic methods for website design in different languages, which we will talk about today, and we will also explore what the best solution is for multilingual website design for different industries. Which CMS is best? Your first decision is to choose a Content Management System (CMS). I would recommend going with an open source CMS, rather than a custom one, as these have thousands...The post 5 Most Common WordPress Attacks in 2020 appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/web-design/5-most-common-wordpress-attacks-in-2020-5163/

Making Design Tokens for Figma ToolFigma Token Proposal an alternative to styles. Most of the design systems tokens are in code JSON files or XML hidden away from designers. Design tokens are an integral part of any design system. Figma styles are not enough to create all design tokens, Figma support Colors, Typography, Shadows, and grids styles. Start with Figma styles why stop there! Go all the way to add all and integrated back into Figma properties. Colors Spacing Font Families Font Sizes Font Weights Line Heights Letter Spacings Z-Index Border Radius Border Widths Shadows Opacity Mostly I am working on the design system with multiple designers, developers, and product managers, to share a single source of tokens is mandatory to create a solid base for the design system. Embedding design decisions in code isn’t valuable if designers and developers don’t know what the decisions are and how to access them. — Nathan Giving a...The post Making Design Tokens for Figma Tool appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/silicon-valley/making-design-tokens-for-figma-tool-5169/

MediaCSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs. These five properties will get you up and running: display (for the grid value) grid-template-columns grid-gap grid-auto-flow grid-column / grid-row Here’s how simple it is. Let’s assume you want to implement the following layout for small, medium and large screens. Small and medium-sized screens Large screen layout This is the markup we’ll be working with: If we apply a few baseline styles, this is what we get, which is already sufficient for small screens: Now we can get into the grid properties! Use display: grid to divide the page into independent layout containers First,...The post 4 CSS Grid Properties for your Layout Needs appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/dev/4-css-grid-properties-for-your-layout-needs-5167/

‘Zoombombing’ is a Horrifying New TrendThe FBI has warned against a horrifying new trend on the rise amid coronavirus-related social distancing: “Zoombombing.” Users of the videoconferencing platform Zoom are reporting that their meetings are being taken over by outside actors who often project racist or otherwise hateful imagery onscreen or spew abuse to users in the video chat. Worse, these hijackers are targeting communities like schools and universities, organizing efforts, and Alcoholics Anonymous. With Zoom more popular than ever as more Americans are forced to work and socialize from home (the company says 200 million people used it daily in March), Zoombombing is likely going to become more frequent. Here’s everything to know about what it is and how to protect your group chats: Zoombombing is a type of cyberattack; it describes when someone hijacks a Zoom teleconferencing chat. Users say their meetings have been interrupted by strangers drawing offensive imagery onscreen, sharing pornographic images,...The post ‘Zoombombing’ is a Horrifying New Trend appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/outside/zoombombing-is-a-horrifying-new-trend-5165/

MediaMarch 26, 2020 Collection of free HTML and CSS accordion code examples: horizontal, vertical, simple, responsive, animated, etc. Update of March 2019 collection. 4 new examples. Horizontal Accordions Vertical Accordions CSS Accordion Menus Bootstrap Accordions jQuery Accordions React Accordions  » Read MoreThe post 37 CSS Accordions appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/resources/37-css-accordions-5173/

Best UI Interaction’s of the Month – March 2020Here is our collection of Best Curated UI Interactions for the month of March 2020. Smart Home App by Giulio Cuscito Camera Mode Switch by Minh Pham Sidon by Zak Steele-Eklund for Studio VØR Drag continuously by Dimest for Nagrow  Sidebar – Property Management Dashboard by Kevin Dukkon for Fintory Web Platform – mondly by Outcrowd Spiff Landing Page – Animation by Tomasz Nadratowski  Craft.do for iPad – craft structured documents on your iPad by Daniel Korpi Drag & Drop Import Data Exploration by Kevin Dukkon for Fintory Landing Page – BuildCity by Outcrowd Character design and development | Service Landing page by Tuấn Anh Phạm for Onteractive Retro news web app by Vishnu Prasad Fitness app by Mikołaj Szymanowski  Playful Creative Collective Project Page by Zhenya Rynzhuk GMA Dashboard by Viktoryia Daniliuk   » Read MoreThe post Best UI Interaction’s of the Month – March 2020 appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/ux/best-ui-interactions-of-the-month-march-2020-5171/

Come Alive with Pepsi Logo HistoryThe Pepsi logo evolution had made a long way from dubious lettering to a sharp three-colored logotype. There were minimalism and realism, script and sans serif, isolated logo and the one with a colorful background. All the stages it comes through to get polished and encapsulate the brand’s story. Refreshes without filling — the slogan you see in many vintage Pepsi posters, telling you how to make your life better by sipping on this miracle drink. Actually, it won’t necessarily be a false statement because back in the day, Pepsi aimed at helping people with digestion issues. So how exactly it had transformed into the fashionable beverage? Taking a look at the Pepsi logo history would help you find out. Pixelbuddha Plus Membership Get access to the creative content of premium quality! Pixelbuddha Plus brings remarkable deals, trendy design goods and exclusive time-limited offers for a price of a single...The post Come Alive with Pepsi Logo History appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/design/come-alive-with-pepsi-logo-history-5175/

MediaIn April’s 20 Best New Websites roundup we’ve got some awesome examples of current design trends, and one or two sites that have struck out in their own direction. There’s an experimental typeface, a museum making perfect use of video, and lots of large type. But the two dominant themes are lots of color, and lots of transitions. Enjoy! Calexo This incredible site for THC-infused beverages from Calexo, is bursting with color, and positivity. We absolutely love the animated hamburger menu that seems to embody the spirit of the product. Moderne Illustration has been a huge trend for the last couple of years, what we love about Moderne’s approach is that it’s embraced the trend, but adopted a completely unique style of illustration that’s certain to spark a trend of its own. Play Play is a new app for designing experiences on your phone instead of your desktop. Its site...The post 4 Personal Website Ideas for Designers & Why They Work appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/web-design/4-personal-website-ideas-for-designers-why-they-work-5177/

Code is Engineering; Types are ScienceProgramming is a diverse activity that requires reasoning in many different ways. Sometimes one has to think like an engineer—find the best solution for a problem under multiple constraints. Other times, one has to think like a scientist—observe the data points you have in order to establish general rules that help you attain your goals. These patterns of thinking have very different natures. In this blog post, I will explain these patterns through the theory of reasoning of Charles Sanders Peirce. Peirce divides reasoning into three complementary processes: deduction, abduction and induction. In the following sections we will go through these logical processes and see how they relate to software. But before starting, I want to make explicit the underlying subject of this post: plausible reasoning. Plausible reasoning does not imply certainty or truth—it better reflects the concept of an educated guess. At minimum, these guesses must not be contradicted...The post Code is Engineering; Types are Science appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/dev/code-is-engineering-types-are-science-5181/

SEO Ruined the InternetBetween 1998 and 2003, searching for something on Google was magical. I remember inputting a vague notion like “oil mother’s milk,” and being directed to an interview with Thomas Gold, an astrophysicist who postulated that hydrocarbon deposits refilled themselves because of geological pressure. Today, if you’re looking for something that is technical, specific, academic or generally non-commercial, good frigging luck. The world’s best information retrieval system has devolved into something reminiscent of 2006-era Digg: A popularity index that’s controlled by a small number of commercially motivated players. They call themselves “SEOs.” Technical search-engine optimization specialists get a pass: They generally make the web faster, safer and more accessible. “Black hat” SEOs are obvious villains. They boost their own web rankings by breaking the law (e.g. hacking into a website to add links back to their own). But, black hats are the petty criminals of the SEO world. It’s the “white...The post SEO Ruined the Internet appeared first on Fresh For Designers..

via Fresh For Designers. https://freshfordesigners.com/silicon-valley/seo-ruined-the-internet-5183/