Saveti – Web design

Hey there, It's been hard to squeeze in all the content we have in store for you this week! You can look forward to: A new UX book release More from the AtoZ CSS series Open source contributor Ken Wheeler, on The Versioning Podcast And plenty more It's a good week! DESIGNING UX FORMS Did you know that eBay made an additional $USD 500 million annuallyfrom redesigning just one button on one of their mobile form screens? Study has found that on average, designing a form to have a great user experience almost doubled the rate of successful first-time completions. We share these insights with you in Designing UX: Forms, taking you through: Wording to use Form UI and interactivity How to design responsive and beautifully forms Real-world examples, both good and bad Happy reading! SITEPOINT'S TOP LINKS This week's best links, straight to your inbox. Managing DependenciesLearn diverse methods to incorporate third-party libraries in your app, glimpsing into some of the mainstream bundlers and how to use them in your projects.  #JAVASCRIPT | SITEPOINT PREMIUM | Creating a Cloud Backend for Your Android App Using FirebaseFacebook announced that they were shutting down Parse in 2017, forcing its users to hastily find alternatives. We explore this further.  #MOBILE |  Six Examples of Chart. js 2. 0If your website is data-intensive, it needs to be easy to visualize. Let’s use Chart. js and work through six different examples to visualize your data.  #JAVASCRIPT |  Sourcehunt 2016. 8Update your Sourcehunt resources with this extensive list of open source contributions we’ve compiled for your convenience.  #PHP |  The Ultimate Guide to Java 9It’s just six more months until the scheduled release of Java 9! Have a look at all the shiny new things we get to play with.  #JAVA |  Working Through a 2-Layer Image OverlayThe problem when working through web tutorial is that, sometimes you just can’t get them to work. Here the community work through a CSS example.  #COMMUNITY Should PHP Make the $ Optional?It has been suggested that we deprecate the $ sign in PHP variables? The reason, "There is really no point to it, and pressing the shift+4 combination 3 times in each line of code is not making it any easier on the fingers. " What do you think? #COMMUNITY ATOZ CSS RELEASES Working through CSS, letter by letter. Let's catch up on this week's AtoZ CSS releases. AtoZ CSS Quick Tip: AutoHere is the first quick tip in the aforementioned AtoZ CSS series! Guy Routledge looks at letter A — the auto property. AtoZ CSS Screencast: Box-ModelNext in our AtoZ CSS Series, Guy looks at letter B — the CSS Box-Model. AtoZ CSS Quick Tip: Box-ModelHere's our bonus quick tip to accompany the CSS Box-Model screencast. AtoZ CSS Screencast: ColorFor letter C, Guy Routledge looks at the all-important color property in CSS. AtoZ CSS Quick Tip: ColorHere's our bonus quick tip to accompany the CSS Color screencast. INCREDIBLE INTERNET LINKS This week's top tech happenings, straight to your inbox. The Correct Way to Validate EmailsNever again will you need to worry about writing the perfect validating regex, or accidentally reject valid email addresses. A Not So Modest Fast WebpageQuote: “I am a fast webpage, kneel before my greatness. Unlike your inferior, punk pages I load quickly and immediately. ” Calculating Proportional Values in SQLSQL is great for aggregating these tasks. Periscope Data have created a tip for you to  track the proportion of users coming to your site from different source. Google Project BloksProject Bloks is an innovative, physical coding experience by google. Its aim is to teach kids to coding though IoT modules. If CSS Positioning was an Ice Cream SundaeIf you’ve built an ice-cream sundae, then CSS positioning will be easy to learn with this explanation. Who ever knew learning could be so delicious? The Programming ZooJust a collection of miniature programming languages. A great starting point in case you were considering creating your own. UPCOMING SITEPOINT EVENTS Webinar: Making the Most of CodePen with Chris Coyier We had Chris Coyier join us in a recent podcast, now he’ll switch seats and show us how you can really use CodePen to its full potential in our upcoming webinar. Live Lesson: User Interface Design with Sketch 3We have a new Sketch course currently in the works for you… and a Live Lesson to follow soon after. We’ll keep you posted. UPCOMING BOOKS AND COURSES User Interface Design with Sketch 3 | CourseDesign your next User Interface with Sketch 3, a fan favourite amongst designers.

Table of Contents 1. A Notebook That Follows You Through Your Browser Tabs 2. Are You A Master Of The Command Line? 3. Delightful Effects For Text Input Fun 4. Monochromatic Eye Candy 5. Implementing "Save For Offline" With Service Workers 6. Good (And Partly Free!) Reads For Your Digital Bookshelf 7. Could You Afford Living In The City Of Your Dreams? 8. A Magic Button For Shopping 9. Superheroes To The Rescue! 10. Taking Visual Experiences To The Next Level 11. Upcoming Smashing Workshops 12. New On Smashing Job Board 13. Smashing Highlights (From Our Archives) 14. Recent Articles On Smashing Magazine 1. A Notebook That Follows You Through Your Browser Tabs Staying focused can be hard when you're having a stressful day. Maybe you've tried to jot down reminders and to-dos to structure your thoughts and ideas to prevent you from getting lost. But when you forget to look at them because you're either too absorbed in your work or because you're constantly getting distracted, well, then the best notes are useless, too. The Chrome extension Mindful attempts to change just that. Created by Adrian Zumbrunnen, Mindful gives your thoughts, ideas and ongoing tasks a new place. One that you always have in sight anyhow: Your browser. Whenever you open a new tab in Chrome, Mindful will make sure that your notes are right there. It's not a fully-fledged writing suite, but that's not what it's about. Instead, Mindful tries to relinquish any additional distraction and lays its focus on simplicity so you can focus on the things that really matter: Your ideas.  (cm) 2. Are You A Master Of The Command Line? You know the high-striker at the carnival that lets you test your strength? Well, the Command Line Challenge is something like that for developers. It's not about muscle strength, though, of course, but your iron command line skills. The challenge: You get a row of tasks that you need to solve with only a single line of bash. Extracting all IP addresses from certain files, for example, or printing the nth line in a given file. There are 30 tasks in total for you to master before you can call yourself a real command line hero. Ready to take on the challenge? (cm) Build Elegant Forms For Free   Building accessible forms that also can complete tasks, such as document submission and auto-responding with customized emails, is pretty hard to figure out, not to mention inline validation. The upcoming JotForm 4. 0 is there to help you build and deploy such forms, now including an embedded designer, real-time collaboration and offline support. And it's free, too! Get access now. 3. Delightful Effects For Text Input Fun Filling out a form is nobody's favorite task. But actually, it doesn't take a lot to enhance the experience. Just add a sprinkle of surprise and a seemingly dull interaction suddenly becomes a lot more delightful. To cater for some inspiration on how this can be done, the folks at Codrops put together some innovative text input effects. What they all have in common is that they use CSS transitions and subtle animations to cater for some unusual effects once a user clicks on an input field: It's either the position of the field label that might shift, borders will become animated, or colors will change. Keep in mind that animating the text input has bugs on iOS and Internet Explorer (the cursor of the input won't move until you actually type). Nevertheless, a fantastic source of inspiration.  (cm) 4. Monochromatic Eye Candy Who doesn't love some good eye candy? If you need some fresh inspiration, be sure to stop by the Tumblr of The Afrix. Curated by designer Tom Wysocki, the Tumblr resembles a well-balanced exhibition of opposites — black and white, strict geometry and fluent, organic shapes — joining up to build a harmonious whole. Among the works, you'll find actual designs for portfolio websites and detailed illustrations, but also rather abstract and seemingly random digital experiments. It's that mix of the unforeseen that makes the showcase so refreshing despite its monochromatic color palette. Beautiful works of art with a mysterious touch.  (cm) GraphicStock Is Giving You 7 Days To Download Anything You Want   Most stock image platforms ask you to pay per image or purchase an expensive monthly subscription with download limits. The idea behind GraphicStock is different. They grant you access to over 300,000 images with no download limitations and for a low yearly fee of USD 99. There's a free 7-day trial available, and anything that you download during the trial period is yours to keep and use forever.  Happy downloading! 5. Implementing "Save For Offline" With Service Workers You probably too know the moments when you're on the subway, reading an article, and suddenly your cell connection breaks down. To prevent her users from the unpleasant effects that a flaky connection brings along, Una Kravets recently added a small but mighty feature to her blog: An option that allows users to save blog posts for offline reading. Luckily for the rest of us, she wrote up a post explaining in detail how you can do it, too. The idea behind Una's approach is to give users the choice which articles they want to save for offline reading instead of automatically taking up precious space in their cache without asking. Thus, her solution relies on a trigger element (a little download button which is positioned next to each article's heading) that gets the service worker magic rolling. Clever! (cm) 6. Good (And Partly Free!) Reads For Your Digital Bookshelf Do you need some new reading material? Then we might have something for you. We stumbled across a few free eBooks lately that are bound to take your skills to the next level. One of them is the Site Reliability Engineering: How Google Runs Production Systems book. In it, Google's SRE team gives insights into how their engagement with the software lifecycle has enabled Google to build, deploy, monitor, and maintain some of the largest software systems in the world. If you want to improve your JavaScript know-how, well, then Dr. Axel Rauschmayer's book collection is for you. He offers all of his four JavaScript books for free online reading so you can dive deeper into the ins and outs of ES5, ES6 and even the latest ES2016 and ES2017 versions. Last but not least, a resource that isn't free, but very handy when you're on the hunt for some good web design books, is the selection which UXcellence curates on a wide range of topics from content strategy and copywriting to product strategy, interaction and responsive design. Happy reading! (cm) 7. Could You Afford Living In The City Of Your Dreams? When we travel abroad, we are often surprised, sometimes even a bit shocked, about what certain things cost in other countries. Drink a beer in Denmark, for example, and you'll have to pay something around $6. 50. Drink one in Germany: $3. 75. Costs of living differ. Sometimes a lot. Not only between countries but even cities. But what if you decided to move? Would you get by with your current income? Or would you need to make more to maintain your current standard of living? Luckily, it doesn't take rocket science to find out: citii. io, a small React app built by Hassan Djirdeh, will do the calculations for you. It uses the cost-of-living index attributed to Russian economist A. A. Konüs, paired with up-to-date data gathered from Numbeo, a database of user-contributed data about any kind of aspect of our lives. Just enter the city you're currently living in, your annual salary and where you wish to live, and the app will tell you the equivalent you'll need to make to keep up your standard. Insightful.  (cm) 8. A Magic Button For Shopping Some little helpers are so genius that you start to wonder how you could ever get around without it: Wikibuy could be one of those. Available for Chrome and iPhone, Wikibuy attempts to change the way you shop — by providing you with the best deals from all over the web whenever you browse Amazon or scan a barcode. In fact, while you browse a product on Amazon, it takes Wikibuy only 15 seconds to evaluate other vendors, among them Walmart, Target, and eBay and check if your desired product is available somewhere at a lower price. It then automatically confirms availability, price, taxes and shipping, and even tests for coupon codes and applies the best one at checkout. When you accept an offer, you pay Wikibuy, and they'll track the order for you. An interesting concept.  (cm) 9. Superheroes To The Rescue! Let's be honest, have you ever actually read the iTunes Terms And Conditions before you clicked "Accept"? The entire wall of text? 96 pages of legal speak? Well, you can't be blamed. We did neither. But a superhero now comes to the rescue, on a quest to make the T&C less boring. His name: R. Sikoryak. Profession: Cartoonist. And well, he's got some mighty helpers to join him, among them X-Men, the Transformers, Snoopy, Tin Tin, Dilbert and even the Smurfs. What sounds like a weird dream are the ingredients for iTunes Terms And Conditions: The Graphic Novel. Yes, R. Sikoryak did illustrate the entire legal document, word for word in the style of classic cartoon strips. And what came out of it is not only pure eye candy but also a stellar example of how some unexpected turns and a pinch of wit can transform something boring into a captivating experience. Hats off! (cm) 10. Taking Visual Experiences To The Next Level Websites are more than just a reference for folks to find more information about a company, service, person or project. Web developers and designers are aware of this fact, and have been busy trying out new ways to provoke the visual experience. For example, an Austrian interactive agency WILD brought Falter Inferno to life in order to express "a ride through today's living hell". Very impressive — we're sure you'll agree. There are other impressive websites that have been developed with animated video masking which include mix-blend-mode in CSS. Not only that, but it's fully responsive, too. There are even those that have audio as well as animation developed with a combination of HTML, CSS, JavaScript and WebGL.  For Honor is a brilliant example. You won't know where to look first.  (il) Recent Articles On Smashing Magazine DESIGN ARTICLES Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design Redesigning The Paris Metro Map The Underestimated Power Of Color In Mobile App Design CODING ARTICLES HTML APIs: What They Are And How To Design A Good One How Mail. Ru Reduced Email Storage From 50 To 32 PB Making Responsive HTML Email Coding Easy With MJML INSPIRATION, FREEBIES, MISC. Colorful Inspiration For Gray Days: Illustration And Photography At Their Best From The Design Community With Love: Unique And Inspiring Desktop Wallpapers 30 Sugar-Sweet Valentine's Day Icons Live Stream From Awwwards London Conference: Chat Bots, Virtual Reality, And The Future Of UX SmashingConf New York 2017: Don't Let Bad Front-End/UX Be Your Kryptonite! Web Development Reading List #168: Preload With Webpack, A Guide To Security Headers, And Service Worker Fallacies Web Development Reading List #167: On Team Retreats, Immutable Cache, And Eliminating Clearfix Hacks

TABLE OF CONTENTS A Step-By-Step Guide To Moving To HTTPS Something’s Cooking! Freebie: A Fully-Customizable Flowchart Kit For Sketch Spicing Up The Search UI Common Git Problems and Solutions Getting To Grips With Caching A More User-Friendly Solution For Select Boxes A World Of Music Upcoming Smashing Workshops New On Smashing Job Board Smashing Highlights (From Our Archives) Recent Articles On Smashing Magazine 1. A Step-By-Step Guide To Moving To HTTPS With browsers starting marking sites that don’t support HTTPS as “Not secure”, it’s high time to finally make the switch. But no worries, moving from HTTP to HTTPS isn’t necessarily as hard as you might think. Especially when the community has got your back. The community project “Moving To HTTPS” guides you through all the steps you need to take to implement HTTPS on your site. You can filter the switching strategy depending on the platform you use (e. g. WordPress, Magento, Shopify, and others), your hosting environment, and the level of access you have to your site. The guide itself is divided into four stages that you’ll have to go through to get HTTPS up and running. Before the big move, you’ll learn to select which kind of SSL certificate might work best for you, on moving day you’ll install it, fix mixed content issues, set up redirects and check 3rd-party integrations. Finally, the guide reminds you of what you need to check for and how to further improve the security of your site once the switch is done.  (cm) 2. Something’s Cooking! The web is full of generic, average solutions. But what’s the secret sauce to stand out of the mass and become noticeable? The recipe to whip up a truly exceptional, delightful experience? Well, every good chef has their little secrets, their tricks, but what makes them excel at their craft is the courage to think outside the box, to push boundaries and combine new flavors into something truly tasty. With SmashingConf San Francisco, we want to challenge you to do just that: explore solutions you’ve never considered before. Designs that were impossible, front-end techniques you’d consider unthinkable, and strategies often too quickly dismissed as unfeasible. The conference will be taking place April 4th and 5th with Nadieh Bremer, Nathan Curtis, Marcy Sutton, Sarah Drasner, and others. Join us at the Palace of Fine Arts near the Golden Gate Bridge waterfront, with breathtaking views of the bridge and Alcatraz Island. Conference tickets are available for $599, and if you book a workshop, too, you’ll save $100 off the conference + workshop price. See you there? ;-) (cm) 3. Freebie: A Fully-Customizable Flowchart Kit For Sketch Are you looking for a fast and easy way to create a flowchart? Then be sure to check out the free Flowchart Kit for Sketch. It includes all the building blocks you’ll need to create fine sitemaps, wireframes, and diagrams with ease. If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook”, with pratical examples that you can follow along, step-by-step, to master even the trickiest, advanced facets and become a true master of Sketch.  (cm) 4. Spicing Up The Search UI Search is an essential part of almost every website. But that doesn’t mean that there’s no room for innovation. Codrops recently published a couple of proof-of-concepts that illustrate how a sprinkle of CSS animation can make the good old “Search” field a lot more interesting and engaging to use. The showcase features eleven experimental effects that add an unknown, bold dynamic to the “Search” interaction. A great piece of inspiration that reminds us to think outside the box. However, please keep in mind that the effects rely heavily on modern CSS properties that aren’t supported by all browsers yet.  (cm) 5. Common Git Problems and Solutions Screwing up in git is easy. Figuring out your mistakes, on the other hand, can be quite hard. Especially since you need to know the exact name of the problem to track it down in the official git documentation. But no worries, Katie Sylor-Miller, engineer at Etsy, has got your back. Her little project “Oh shit, git!” collects some of the most common things that can go wrong when working with git — and how to fix them, of course. You need to make changes after you committed? Retrieve something you accidentally deleted? Or maybe you committed to the wrong branch? It’s the little tragedies like these which every developer has experienced before and which Katie provides a fix for. In plain ol’ English and with a healthy dose of levity. Entertaining and useful.  (cm) 6. Getting To Grips With Caching When done right, caching can benefit performance, save bandwidth and reduce server costs. If you mess with it, however, things can get out of hand quickly. Luckily, Jake Archibald wrote a great primer on how to get caching right. In it, he shares caching best practices, explains the ins and outs of max-age, mutable and immutable content and what you can do so that HTTP cache and your service worker play well together. But once you got to grips with caching, how should you go about explaining caching to clients or non-developers? The folks behind WordPress agency 10° came up with an easy-to-grasp explanation of what it’s is all about so everybody will be able to understand what’s happening behind the scenes with caching. Finally! (cm) 7. A More User-Friendly Solution For Select Boxes When you need to provide users with an option to select multiple items from a list, a select box paired with the multiple attribute is an obvious but not the most user-friendly solution.  Multi. js could finally solve this issue. To make it easier for users to keep track of the items they already selected, Multi. js adds a second column next to the conventional select box. It displays the user’s selection and further enhances the functionality of the box with a search function. Clever! Multi. js can be applied to any select element with the multiple attribute enabled. It’s easy to style with CSS and optionally supports jQuery. But you can stick to fully native JavaScript, too, if you prefer.  (cm) 8. A World Of Music “Born In The USA”. “Back In The USSR”. “China Girl”. “London Calling”. “One Night In Bangkok”. Do these ring a bell? If you dive a little deeper into the history of music, you’ll find a lot more songs with geographical references. Now what does a creative foursome of designers do with that fact? Well, they go on the hunt for more songs and create a map of the world with them — the World Song Map. Created by the team behind UK-based design studio Dorothy, the World Song Map shows a world in which continents, countries, cities, oceans, rivers and landmarks aren’t entitled with their geographical names but with the titles of over 1,000 songs. New York becomes “New York, New York” (what else?), the Mediterranean Sea “Holidays In The Sun”, Iceland “Walking On Thin Ice”. The map is inspired by 1950’s wall charts and, to make a music lover’s heart leap for joy, it even features an A-Z key with all the songs featured and the artists who performed them. A spectacular project. If you want to see more by the designers, also take a look at the street mapsthey created with allusions to films, books, football, TV and games.  (cm) 9. UPCOMING SMASHING WORKSHOPS With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today. WORKSHOPS AT SMASHINGCONF SF 2017 — APR 3 Scalable Design Systems – Nathan Curtis Building Performant Websites – Tim Kadlec Smart Responsive UX Design Patterns – Vitaly Friedman Hands-On Checkout Optimization Workshop – Christian Holst WORKSHOPS AT SMASHINGCONF SF 2017 — APR 6 Advanced SVG Animation – Sarah Drasner Advanced CSS Layouts With Flexbox And CSS Grids – Rachel Andrew Creative Data Visualization Techniques – Nadieh Bremer New Front-End Adventures In RWD – Vitaly Friedman OUR PUBLIC WORKSHOPS Toronto, Canada • Smart Responsive Design PatternsFITC Toronto, Apr. 22nd, 2017 Sydney, Melbourne, Brisbane — Australia • Smart Responsive UX Design Patterns, Web Directions, May 4–12, 2017 Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf. com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! 10. NEW ON SMASHING JOB BOARD Here are the recent job openings published on our Smashing Job Board: Senior Developer at Atlantic Media (New York City)“We’re looking for a Senior Developer who will play an integral role in developing and executing new digital experiences on behalf of our clients. Main responsibilities include defining the technical road map of new client projects, assessing timelines and mentoring junior developers. ” Full-Stack WordPress Developer For Social Impact Design Agency at Constructive (New York City)“If you are a Senior Full-Stack WordPress developer who excels at translating sophisticated UX and design into exceptional interaction design, and are hungry to collaborate in close-knit teams of senior strategic and creative experts to push boundaries, then we’d love to hear from you. ” Front End Developer/Web Developer – Junior/Graduate/Mid at viagogo (London)“We’re on a mission to revolutionise the way people get tickets to live events, making it possible for anyone, anywhere in the world to see their favourite artists, teams or shows live. Your role is simple – think of ways to improve our user experience and get these improvements into the hands of our users as quickly as possible. ” 11. SMASHING HIGHLIGHTS (FROM OUR ARCHIVES) How To Get A Logo Accepted: Eight Steps To A Better Design WorkflowAs logo and brand designers, your work starts long before the first concept sketches, and finishes long after the last perfectly placed pixel. Your work requires so much more than just creative ideas and technical skills — it compels you to be a marketer, strategist, psychologist, salesperson, showman and project manager at the same time. It’s difficult, but it’s also exciting and challenging! Designing Case Studies: Showcasing A Human-Centered Design ProcessDesigners are great at producing visual artifacts. We create mockups, images, code and all sorts of other material to document our solutions. But looking only at those artifacts doesn’t account for the actual creative process. A Type Design Brief: What Is In It, And Why Does It Matter?Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be. 12. RECENT ARTICLES ON SMASHING MAGAZINE DESIGN ARTICLES The Realities Of User Experience Design Within The Luxury Industry To Use Or Not To Use: Touch Gesture Controls For Mobile Interfaces How To Create A Realistic Clock In Sketch The Role Of Empty States In User Onboarding CODING ARTICLES Experimenting With speechSynthesis HTML APIs: What They Are And How To Design A Good One INSPIRATION, FREEBIES, MISC. Current Trends And Future Prospects Of The Mobile App Market Exclusive Icon Set: Elements From Space To Earth Copy If You Can: Improving Your UI Design Skills With Copywork Free Fonts With Personality And Style Web Development Reading List #169: TLS At Scale, Brotli Benefits, And Easy Onion Deployments

Imagine a cloudy, rainy November evening.  After a long day, you walk home along the streets, following the dimmed street lamps. Everybody seems to be busy, rushing somewhere, crossing paths with strangers and lonely stores. It's dark and cold outside, and it's difficult to see things through, so you decide to take a shortcut route to shorten the path. Table of Contents 1. Freebie: A Hand-Painted Brush Sans Named Westfalia 2. Copying Text To The Clipboard Made Easy 3. Free Tutorials To Brush Up Your Web Development Skills 4. Conference Videos! Fresh Conference Videos! 5. Virtual Reality: Where We Are Today And Where We’re Heading 6. Refactoring Code Without Losing Your Mind 7. Freebie: Anaglyph Photoshop Actions 8. Secrets From The Road 9. Upcoming Smashing Workshops 10. New On Smashing Job Board 11. Smashing Highlights (From Our Archives) 12. Recent Articles On Smashing Magazine 1. Freebie: A Hand-Painted Brush Sans Named Westfalia Westfalia. The name of the famous camper van stands for outdoor adventures and exploring new routes. No wonder that Pixelsurplus named their free brush font Westfalia for the vehicle: with its hand-drawn feel, messy edges and varied line thickness, the font comes with a warm feeling of authenticity and adventure that wakes memories of camping trips and grilling s’mores over the bonfire. Westfalia comes in one weight, with capital letters, numbers and punctuation marks, and works especially well as bold headings or on posters. You can download the font for free after providing your email address and use it both in personal as well as commercial projects. Where will it lead you? (cm) 2. Copying Text To The Clipboard Made Easy Copying text to the clipboard should be easy. It shouldn’t require a lot of steps to configure, nor hundreds of kilobytes to load, nor any bloated frameworks. That’s the idea Zeno Rocha had in mind when he built clipboard. js, a new approach to copy text to the clipboard. The library gets by without any frameworks or Flash and weighs only 3KB gzipped. You can install clipboard. js via npm, bower, or a good ol’ ZIP file. After having it set up, the library lets you copy content from another element by adding a data-clipboard-targetattribute in your trigger element, and by defining a data-clipboard-action attribute, you specify if you want to either copy or cut content. A nice detail: To show some user interaction or capture what has been selected, the library fires custom events such as success and error for you to listen to and implement your custom logic. Worth checking out.  (cm) Simplify Website Administration With The New Plesk   Creating and running web projects can be frustrating, especially if your tools don’t play well with one another. The recently updated Plesk Onyx was built to integrate with all the amazing tools you use. It has a neat Let’s Encrypt and Slack integration, supports automated deploys through Git, creating multiple Docker containers at once, manages all the CMSs (plugins included), and so much more. Check out their demo and free trial. 3. Free Tutorials To Brush Up Your Web Development Skills Ready to take your web development skills to the next level? Here are some free tutorials that are bound to up you in the coding game. To get to grips with the CSS Grid Layout specification, check out “Grid by Example”. It’s a collection of short video tutorials and example code that show you the key features of Grid and how they work. When it comes to finding your way around ES6, you’re well off with the interactive ES6 cheatsheet that Swizec Teller created. Using editable code examples, it teaches you the basics of the ES6 syntax in five minutes, so you’ll be able to read and understand the new JavaScript syntax. Using it on your own might take longer, though. A real potpourri of valuable tutorials comes from Wes Bos. His “What The Flexbox” course lets you in on the secrets of, well, Flexbox. In “Learn Redux”, Wes teaches you in 2. 5 hours how to build a simple photo app to simplify the ideas behind Redux, React Router, and React. js. And, last but not least, in “Command Line Power User” you’ll learn to develop a modern command line workflow with ZSH, Z, and related tools. Finally, one for the designers: If you’ve ever played with the thought to switch to Sketch for UI design and prototyping purposes, Craft and InVision have teamed up to bring you the free “Switch to Sketch” tutorial. The 8-part video series offers insights into the basics of Sketch and its workflow and also features some advanced tips for the pros amongst you. Happy learning! (cm) 4. Conference Videos! Fresh Conference Videos! What could be better after a long day than finding a comfy spot on the couch, preparing a nice cup of tea (or coffee if you prefer), and catching up on some fresh conference videos? Just last week the Beyond Tellerand conference took place in Berlin, and, well, good news, the videos from it are now ready to be tuned in. They cover a wide range of topics, from typographic workflows of the future and refactoring CSS to why measuring data doesn’t necessarily create more meaning and how you and your team can adopt pattern thinking. Good stuff. For a good dose of CSS, be sure to tune into the videos that CSS Day recently uploaded from their June event in Amsterdam. And, last but not least, the videos from SmashingConf Barcelonaare now online, too. Responsive web apps with container queries, real art direction on the web, designing choice, and optimizing eCommerce conversion rates are just a few of the topics covered. Enjoy! (cm) GraphicStock Is Giving You 7 Days To Download Anything You Want   There are many places to download free stock images and illustrations, but you never can be sure whether the provided assets are free from any copyright claims, and neither will you find the same level of quality you'll get from professional platforms.  GraphicStock is such a platform that offers more than 300,000 of high-quality photos, illustrations, backgrounds, and design elements for only USD 99 per year. The number of downloads for videos, templates and images is unlimited. And there's a free 7 day trial available, too. Anything that you download during the trial period is yours to keep and use forever.  Happy downloading! 5. Virtual Reality: Where We Are Today And Where We’re Heading With more and more VR headsets hitting the market, 2016 has been named “the year of VR”. VR can reproduce and, most importantly, enhance every other medium (think film, theater, games, apps) in a virtual environment. In most minds, however, VR is still considered nothing but a gimmick. And that’s only human. We as humans are critical whenever new technologies and platforms hit the market. We were when the first ever flight was conducted in 1903 (in fact, it took five years until the press and the public reacted to the fact that humans were now able to fly), just like when laptops were introduced in the 80s. With virtual reality, we are at the same turning point today. The opportunity is here, now we need to figure out what to do with it. Where do its strengths lie? Where can VR create real value? In his Medium article “Here’s why you’re overlooking how much VR actually matters”, Jory MacKay takes a closer look at why we underestimate the significance of VR and at the new opportunities it brings along to connect people, explore distant places, revolutionize learning, and change the way we shop. The future of virtual reality looks bright, but it will also take a long time before a large volume of content will be available for it to make the technology really shine.  WebVR could get us a step closer to this by giving content creators the opportunity to build and distribute virtual reality experiences via a web browser. WebVR already landed in the Firefox Nightly build and is planned to move from beta builds to a stable Chrome release by the end of this year. Microsoft also announced experimental WebVR support in Edge. And some websites are already using Web VR live. By the way, a good primer on developing for VR already todaycomes from David Gordon. In it, he shares insights into how he and his team built a mobile application demo for Samsung Gear VT that enables users to explore the features, pricing, interiors and exteriors of vehicles. Let’s not wait what the future might bring for VR, let’s start shaping it.  (cm) 6. Refactoring Code Without Losing Your Mind Nobody likes to work with legacy code, but often it’s something you just don’t get around doing. Perhaps you’ve hard-coded your CSS to see if it would work and now you need to make it production-ready? Or you need to tidy things up because you did things in a hurry? Sometimes your CSS might also become too difficult and expensive to maintain and the only option is to rewrite it. Whatever it is that makes you refactor your CSS, Harry Roberts shared some valuable tips and tricks to make it happen without losing your mind in a talk he recently gave at CSSconf Argentina. The accompanying slides are available on Speakerdeck. They help you assess what to refactor and when and offer some further insights into tackling the task the right way. Among others, Harry explains how you can refactor CSS while still shipping features, how to avoid regressions when adding new CSS, and how you can avoid the dreaded refactoring tunnel. Last but not least, you’ll also take a look at running new and legacy code in tandem. Speaking of technical debt: Maiz Lulkin also wrote a great primer on the topic.  (cm) 7. Freebie: Anaglyph Photoshop Actions Our brains are easy to trick. To turn a simple image 3D, for example, it takes nothing but two differently filtered color layers (most often red and cyan). When we view the image through anaglyph glasses where one eye is covered with a red, the other with a cyan filter, we get the impression to see a three-dimensional image. Simple yet cool. If you’re into things like these, well, good news: The folks at Micromove Creative Design built a set of 15 free, anaglyph Photoshop actions so you can turn any image into an anaglyph image. To apply the effect, just open your plain ol’ image in Photoshop and double-click the . ATN file that you download with the actions bundle. Then select one of the 15 effects and hit Play in your Action panel tabs. To find the best composition, you can adjust the positions of the red and blue layers using the Move tool, and ta-daa — there it is your own anaglyph image! By the way, the effect can also look cool when viewed without anaglyph glasses.  (cm) 8. Secrets From The Road How about a trip around the world? No time for that, you say? Of course! Just check out Eva-Lotta Lamm’s virtual travel diary Secrets From The Road, and she’ll take you with her on a round-the-world trip — in sketchnotes. Next stop: India. In September 2014, Eva-Lotta embarked on the 14-months-long journey. To capture all those encounters and observations, the foods she tried, the things that made her smile, the ideas she had, she spent one to two hours every day to document the stage in a sketchnote. Now, two years after the departure, Eva-Lotta publishes one sketchnote every day for us to follow along and revive the trip for the whole 14 months. The sketchnotes are pure eye candy, and there are so many interesting, funny, and also strange things to discover about the places she visited. A very personal and inspiring look at an impressive journey. Next time you plan a trip, remember to take a notebook and jot down your experiences. What’s in it will be more precious than what an armada of memory cards could ever hold. Promised.  (cm) 9. Recent Articles On Smashing Magazine DESIGN ARTICLES True Lies Of Optimistic User Interfaces You, Me And The Emoji: Character Sets, Encoding And Emoji How To Create A Dramatic Vector Illustration A Quick Guide For Designing Better Buttons What Everyone Should Know About The Process Behind App Design The Golden Rules Of Bottom Navigation Design CODING ARTICLES CSS Grids, Flexbox And Box Alignment: Our New System For Web Layout INSPIRATION, WORKFLOW, MISC. Where Are The World’s Best Open Device Labs? Define Your Process To Master Time, Gain Clarity, And Take Control Breaking Out Of The Box: Design Inspiration (November 2016) Web Development Reading List #157: FlyWeb, Lying Charts, And Feedback Without Context Web Development Reading List #158: Form Usability, Vue. js, And Unfolding Critical CSS

Google Sites je deo Google Apps-a koji vam omogućuje da kreirate web sajtove u saradnji sa drugima. Ljudi mogu zajedno da rade na Site-u kroz dodavanje elemenata i informacija iz drugih Google aplikacija (kao što su  Google Docs, Google Calendar, YouTube i Picasa), kao i unošenje novih slobodnih sadržaja. Zajedničko kreiranje sajta je jednostavno kao editovanje dokumenta, i vi uvek kontrolišete ko će imati pristup, samo vi, vaš tim, ili čitava vaša organizacija. Google nudi šablone, moćan tekstualni editor, 10GB prostora za skladištenje za svaki Google Apps nalog i integraciju sa ostalim Google servisima, što će vam omogućiti da ugrađujete gadžete, kalendare, tabele, prezentacije, foto slajdšouove i video klipove. Vi možete da pozovete ljude da pogledaju sajt ili da sarađuju na njegovom kreiranju a možete i da publikujete sajt kako bi svi mogli da ga vide. http://sites. google. com/site/sites/  

Virtual Hosting ima odličan članak koji se bavi detaljima dobrog web dizajna koji su usko povezani sa istraživanjima kretanja pogleda posmatrača. Većina saveta i informacija je zdravorazumska: ljudi skeniraju web stranice a ne čitaju ih, prvo pogledaju gornji levi ugao stranice, ignorišu reklame, ignorišu šareno formatiranje koje izgleda kao reklama, i tako dalje. Ali zašto ljudi stupaju u interakciju sa stranicama na ovaj način?Odgovoro je očigledan: web dizajneri su istrenirali posetioce da koriste web sajtove na određeni način. Yahoo, Google, AOL, i MSN formatiraju svoje web stranice prema navedenim smernicama. Zbog toga, ljudi očekuju imena web sajtova i logoe da se nalaze gore levo. Oni očekuju da slike koje liče na banere budu reklame i zbog toga ih ignorišu. Oni očekuju da sajt izgleda i funkcioniše na određeni način i postanu frustrirani kada oni to ne rade. Na neki način ovo je slično kao kod novina. Ljudi očekuju da novine izgledaju i funkcionišu na određeni način, bez obzira u kom gradu ili kraju sveta se nalaze. Svaki web sajt koji koristi ovu standardnu šemu (koja uopšte nije loša) dovodi do toga da sve više korisnika očekuje da i sledeći sajt koji posete izgleda isto. To je sa jedne strane dobro jer se tako povećava upotrebljivost. Sa druge strane je loše zato što se time ograničava kreativnost i otkrivanje novih dizajnerskih rešenja. Ovajko dizajneri moraju da budu inovativni unutar veoma malog prostora za manevrisanje.

Šta obuhvata ova knjiga U Poglavlju 1, "Pokretanje Bootstrapa", postavljen je radni okvir Bootstrap u kontekst isticanjem relevantnih funkcija koje su uključene. Ukratko su opisani različiti načini za uključivanje radnog okvira, a na kraju poglavlja objasnićemo podešavanje potrebnih fajlova za demo projekat ove knjige. U Poglavlju 2, "Kreiranje iskaza stila", predstavljeni su Bootstrapovo označavanje i pravila stila za mobile-first mrežni sistem i HTML elemente slike. Takođe su opisane pomoćne klase i prilagodljivi pomoćni programi koji su dostupni u Bootstrapu za ubrzavanje razvoja. Poglavlje 3, "Izgradnja rasporeda", fokusirano je na pokretanje demo projekta koji je podešen u Poglavlju 1, "Pokretanje Bootstrapa", dodavanjem vođice stila za uobičajeno upotrebljene HTML elemente i strukturiranje rasporeda stranice. U Poglavlju 4, "O navigaciji, podnožjima stranice, upozorenjima i sadržaju", prikazaćemo kako da iskoristite Bootstrap za izgradnju podnožja stranice i upozorenja i kako da dodate i stilizujete različite tipove sadržaja, koristeći ugrađene klase Bootstrapa. U Poglavlju 5, "Ubrzavanje razvoja pomoću nezavisnih dodatnih modula", objasnićemo kako da upotrebite korisne nezavisne jQuery dodatne module za dodavanje interaktivnosti i zanimljivih detalja na veb stranicu. U Poglavlju 6, "Prilagođavanja dodatnih modula", opisaćemo kod Bootstrap jQuery dodatnih modula i prilagodićemo ga za poboljšanje demo stranice ove knjige. Dodatni moduli će biti ispitani i prošireni u ovom poglavlju ne samo da bi stranica bila bolja, već da biste proširili znanje kako su jQuery dodatni moduli građeni i kako se ponašaju unutar Bootstrapovog ekosistema. U Poglavlju 7, "Napredni nezavisni dodatni moduli", identifikovaćemo nove funkcije ili poboljšanja koje želimo da kreiramo u demo veb sajtu. Predstavićemo biblioteke koje će vam pomoći da postignete ove ciljeve i shvatićete kako mogu da budu lako integrisane u postojeću arhitekturu. Poglavlje 8, "Pomoćne klase", treba da popuni neke praznine u znanju koje možda imate o Bootstrapu 4 pregledom Bootstrapovih različitih pomoćnih klasa koje možete da upotrebite efikasno da biste ubrzali razvoj veb sajta. U Poglavlju 9, "List Groups i Accordions", prikazaćemo kako veb sajt može da bude optimizovan za maksimalnu performansu i brzo vreme učitavanja na bilo kom uređaju. U Poglavlju 10, "Optimizovanje veb sajta", videćete kako veb sajt može da bude optimizovan za maksimalnu performansu i brzo vreme učitavanja na bilo kom uređaju. U Poglavlju 11, "Integrisanje sa AngularJS-om i Reactom", opisaćemo osnove upotrebe Bootstrapa unutar AngularJS-a i Reacta. AngularJS je JavaScript radni okvir tipa Model-View-*, dok je React JavaScript biblioteka koja se nadovezuje samo na deo View tipa steka Model-View-Controller. Veoma veliki broj veb stranica je izgrađen pomoću radnih okvira ili biblioteka, kao što su AngularJS i React, jer oni obezbeđuju veoma korisne apstrakcije povrh JavaScripta i DOM-a. LINK KA KNJIZI I KORPA ZA NARUČIVANJE.

Web zasnovani editor web sajtova SynthaSite je ponovo lansiran ali sada sa potpuno novim i radikalno unapređenim korisničkim interfejsom. Selektujte kolornu šemu vašeg web sajta a onda modifikujte boje i šablone koristeći what you see is what you get editor, koji podržava drag and drop funkcije. Prevucite bilo šta, od osnovnog teksta i slika pa sve do formi, mapa, video fajlova i foto galerija na vaše stranice. Zatim možete da publikujete web sajt koji ste kreirali direktno na SynthaSite-u, na http://imevašegsajta. sythasite. com adresi, ili možete da preusmerite vašu postojeću URL adresu na SynthaSite, ili možete da daunlodujete vaš rad i hostujete ga na sopstvenom web serveru. Ako SynthaSite nije baš ono što vam treba, pogledajte šta može da vam ponudi onlajn editor Webon. Adresa: SynthaSite

Using MVC 6 And AngularJS 2 With . NET Core Open project. json to add new dependencies in it. Bootstrapping, using Type Script In dependencies section, add two dependencies. Use the method to add services to the container. Let's add MVC Service to our Application. Read more Tech Junkie Blog: ASP. NET Core : Add jQuery, Bootstrap, AngularJS Using bower. json 4. Save the bower. json file, once the file is saved a folder called "lib" will be created and will contain the bootstrap and AngularJS libraries Change the markup to look like the following { "name": "asp. net", "private": true, "dependencies": { "bootstrap": "~3. 3. 6", "angular": "~1. 5. 7" } } ASP. NET Core : Add jQuery, Bootstrap, AngularJS Using bower. json In the blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP. NET Core application. Normally we will use NuGet to bring in these libraries but ASP. NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side. Read more AngularJS Authentication with JWT Creating the basic node server to serve up random users via API endpoints. Adding JWT support to the server. Setting up a login on the angular app and an authentication endpoint on the server. In the series, we'll be building a simple application to get random user information from a node server with an Angular client. Adding middleware to the node server to decode and verify the token sent from the client. Read more How to Write Modular Code with Angular UI-Router & Named Views You may not be aware of how the ui-router library deals with named views nested inside of a parent state. If you have used ui-router before, you may be aware of how the dot-notation is used to define child states inside of a parent state . How to Write Modular Code with Angular UI-Router & Named Views In the tutorial, I placed all of our views inside of a templates folder. If the absolute names are not present, the application will not know where to find these named views. Read more Angular: Angular 2. 4. 0 Now Available Only a member of this blog may post a comment. Subscribe to: Post Comments (Atom) The release updates our dependencies to the recently announced RxJS 5 stable Posted by Stephen Fluin at 11:09 AM Angular version 2. 4. 0 - stability-interjection - is now available. Read more Learn Protractor Testing for AngularJS Protractor: Running tests on multiple browsers Use protractor to catch errors in the console Test Simple Binding With Protractor Protractor Page Objects are a recommended for testing your AngularJS applications. When running end-to-end tests with Protractor for your AngularJS applications, you'll want to test mobile as well. Read more 9 Best AngularJS IDE Plugins/Extensions Tool for Developers Today I'd like to share some AngularJS IDE Plugins and Extensions which can improve the way you code with your favourite code editor. There are many popular AngularJS IDEs available today I have listed 10 of the best Plugins and Extensions for building with Angular. It would be great if you could add links to the plugins The SideWaffle extension adds a lot of useful Snippets, Project- and Item Templates to Visual Studio. By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. Read more        

ARTICLES The Year in Design A year in design review by Jeffrey Zeldman. Digital Product Design PrinciplesTwelve design principles Wouter de Bres wrote for his team to help make design decisions. Small is Beautiful: Why Desktop UX still has something to teach MobileScott Jenson writes that focusing we are so in love with flashy UX features that we ignore the deep impact of the proven and the mundane to create powerful UX experiences. Mobile Web vs. Native Apps or Why You Want BothThe Web is for audience reach and native apps are for rich experiences. Both are strategic and valuable. Preventing the Executive Swoop and Poop with Design SprintsWhen an organization integrates design sprints into projects, they see a dramatic decrease in outside influencer disruptions and an increase in their design quality. The Most Important Design Jobs Of The FutureDesigner leaders at top companies predict what the next generation of UX designers might be doing. 'Design Thinking' for a Better YouDesign thinking not only can help create better designs but can help create the kind of lifelong habits that solve problems, achieve goals and help make our lives better. Jedi Principles of UI AnimationWhy, when, and how to use animation in your UI, what UX Choreography is, and what all of this has to do with Star Wars. Sponsor UX Design Weekly and reach over 12,000 highly engaged UX designers every week.  Contact me for more details. TOOLS & RESOURCES Crafting Your UX PortfolioPaul and Britney Mederos put together a weekend guide to help you put together your UX portfolio. Devices - Facebook Design ResourcesThe Facebook design team released a set of design resources of popular devices. How to Run an Empathy & User Journey Mapping WorkshopA primer on two popular design workshop techniques by Harry Brignull. Design Workflow with Sketch A new free e-course on how to improve your design workflow with Sketch. MEDIA How to Make Sense of Any MessAbby Covert has made her book about information architecture for everybody available online. Giveaway: Conference Pass to the O’Reilly Design Conference 2016Designer Hangout has teamed up with O’Reilly to give away one bronze conference pass to The O’Reilly Design Conference, January 20th-22nd in San Francisco. UX PORTFOLIOS Alexey IvanovAlexey Ivanov is an innovation designer with a background in UX. His portfolio mixes in his design work and provides case studies of each. UX JOBS Director of User Experience at CustomInk (Fairfax, VA)CustomInk seeks a Director of UX to lead the team who design and craft the experience used by millions of people to design, organize, and purchase custom t-shirts. LAST BUT NOT LEAST Fight For UXThe first five principles of UX plus take an oath to fight For UX. “Every great design begins with an even better story. ”— Lorinda Mamo

ARTICLES The Pain With No NameThe web has been around for over 20 years but Abby Covert writes that we're not getting any better at information architecture. Good UX designers must be fighters Andrew Doherty, product designer at Google, gives tips on how to fight for your designs It’s not the interface that makes the experienceIf we are to design for experiences we need to move beyond the interfaces that empower and constrain those experiences. How we used design research to launch The New York Times en Español Juliette Melton writes how her team used coordinated research efforts to understand new readers, and build the best product and editorial experience possible. User Intent Affects Filter DesignResults pages that refresh too soon or shift the page position disrupt the filtering process. Design filters and facets to offer a smooth user experience. How one small change made by twitter could make you love more. The small changes that turn a product from being a very good, usable product, to an excellent, world class product. TOOLS & RESOURCES UX Assist An iPhone app that provides workflows to designers comprising of activities related to user research, information architecture, interaction design and usability testing. Top 50 Best Value UX Design Graduate Programs of 2016A list of some of the best courses and programs for those interested in getting a degree in UX. Also check out the best alternative UX programs. Chat UI kit for Photoshop and SketchChat apps are all the range now. Here's a free beautifully minimal UI kit for creating a chat app in Sketch and Photoshop. Introducing Vector Networks The folks designing Figma, the collaborative interface design tool, are reinventing something as fundamental as paths. MEDIA UX Showcase 2016Videos from a one day event on improving user experiences to cut red tape and make government programs and services better and more accessible to the public. UX and Comedy (Featuring Chelsey Delaney)Funny person and Planned Parenthood UX lead Chesley Delaney discuss the importance of humor and humanity in the User Experience Design process. UX PORTFOLIO Fabio MunizFabio's portfolio features 3 case studies showcasing his thought process, deliverables, and outcome.

Big week as Adobe publicly launched Experience Design CC. Not to be outdone, InVision announced they acquired Silver Flows, the tool that lets you prototype within Sketch. Which one will you use? – Kenny   ARTICLES 8 Unintuitive Lessons on Being a DesignerJulie Zhuo reflects back about what she has learned the past decade and offers advice to grow. Describing PersonasIndi Young says keep the well-researched persona and replace those demographic descriptions with descriptions of the underlying reasoning. Ford’s Quest To Remake Itself Into A Master Of UXFord is now trying to recast itself as a company built around user experience and trying to design its cars through the customer’s eyes. Design decisions: Junk drawers and dark cornersPay attention to what you’re putting in those dark corners and junk drawers of your app. Designing With the User’s Context in Mind  Design and content are not enough to create a great user experience if we do not also consider the user’s context. How To Integrate Motion Design In The UX WorkflowStrategy for integrating animation in the UX workflow. SPONSORED LINK All-in-one Analytics and FeedbackHotjar is a new and easy way to truly understand your web and mobile site visitors. Identify your hottest opportunities for improvement using: Heat Maps, Recordings, Funnels, Forms, Polls and Surveys. TOOLS & RESOURCES Adobe Experience Design CC (Preview)Design and prototype websites and mobile apps all in one app. iOS 9. 3 iPhone UI Kit for Illustrator & SketchReally detailed and up-to-date kit for the upcoming iOS 9. 3 release. Plus it’s free! PixelKitShare, discuss and find your team’s design work. AppealingMobile UI animations found in the wild. Google Design Bottom navigation GuidelinesAndroid apps might soon look more like iOS apps as Google has updated their Material Design guidelines to include the previously frowned upon bottom navigation tabs. Lookback USBRecord any Apple device screen with just a Mac and a USB cable. UIDB. io – The User Interface DatabaseSpecific, searchable examples of UI from around the web. User Experience Design & Research JargonsA list of user experience design jargon, along with their meaning. MEDIA How Airbnb designs for trust Joe Gebbia, co-founder of Airbnb, talks about how good design helps foster community and connection instead of isolation and separation. Principles of Mobile App DesignGoogle’s UX Research Lead Jenny Gove takes you through 25 principles to build an app that helps users achieve what they’re looking to do. You can also download it as a PDF. UX PORTFOLIOS Robbie MansonRobbie is a product designer at Facebook in London. His portfolio has well written case studies that show his process and deliverables. UX JOBS User Experience Designer at Qualcomm (San Diego, CA)Qualcomm is looking for a UX designer for both web and mobile projects in sunny San Diego. LAST BUT NOT LEAST Designer’s BlockHelping designers with creative block. “To simplify complications is the first essential of success. ”— George Earle Buckle

ARTICLES The Veil of IgnoranceDon't design for yourself and your perfect eyesight, retina screens, and fast internet connection. Imagine a world where you are not who you are right now. The Differing Roles of the UX Designer UX design is a relatively new role for many so different companies expect vastly different things from the same job title. Finding your own style as a designerThe case against having a style by Tobias van Schneider. The Race To Create A Skeuomorphism You Don't HateTwo powerful companies are re-inventing one of the oldest, most-hated ideas in UX. UX Design for Mobile: Bottom NavigationHelp users navigate by designing bottom navigation that is visible, clear, and simple. From touchpoints to journeysOnly by looking at the customer’s experience along the entire journey can you really begin to understand how to meaningfully improve the experience. For another take on customer journeys, check out Online experiences begin and end offline. SPONSORED LINK Bring Your Team To LifeMake HipChat Your Collaboration Command Center. Group Chat, Video Chat & Screensharing. $0/Unlimited Users.  Get Started TOOLS & RESOURCES LingoOrganize, share and use all your visual assets in one place from the Noun Project. Other solutions include Pixave and Iconjar. UX Visualization Examples & TipsMore than 50 examples of visualization including journey maps, personas, and infographics. UX for ChangeA project by Nick Finck to connect designers with projects, design mentors with mentees, and to provide resources and tools to those who are interested in how design can improve the world we live in. Slides Framework: Design Resources (PSD & SKETCH) A free pack of design resources, which includes over 90 high quality slides and 15 templates for Photoshop and Sketch. For another resource, check out Module 2. MEDIA Interaction16 VideosRecorded talks from the ninth annual Interaction conference, organized by IxDA. Design in Tech Report 2016Slides and video of John Maeda at SXSW presenting this year's report. Lots of interesting things here of where we are heading. The Physical InterfaceJosh Clark explores the practical, meaningful design opportunities for the web’s newly physical interfaces. UX PORTFOLIOS Joshua NewtonJoshua is a Product Designer that has a very image heavy portfolio that shows sketches, wireframes, and the final output. I would have loved to see some of his design thinking and role behind his projects. Got a UX portfolio or case study you want to share? Contact Me LAST BUT NOT LEAST Why we won’t hire you as a UX designerHere's one way to hire the right UX designer. “Success breeds complacency. Complacency breeds failure. Only the paranoid survive. ”— Andy Grove

ARTICLES UX Designers Aren’t Always Right A 2 part series by Tom Greever about how UX designers can sometimes get so wrapped up in their ego that it can be hard to recognize the fact that there was some mistake in their design. Read Part 2 here. 5 Design Secrets from the Kids Who Will Replace YouWe should bring a beginner’s mindset to our work, regardless of our age. How TurboTax Used Design To Win The Tax WarsTurboTax’s secret weapon of focusing on user experience, including a massive ethnographic research project, is why they have the largest share in the online tax category. The Price is RightHow Airbnb used host feedback to build personalized pricing tools. The Importance of Hiring Junior DesignersHow Melissa Mandelbaum got her first Product Design job and how her team has been successful with hiring Intern and Junior Product Designers. Bringing Home the InterviewsHow to train ourselves as user researches to interview well all the time, even in these tough situations. SPONSORED LINK Focus on What MattersGigster provides an on-demand team to build your product for a fixed price TOOLS & RESOURCES UX Design GuideLots of great UX links and resources by Austin Knight. KonceptCreate interactive prototypes and run usability tests in one platform. Lucky Loyalty EffectThe more consumers invest into your brand, the more they incorrectly believe that they’ll win entirely-random promotions over less loyal customers. MEDIA Christina Wodtke – Getting2Alpha PodcastChristina Wodtke talks about her boundary-crossing model of design thinking as distributed cognition. The UXD BookEverything you need to get started in UX, find a job as a UX Designer and get ahead in a growing field. Use discount code ‘uxdesignweekly’ to get an additional 20% off the launch day price. Grids – R/M Design SchoolA beautiful “design primer” in grids and layout. UX PORTFOLIOS Lanya OlmstedLanya is a UX Designer at HubSpot with a portfolio that goes into depth about her quantitative/qualitative process + specific design decisions that led to the final design. Got a UX portfolio or case study you want to share? Contact Me LAST BUT NOT LEAST Design FactsSo much to know, So little time. “I think about architecture all the time. That’s the problem. But I’ve always been like that. I dream it sometimes. ”— Zaha Hadid

If you have a minute, I'm working on a side project and can use your help -what is the one question you would want to ask a UX professional? ARTICLES UX Requires a Puzzle MindsetIf you want to build a reputation that opens doors in your career, gains the respect of your colleagues, and makes users more effective: treat UX like a puzzle. Getting Started with Wireframes A primer on what you need to know about wireframes, why and how you should use them in your workflow. The Way We BuildHow rethinking the Airbnb app changed the way the Airbnb approached design through a Design Language System. Designing For The Internet Of Emotional ThingsIn the coming wave of emotionally intelligent and mood-aware Internet of Things, the designer’s role will be more important than ever and practices must adapt one step ahead of development. Highlight Items Already in the User’s Cart (96% Don’t)A user's ability to recognize and re-find products was impeded when items in their cart weren’t also highlighted in any product lists they subsequently navigated. The Rise of User Experience LeadershipAs UX design leaders we must be poised to drive a design culture transformation within our organizations. When to be Hasty with Product ResearchIndi Young recommends running your research separate to lean process if you want to gain deep understanding of human thinking. SPONSORED LINK Programming for Designers - a little code can have a big impact on your salaryDESIGNERS WHO CAN CODE ARE IN DEMAND. Learn the basics of programming and add a valuable tool to your skill set. This course will help designers work more efficiently and effectively by learning to express their ideas in code, opening up a whole new realm of creative possibilities. This content is sponsored via Syndicate Ads. TOOLS & RESOURCES CassetteRecord, transcribe, and bookmark key moments in user interviews and share it all with your team. NotableA progressive design platform by Zurb that helps teams design great products faster. Platforma Ultimate Wireframe KitA collection of 200+ wireframe layouts divided in 15 popular content categories and carefully assembled for Sketch, Photoshop and Illustrator. There is a smaller free version. 38 Design Tips for Creating an Amazing User ExperienceA list of basic UX tips to keep in mind to provide your visitors and users with the best experience possible. MEDIA What I Know Best - Christopher LiuChristoph Liu, Interaction Designer at Mercedes-Benz, talks about designing how we'll experience the next generation of cars. UX PORTFOLIOS Martijn van den BroeckMartijn is a UX Design Intern at Google. His portfolio of case studies are well done and engaging. He also writes weekly tips on building an online portfolio. LAST BUT NOT LEAST New Study Finds Humans Experience Greatest Feelings Of Joy When Pushing 'Skip Ad' ButtonIt might be an Onion article but there might be some truth to it. I love skipping ads! “The ability to simplify means to eliminate the unnecessary so that the necessary may speak. ”— Hans Hofmann

ARTICLES The Big Problem with Design Inspiration We seek inspiration when really we look for existing solutions.  Tanner Christensen, Product Designer at Facebook, writes that we need to put in the work Promoting a Design System Across Your ProductsBy understanding your organization through its product portfolio, you’ll strengthen the design system that will help you achieve a stronger and more cohesive experience. Your UI is your product’s humble compensation for not being telepathicAs designers, we’re enabling telepathy and we can use that to think about how much that extra button or that long line of copy will slow down the thought transfer. Building ProductsWhat it takes to build great products - from framing, execution, measuring success, and team dynamics. 10 reasons why placeholders are problematicReasons why placeholders can cause problems when they are used as replacement for labels. Design Details: NeuBibleBrian Lovin writes and shows you some of his favorite design details in NeuBible for iOS. SPONSORED LINK Adobe Experience Design CC Wants to Hear from YouAdobe XD, the all-in-one design and prototyping tool, wants your input to help us build and test Adobe XD. The Adobe XD roadmap includes enhanced design features and support for Creative Cloud libraries, Windows and more. Download and join the conversation! TOOLS & RESOURCES dscout SprintLightning-fast video feedback on mobile apps and prototypes. 7 Books Every UX Designer Should ReadA compilation of design books that have shaped the way Joanna Ngai, UX Designer at Microsoft, thinks. iOS 10 Human Interface GuidelinesApple announced iOS 10 this week and with it comes an updated human interface guideline. Google Fonts RedesignGoogle Fonts got a nice redesign. If you're interested in the backstory, check out Reimagining Google Fonts. MEDIA Expose UXWatch UX experts help startups. It's like Shark Tank for UX design. Inside Intercom: Julie Zhuo (Podcast)Julie Zhuo, Product Design VP at Facebook, talks product design including why you need controversial design principles. Designmovi. EsMovies and talks about design. UX PORTFOLIOS I usually feature a portfolio or two here but this week there were lots of great articles about the process that I wanted to share. The Unofficial Design Portfolio HandbookMartijn van den Broeck, UX Design intern at Google, put together a summary of 36 articles he wrote about design portfolios. Design a winning UX portfolioIan Fenn writes about how to make a great first impression with your portfolio. How to pass a 2-minute UX portfolio screeningA check list for UX designers, recruiters and hiring managers. LAST BUT NOT LEAST Apple UX Goes Full DadcoreApple is embracing its inner dad with puns and useless punchlines. “The enemy of art is the absence of limitations. ”— Orson Welles

ARTICLES 7 Problems Growing Design Teams FaceAarron Walter writes about the common problems every design leader faces. Supersized. Making design work in large organizationsBen Holiday says we need to push hard for design leadership if we want to create great products and services. Typography for User InterfacesSome fundamentals and tips for setting type on user interfaces. Slides available here. Reflection: The Pause That Gives InsightHannah du Plessis and Marc Rettig write that reflection is a foundation of the creative process. Prospect Theory and Loss Aversion: How Users Make DecisionsPeople avoid losses and optimize for sure wins because the pain of losing is greater than the satisfaction of an equivalent gain. Improving UX For Color-Blind Users13 tips to improve the experience for color-blind people. SPONSORED LINK June Update of Adobe Experience Design CC (Preview)Adobe has released another monthly update of Adobe XD, the all-in-one UX design tool. Try measurements, new blur effects and embedding prototypes within a website. Now available in French, German, Japanese. TOOLS & RESOURCES Data - Craft by InVision LABSAnother update by InVision - now you can import real data from public API's instead of using lorem ipsum. OpenvidCould be great for usability testing - seamless screen, mic, and camera recording with a Chrome Extension. Marvel for iOSMarvel updated their iOS app to include a rapid design tool so you can now go from creating mockups from scratch to prototypes on your phone. Trello Board for Google Design SprintMilap Bhojak put together this Trello board for those wanting to run aGoogle Design Sprint. iOS 10 UI Kit An unofficial iOS 10 UI kit for Sketch. MEDIA Jordan Dobson – User Defenders PodcastA talk with Jordan Dobson who talks about crafting prototypes in order to gain valuable insight and how little details can make a big difference. J Cornelius - Prototypes, Process & Play 2015How to help us become better designers when we worry less about the visual outcomes. Iterative UI DesignFrom this year's Apple WWDC, learn how to use Keynote to quickly build realistic and tangible design comps and user flows. UX PORTFOLIOS Ramana JainiRamana's portfolio not only has examples of different types of deliverables but also showcases a few case studies as well. UX JOBS User Experience Designer at Creditcards. com (Austin, TX)As a User Experience Designer at CreditCards. com, you'll create user experiences that empower consumers to make smarter financial decisions and help people save money. LAST BUT NOT LEAST RAMSJoin the Kickstarter in making the world’s first feature documentary on legendary designer Dieter Rams, and in helping preserve his design archive. “Not only can a designer change the world, a designer should. This is the best job in the world! Let’s do it right. . ”— Mike Monteiro

What is UX Design? 15 User Experience Experts Weigh In UserTesting Blog — Well, I think it’s important to start by saying there’s no commonly accepted definition. User experience design is a concept that has many dimensions, and it includes a bunch of different… Open in a new tab ARTICLES Defining Product Design Alex Schleifer, VP of Design at Airbnb, writes about ways to proactively create a design-friendly organization and redesign design. Design Doesn’t ScaleHow does a team of distributed designers, spread across different time-zones, projects and competing objectives find ways to work together to create one coherent experience. Stop the overuse of overflow menusOverflow menus seem like the perfect solution to “take away” complexity but you’re just obstructing it and don’t actually take anything away. Building Personas at Optimizely3 lessons we learned from building personas. For more on personas, check outResurrecting Dead Personas. 16 Prototyping Tools & How Each Can Be UsedQuestions to ask when starting a protyotype and scenarios with the right prototoyping tool to use for each. SPONSORED LINK Expand and Enhance Your UX SkillsWe work hard to bring together the best minds in the business—people just like you—to dive deep into doing our jobs better and talk about what’s coming next. If you love digital design, UX, content strategy, and all that jazz, join us and save $100 by using the code AEAUXDW! TOOLS & RESOURCES Sans FranciscoA collection of tools to help designers craft delightful experiences. Guacamole UI kitFree set of UI elements and vector shapes in Photoshop, Adobe Xd or Sketch. FractialA tool to help you build and document web component libraries, and then integrate them into your projects. MEDIA You Know What? F**K Drop DownsA SXSW Keynote by Golden Krishna of Google and Eric Campbell of Rdio about the death of dropdowns. Designing Interface AnimationVal Head writes about using animation to enhance the user’s experience in the newest book from Rosenfeld Media. Great Products Don’t Happen By AccidentSlides and speaker notes from a presentation by Jon Lax at the Design & Content Conference. UX PORTFOLIOS Adrien GervaixAdrien’s portfolio uses motion and visuals to show off his case studies and work. LAST BUT NOT LEAST Web Design in 4 minutesAn interactive demo of desiging a decent page in just a few minutes, following basic principles of web design. “It’s not about ideas. It’s about making ideas happen. ”— Scott Belsky

Naslovi Šta je dizajn? Berlinski dizajner, Koos Looijesteijn, radi prilično dobar posao, analizirajući iz nekoliko uglova i iznoseći sažeti odgovor u ovom postu. (kooslooijesteijn. net) Iznenađujuća Microsoftova odluka da radi sa Googleom (theverge. com) Članci Implementacija modela: CSS raspored elemenata na stranici korak po korak U ovom postu Dave Ceddia prikazuje način za pristup rasporedu elemenata u celini, kao kohezivni problem koji treba rešiti. Odličan post. (daveceddia. com) Tehnički dug – iskoristiti ili likvidirati? Nije uvek slučaj da je dug = loš. Ako se koristi pametno, tehnički dug obezbeđuje brze popravke problema i podstiče inovacije. Međutim, uskoro ćete saznati kada vam tehnički dug neće biti od koristi. (blog. ably. io) Dragi korisniče, evo zašto je ta promena trajala toliko dugo Al Tenhundfeld deli pismo u kom je napisao varijacije više puta tokom godina. U pismu se nalaze neke odlične stavke koje mogu biti od pomoći prilikom komunikacije sa zainteresovanim stranama kada sledeći put dobijemo slično pitanje. (simplethread. com) Prelazak sa jQuerya na Vue Ovaj vodič je više za ljude koji možda imaju godine iskustva u korišćenju jQuerya i žele da vide kako se stvari mogu uraditi pomoću Vuea. (css-tricks. com) Alatke / resursi Vodič za veb projekat Svakog meseca se objavljuju dva poglavlja o nekom aspektu procesa veb projekta - od razumevanja sajta korisnika do razumevanja dodataka za održavanje servera. Ovo će sigurno biti veliki izvor podataka. (webprojectbook. com) Razumevanje API-ja Shadow DOM Izuzetno informativni post Faraza Kelhinija koji istražuje različite aspekte API-ja Shadow DOM. Ako je za vas ovo novi koncept, dobro bi bilo da pročitate post. (blog. logrocket. com) Korišćenje GitHub izdanja za komentare na blogu (danyow. net) Daljinski razvoj pomoću uređivača VS Code (visualstudio. com) Osnove Reacta i ES6 (paper. dropbox. com) React obrasci i šabloni (codepen. io) Inspiracija Prodaja UI alatki - Evo šta smo naučili (freecodecamp. org) Izrada JavaScript pedalboarda za gitaru (trysmudford. com) Poslovi Kreativni direktor u kompaniji Plato Kao kreativni direktor odgovorni ste za upravljanje svakodnevnim kreativnim radom kompanije Plato korišćenjem naše distribuirane mreže dizajnera da biste kreirali i održavali izuzetan kvalitet rada. (useplato. com) Senior brend dizajner u kompaniji Mode Kao brend dizajner u dizajnerskom timu kompanije Mode pomoći ćete u poboljšanju našeg brenda dok donosimo Mode organizacijama na svakom koraku. „Oživećete“ zanimljiva i kohezivna iskustva za analitičare, naučnike i druge profesionalce na našim sajtovima za marketing i sadržaj, platformama, štampanim materijalima, kulturnim artefaktima i još mnogo toga. (mode. com) Potrebni su vam pasionirani programeri ili dizajneri? Dajte oglas u sledećem informatoru. Poslednje, ali ne i manje važno… Koliko košta Unsplash u 2019. godini (medium. com)

Knjiga za vas Više o knjizi i korpa za naručivanje. What web framework should I learn? Some wise words by Dave Smith, which really resonated with me and I'm sure many of you will find very fitting. If you happen to question yourself on what framework, tool or technology to learn, make sure you read this first. (medium. com) WordPress 4. 4 “Clifford” (wordpress. org) ARTICLES Why I'm Excited About Native CSS Variables CSS Variables are about to be mainstream very soon. In this post Philip Walton dives into why he is excited about them and how they differ from CSS pre-processing variables.  (philipwalton. com) Putting My Patterns through Their Paces Ethan Marcotte shares his thoughts and processes around taking a patterns-driven approach, as opposed to focusing on pages while doing responsive design.  (24ways. org) Holding Off on High Fidelity While designing, it’s important to remember that not everything needs to be perfect. The next time you eagerly launch Sketch or Illustrator ready to work up a new flow, consider stepping back and picking up a marker instead. (medium. com) Chrome Dev Summit 2015 Notes Notes and highlights from the recent Chrome Dev Summit, a two-day conference about "building beautiful and fast mobile web applications. "(danoc. me) Critiquing your own design (invisionapp. com) TOOLS / RESOURCES An Introduction To PostCSS Drew Minns gives a great overview of what is PostCSS, the history and how to integrate it into your workflow. If you haven't explored PostCSS yet, this is a great starting point.  (smashingmagazine. com) Bliss - A 3KB library for happier Vanilla JS Want to use Vanilla JS but find native APIs a bit unwieldy? Bliss is for you. Lea Verou created Bliss and has a nice post about the process on her blog, which is quite inspiring.  (blissfuljs. com) Battling BEM BEM is an awesome tool for writing modular CSS, but you'll inevitably hit some roadblocks. These are the 5 most common issues and how to resolve them. (medium. com) Getting Started With CSS calc() If you haven't had the time to dive into CSS calc() before, then this post by Ana Tudor is a must read. She starts off with a few basic examples and then dives into the power that calc() offers.  (smashingmagazine. com) Moving your website to HTTPS/SSL - tips & tricks (yoast. com) Tools for debugging, testing and using HTTP/2 (cloudflare. com) INSPIRATION Build it With Me - Connecting Designers & Developers (builditwith. me) Embracing Limitations (medium. com)