Webdesigner Depot

syndicated content powered by FeedBurner

...

Reset this favorite; show all Subscribe options

Subscribe Now!

...with web-based news readers. Click your choice below:

...with other readers:

(Choose Your Reader)FeedDemonNetNewsWireNewsFireNewsGator Outlook EditionRSSOwlShrookUniversal Subscription Mechanism (USM)

Get Webdesigner Depot delivered by email

View Feed XML

FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.

Learn more about syndication and FeedBurner...

Current Feed Content

• 8 Dead Web Trends We’Re Better Off Without

  Posted:Fri, 22 Mar 2019 10:45:31 +0000

  A lot of very smart people have said that those who do not learn from history are doomed to repeat it. Other people say that nostalgia bait…ahem…“retrospectives” get a lot of clicks. They’re both right, and I thought it might be both fun and educational to take a look at some of the dead UI conventions of yesteryear.

  It’s good to remember why they ever lived, and how and why they died. It gives us insight into how best practices were born, and why they are the “best” practices we have. It gives us context for building the future of the web. And besides, the industry gets newbies every year, and they should know some of this stuff, too.

  I’m glad they don’t have to suffer what we suffered, but they should know what we suffered. Friends, countrymen, Romans: we come here not to mourn these UI conventions and browser features, but to bury them.

  <blink>

  Shhh… shhhh… it’s okay. It’s okay. It’s dead, and it can’t hurt you anymore.

  For everyone who didn’t have a visceral reaction just now, the <blink> tag made things do just that: blink. Off and on, there and not there. It’s almost like it was designed to hurt your eyes. Invented during the height of the early Browser Wars, the tag was an early example of browser-specific tags, and was meant to give Netscape Navigator an edge over the then-nascent Internet Explorer.

  I’m not saying that this decision killed Netscape Navigator, or that NN deserved to die because of it, but that’s exactly what I’m saying.

  (Screenshot not provided for obvious reasons.)

  Flash Menus

  I was guilty as hell of this one. That’s right, in the beginning, I couldn’t get the hand of animated navigation menus (read: menus having a hover state) built with JavaScript. Or DHTML, as it was called in Dreamweaver. So I used Macromedia Flash to create super fancy menus with animated buttons, and embedded them into every website header I made.

  I was hardly the only one. For a while, Flash-based menu templates were a cottage industry on their own. Hot tip: Never, EVER make a website menu that you can’t change by just editing a text file. The maintenance cost alone was a massive headache, and search engines never did get the hang of crawling through Flash files.

  Thank God for :hover.

  

  Frames, the Original AJAX

  That’s right, kids. Before we used JavaScript to load all of our data in progressive web apps, the browser did all the work, and presumably still can. You know iframes? They used to have a big brother that was just called “Frames”, and that’s what we used for basic layouts before Tables came along.

  The problem was that even as they allowed the browser to update just part of a page instead of loading a whole new one (sort of), they also broke several fundamental browser features, including:

  • The Back and Forward buttons;
  • Browser history in general;
  • It was harder to copy-paste links to specific pages in a site;
  • Reloading a website certainly got a bit random, and would usually just take you back to the “home page”, as it were.

  Eventually the whole frameset feature was deprecated, and people mostly use iframes to load Embed content like YouTube videos.

  

  Image Buttons

  Not long ago, flat design took the world by storm, prompting people to say things like, “Wait… is that a button? Can I click it? WHY would you even use a custom cursor, there?” Before that, everyone was all about those 3D-looking buttons. Because they were fancy. Look, it started in the early ‘90s, and we just don’t question anything that happened between 1980 and 2005. They were just different times.

  Of course, CSS3 has all but killed the image-based button. When the text was baked into the image, the buttons were impossible to manage, and when it wasn’t, we had to use a thousand tricks to make them even semi-responsive. Anyone remember making a button that was one-part loooooong PNG, and one part the corners on the right? Or having a separate PNG for each corner of a button?

  God, we have it good, nowadays.

  

  Marquee

  Once upon a time, before everyone started saying that image sliders were bad, HTML actually had a built-in element for making things slide around the page. It was called the Marquee tag, and people hated it long before it actually died. It was implemented in Internet Explorer in response to the <blink> tag, and was only marginally less bad for your eyes.

  It was abandoned and deprecated for being too distracting to users.

  Demos available here: https://www.quackit.com/html/codes/html_marquee_code.cfm

  Fancy Separators/Page Dividers

  Back before we ever started doing proper layout, people needed a way to break up long pages of text to make them less awkward to read. The <hr> element felt a little too plain to some, and so the designers of the day resorted—as they so often did—to .GIFs. They were just horizontal bars at heart, but as long as they were images, the could be as fancy as you liked.

  This was another trend that fell to CSS/CSS3. Besides, when the divider is so much more visually exciting than the text, that can prove to be a bit of a conflict for the user.

  

  The Site Map

  The Site Map used to be the be-all and end-all of navigation. Before websites had their own search functions, you used the site map to find what you needed on any given site. It was simple: all of the content was right there, and you just needed to scroll.

  Nowadays, a lot of sites are just too big, or too small, to ever need a site map as a UI element. They are typically still auto-generated by many CMS, but they’re used to help search engines crawl the site faster. For medium-sized websites, I think this is a feature that could come back, and it wouldn’t hurt anybody.

  

  Table Layout

  Ah, table layout. It’s mocked in jokes by some, referenced only in hushed whispers by others. It was the trend that pushed web design forward, and the one that couldn’t die fast enough. It combined inline styles, a fair amount of confusion, and 1-pixel .GIF files that somehow held the layouts together.

  I never really got that part.

  It died because CSS had floats. And though that was a dirty hack and a half, it was actually better. We only used tables for so long because browsers (cough IE cough) were slow to catch up with CSS support, but they got there eventually.

  The weird thing is that CSS Grid is like having tables back again, but so much better.

  

  Yeah, I had to use the Wayback Machine. Googling for table layouts gets you a whole bunch of articles about why you shouldn’t use them.

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Learnability in UX Design

  Posted:Thu, 21 Mar 2019 10:45:52 +0000

  Building a learnable website is much tougher than it sounds.

  One thinks one’s design is clear and comprehensible; however, a design that might be obvious for you, might be perceived totally different by a user with a different set of experiences. Therefore, the goal is to design a clear user path that visitors can quickly pick up and understand.

  Why Learnability Matters

  Learnability has a strong correlation with usability. It is vital for users to quickly understand the layout and purpose of an application. Especially for web applications, providing an easy to learn interface is important. It is much more convenient to design an easy to understand mobile app compared with a web application; a mobile screen just doesn’t allow to provide a complex interface or let the user accomplish difficult tasks.

  The speed of adoption is not the only criteria why learnability matters. A website that looks familiar and provides an understandable interface will result in a lower bounce rate. This is especially useful for websites that try to boost their conversion rate. A complex design scares users and they will resort to other tools that provide a clear interface. In the end, the goal of every website is to convert an occasional user into a repeated user and engage the user for interaction.

  Learnability by Example

  We can find loads of examples on the internet where learnability has been applied in the right way. Let’s take a look at the key elements of learnability in design…

  Small Hints

  A few days ago, I moved to Berlin and I had to fill in a form for calculating the cost for my European health insurance. Unfortunately, the form is only available in German, however, due to the great combination of visuals and text, I could perfectly understand what information they required. This is a great example of how an icon can reflect a possible answer.

  Other small hints like a tooltip or default text can give a user an initial idea about how the interface can be used and what options are available. Let’s take the Twitter “Compose new Tweet” modal as an example. The design asks the user to tell what is happening. The initial response of a new user would be to input what just happened into the field. Besides that, when the user hovers one of the icons below the text field, a tooltip will appear telling the user what action the icon allows. In short, no space is wasted on adding text, the design speaks for itself.

  Familiarity by Consistency

  Google uses its own design system (Material Design) which is increasingly used across all of its products. Therefore, a call-to-action button will be the same across tools. Users who have used Gmail should recognize a lot of the elements when using Google Drive for the first time.

  This familiarity eases the adoption process of a new interface as users are able to transfer their mental model of one product onto another. Especially for an older generation who didn’t grow up with computers, this familiarity is important as they tend to avoid change and learning new interfaces.

  A mental model represents a person’s thought process for how something works. Mental models are based on incomplete facts, past experiences, and even intuitive perceptions. They help shape actions and behavior, influence what people pay attention to in complicated situations and define how people approach and solve new problems or interfaces.

  A snippet from Susan Carey’s 1986 journal article about ‘Cognitive science and science education’.

  You can find this familiarity also on blogs, but not that explicit as only certain elements are implicitly required. For example, the hamburger icon indicates a menu is hidden and can be unfolded by clicking the hamburger. Mostly, you’ll find a search icon on the right side of the navigation bar.

  Also, the layout across blogs is quite consistent. A blog always consists of a header with clear navigation followed by some featured articles and then the body of the article. We, as users, became familiar with this concept so that a blog with a different layout will look, and feel strange to us.

  Evidence of Actions

  In addition to making sure actions are comprehensible, it’s also important to make sure the user has evidence of their actions; this helps to reinforce what reaction each operation produces throughout the journey.

  To give you a simple example, when completing a form, you are shown a ‘thank you’ or a mail that indicates the completion. For a user, that is clear evidence they have used the interface correctly. Why does this matter? Providing feedback during the learning process helps a user to remember the interface better as he immediately learns what is possible or not. Proper feedback mechanisms can reduce the learning curve quickly and also help the user increase his efficiency while using the tool.

  To give an example, instead of solely giving feedback upon submission of a form, let’s provide feedback along the way on a field per field basis. This can be as simple as showing a list of requirements for a password field: whenever the password meets one of the listed requirements, the requirement gets ticked off; when all requirements are met, the input field turns green indicating the user can move on to the next input field.

  How to Measure Learnability?

  Actually, it is not that difficult to design a solid process for measuring learnability. First of all, a key indicator for learnability is the bounce rate. Therefore, using Google Analytics is crucial to gain insights.

  Besides Google Analytics, you can perform tests yourself with random test subjects: Provide an interface to your test subjects and give them five simple tasks to complete. For example, you have an online platform for creating and sending invoices, let your users perform the following tasks:

  • Create an invoice with one item;
  • Edit invoice;
  • Send invoice to receiver;
  • Track payment for the invoice;
  • Download completed invoice for personal bookkeeping.

  Now, let your test subjects perform these simple tasks five times in a row with each time a day of rest. It is important to measure the time needed for completing each task. A design that provides good learnability capabilities should see an increase in efficiency while repeating tasks. After five repetitions it is normal to see stagnation as the user has reached the limits of efficiency (unless they are superhuman).

  Many elements determine the learnability factor. Never take your design for granted, there is always room for optimization. Use these tips in practice and see how you can optimize the conversion rate of your design.

   

  Featured image via Unsplash

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• 7 Spring Cleaning Essentials for Web Designers

  Posted:Wed, 20 Mar 2019 10:45:17 +0000

  It’s the first day of Spring! As you look to clean up other parts of your life (e.g. your home, your refrigerator, your yard) make the cleanup of your web design business a priority as well.

  If you’re anything like me, you set aside time later in the week or month, promising yourself that you’ll finally take care of “business stuff”. And if you’re also like me, you often have to postpone those business maintenance tasks because new paid work opportunities come in. (Or you’re just exhausted and want a break from looking at your screen.)

  But there’s no time like the present, so if you can spare it, give yourself at least one day off from work to tackle this spring cleaning checklist. Not only will it give you time to zero in on the areas that often go neglected in your business, but you’ll come out of it feeling refreshed and ready to get back to work.

  1. Clean Your Workspace

  There are some people that thrive in organized chaos. However, if your workspace is piled high with stuff you don’t need, stuff that distracts you, or stuff that’s literally getting in your way as you try to work on your computer, you need to clean your physical workspace.

  When you’re done, think about doing something new for your workspace, something that makes you feel excited about sitting down to work. A new piece of artwork over your desk? A book about web design you’ve been meaning to read? A postcard from a client thanking you for a job well done? Then, put it somewhere that you’ll see it every day.

  This is what I’ve done with my own workspace:

  

  2. Declutter the Desktop

  It doesn’t matter how many folders you put on your desktop to keep things organized. Image files, templates, PDFs, workflow documentation — these loose documents and folders sitting on your desktop are a distraction. Worse, if you don’t move them off of it, you’re putting your business at risk for data loss (if you’re not otherwise backing it all up).

  To keep your desktop clutter-free, give your files and folders a new home — one that’s in a secure, cloud-based organizational system. Google Drive and Dropbox are free to start with and easy to use.

  

  3. Review Your Folders

  If you’re still storing files on your computer (and not just your desktop), now is the time to migrate them to your cloud storage. Then, once you have all files in a centralized location (which is also great for security and collaboration purposes), work on refining your folder structure:

  • Delete old client files and folders;
  • Delete old business documentation or update it so that it’s reflective of what you do now;
  • Check for files containing the same information. Remove the duplicates;
  • Review and rename folders for improved clarity and organization;
  • Review your bookmarks. Delete ones you don’t use. Update incorrect links. Organize links based on how frequently they’re used. And create a file structure to organize it all.

  Here’s an example of what I’ve done to my own bookmarks bar to improve my workflow:

  

  4. Check on the State of Your Website

  You’re in the business of designing websites for others, but when was the last time you took care of your own?

  Start with a site health check:

  • Is all of the software updated? If not, back your site up and run those updates now;
  • How about security, your security plugin should have a scanner, run it and make sure all is well;
  • Does the site load as quickly as it could? If you’re unsure, run it through PageSpeed Insights to see if Google suggests any fixes.

  

  Then, check on the content of your website:

  • Hold old is the design, if it’s over a year old, it at least needs some upgrades;
  • How old is the information about your business, if anything has changed, take care of it now;
  • Is any of the content or images no longer relevant, remove them if that’s the case;
  • How about your links, do all internal links still work, do external links point to recent and relevant sources.

  Finally, spend some time updating your portfolio. Even if it’s only been a few months, you may have new samples or testimonials to show off. Don’t let outdated website samples reflect poorly on what you can do.

  5. Freshen up Your Social Presence

  WebDesignerDepot recently published a post discussing all the ways social media might be hurting your design business. Run through the checklist to see if you can do any cleanup and salvage your social presence.

  6. Create Less Email Work

  One of the things you’ll learn if you read the 4-Hour Workweek is that email is a huge time waster. Sure, you need it to communicate with clients, but what percentage of emails in your inbox are actually from clients? And how many of those client emails are actually urgent enough to warrant your attention right now?

  What you need to do is create a new system for your email so that it stops distracting you from work. Here are some ways to do that:

  • Unsubscribe from all unnecessary subscriptions;
  • Review and update your email folder structure to keep everything well-organized;
  • Use filters so that client emails immediately drop into their corresponding folders;
  • Use a tool like Boomerang for Gmail. It turns off email notifications on your phone and computer, so you can stay focused during the workday.

  Another thing to look at is your email signature. Here’s an example of how mine currently looks (you can also see the Boomerang “Send Later” buttons in action):

  

  If you had to update any of your business or contact information on your site, the same applies here. Now is also a good opportunity to add links that help keep prospects and clients connected — like social media links, your website link, or a meeting scheduler.

  7. Review Software Subscriptions

  Finally, take a look at your software subscriptions. Is there anything you’ve signed up for in the past that you’re no longer using? How about tools that used to work really well, but that seem to do nothing but slow you down now?

  Automation is crucial for web designers. Just make sure you’re using tools that actually enhance your workflow.

  WebDesignerDepot has a fantastic roundup of 30 tools and services that help with this. You obviously won’t need or want to use all of them. However, if you’re trying to figure out if that tool you use now is worth it, this is a great reference to confirm your suspicions or find an alternative option.

  Spring Cleaning Bonus

  Once you’ve finished spring cleaning your business, it’s time to get back to thinking about revenue generation.

  So, why not create a spring cleaning service or promotional offer for clients? It shouldn’t even be that hard to do since you probably provided this service in the past, just under a different name: a website redesign.

  Just reach out to clients you haven’t spoken to in a year or so, and pitch them a “Spring Cleaning” website audit and cleanup for a flat fee. You can also do the same with brand new clients whose websites are certainly in need of a good scrub.

   

  Featured image via Unsplash

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• What’s New For Designers, March 2019

  Posted:Mon, 18 Mar 2019 10:45:16 +0000

  This month we are all about tools that make life easier. And that’s exactly what you’ll find in this roundup of new things for designers – from color tools to workflow enhancers to code snippets to fonts that will make you smile, everything here can make your design life easier.

  If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!

  QuickChart.io

  QuickChart.io is a free tool to help you build quick charts for digital use. This tool is designed to replace Google Image Charts API, which is slated for shutdown this month. Here’s how it works: Chart images are defined by their URLs. Each URL contains a JSON object that includes all the data and display options. These options follow the popular open-source graphing library Chart.js. Everything is customizable so you can use your color and font palettes to make the chart completely yours and you can embed charts in emails, SMS, reports and pretty much anything else you need.

  

  This Person Does Not Exist

  This Person Does Not Exist is a collection of randomly generated headshots for projects. The images are computer generated and are not of real people. Refresh for new faces and use in projects. The fun thing about this project is how real the images look – although you do occasionally come across some glitchy ones.

  

  IVID <Interactive Video Player>

  IVID is an interactive video player for modern browsers that comes with easy setup and use. It’s plug and play! The full VanillaJS web component player allows you to skip to the next video, uses inherited HTML5 video properties, has on-screen controls that are customizable, keyboard controls and a simple setup.

  

  Ludwig

  Ludwig is a toolbox that lets you train and test deep learning models without writing code. It uses a data type-based approach that works for users at all levels. Plus, it has more flexible tools for experienced users that want more control over model building and training. This tool is available under an open source license.

  

  CSS Color Wheel

  CSS Color Wheel is a new take on the classic model with an animated color wheel with different styles. The pen by Louis Hoebregts is interesting, fun and informational. (Make sure to change the curves for different versions.)

  

  Color Harmonies

  Color Harmonies is another take on the color wheel with easy to see changes that you can adjust on screen to make great combinations for projects. (The cool paint chip design is fun as well.) Change the number of colors, hue, saturation and light and watch colors change before your eyes.

  

  Capture-Website

  Capture-Website is a screenshot tool to help you grab website images. You have a few lines of code to work with and then you can grab full screenshots of pages with ease.

  Charts for Sketch

  Charts for Sketch is a massive collection of charts, graphs and diagrams for Sketch. Files include symbols, resizing constraints and text and layer styles for ease of use. Charts are grouped in categories such as area charts, bar chart and bubble charts and include three color schemes each (standard, black and wireframe).

  

  IconSVG

  IconSVG is a collection of SVG icons that you can customize – color, ends and joins, size and stroke width – to download and use in projects. The nice thing about these icons is that you can make small changes that really make each icon your own and then flip to different icons while keeping those customizations.

  

  Lunar Popup

  Lunar Popup is an HTML/CSS animated popup builder for your website (and it’s free). Every popup is responsive, customizable and works with layers for easy building and deployment. You can use animations or not and installation only takes three steps: add the libraries, copy the markup from the modal you need, initialize and go!

  

  Third Party Web

  Third Party Web is a good learning resource. It is a summary of which third party scripts are responsible for the most excessive JavaScript execution on the web. The project is designed with four goals: to quantify the impact of third-party scripts on the web, identify the ones that are the bulkiest, give developers information about these scripts and incentives responsible third party script behavior.

  

  Scandinavian Houses Vectors

  Scandinavian Houses Vectors is a fun collection of hand-drawn house illustrations. The collection includes 30 building options inspired by Scandinavian architecture. Each illustration includes a filled and outlined style option.

  

  Absurd Illustrations

  Absurd Illustrations is a collection of hand-drawn elements with a more aloof style for landing pages and other projects. They are designed to highlight creativity and imperfection. The collection continues to grow.

  

  Unlimited Email Tracker

  Unlimited Email Tracker lets you track opens and clicks in Gmail. You can see responses to emails in real time, get histories and do it all from a browser extension that’s free. This tool adds functionality of third-party email services to your inbox.

  

  Haiku Animator

  Haiku Animator, formerly Haiku for Mac, now works on all devices. The tool allows you to animate elements for any iOS, Android or web codebase. You can also use Figma, Sketch or Illustrator to sync design assets and create Lottie files without After Effects. This is a premium tool, but comes with a free trial.

  

  DeckRobot

  DeckRobot uses artificial intelligence to make your PowerPoint, Google Slides or Keynote slides look better. You can upload slides you have used in the past and the AI will learn your style and allow you to replicate it in a number of ways. Then you can export and edit or format your application of choice.

  

  AXDraft

  AXDraft is a startup’s best friend. This website includes plenty of starter legal documents to help you meet business goals. From privacy policies to NDAs to employee onboarding documents, you can find the tools you need to get started here. And the documents are free.

  

  ActionDesk

  ActionDesk is a productivity tool that turns spreadsheets into powerful automations. Import data and do everything from provide customer support to operations help to analyzing data. It integrates with plenty of tools, such as Google Sheets, CRMs and Typeform.

  

  Tutorial: Text Trail Effect

  The Text Trail Effect tutorial in the Codrops playground helps you learn how to make a nifty text effect for slideshows. The tutorial includes five demos for variations of the effect.

  

  Interactive Typography Cheatsheet

  Interactive Typography Cheatsheet can help you up your font-knowledge game. Click on elements in the cheatsheet to learn the names of different parts of letterforms. This game-style option is a great way to make sure you know the language of type so you can better communicate with creative teams.

  

  Iknu Font

  Iknu calls itself a “spiritual theme font.” The character set includes uppercase and numbers and is designed for projects with a specific intent. It’s interesting and different, which could make it a good choice from some branding or creative retail designs.

  

  Karton

  Karton is a free, handwriting style typeface that’s appropriate for display and simple uses. It includes an uppercase character set with some numerals and alternates.

  

  OHNO

  OHNO is a fun block, slab-style typeface for display purposes. It includes only uppercase letters and has a somewhat futuristic look and feel.

  

  Throne

  Throne is a fun font for all the Game of Throne fans out there. The SVG and regular font collection has a hand painted style with a full set of uppercase characters, numbers and symbols. It is most appropriate for display.

  

  Vistol

  Vistol is a sans serif typeface family in 18 styles with an upright stance and some italics. This family includes some fun lines and exceptional ligatures. The thin styles are also especially nice because they maintain readability.

  

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Popular Design News of the Week: March 11, 2019 – March 17, 2019

  Posted:Sun, 17 Mar 2019 10:45:39 +0000

  Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

  Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

  8 Web Development Trends to Take Notice of in 2019

  

   

  Maze 2.0

  

   

  Going Beyond the Golden Ratio

  

   

  IBM is Preparing for a UK Exit from the EU

  

   

  Planning for Responsive Images

  

   

  A JavaScript-Free Frontend

  

   

  Create a Beautiful and Responsive HTML Email Template

  

   

  Consult this Handy Chart to See if You are an ***hole Designer

  

   

  Web Design Museum

  

   

  Using Shaders to Create Realistic Special Effects in Web Design

  

   

  Bringing Black and White Photos to Life Using Colourise.sg

  

   

  Haiku Animator

  

   

  5 UX Tips I Learned Working in Gamedev

  

   

  10 Analytics Tools for Optimizing UX

  

   

  Design Checklist for Perfect Charts

  

   

  On the Dismissal of Design tools

  

   

  Hot Take: Dark Mode

  

   

  Design in Tech Report 2019

  

   

  Women Made it – Tools, Books and Blogs Made by Women

  

   

  The Planned Obsolescence of Old Coders

  

   

  8 Creative Ways to Share your User Research

  

   

  Typography on the Web

  

   

  How the Bauhaus Kept Things Weird

  

   

  Mozilla Firefox Send Lets You Share Encrypted Files Privately and for Free

  

   

  Design Better Products by Building Trust

  

   

  Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Thoughts on Designing for the Existence of Children

  Posted:Fri, 15 Mar 2019 10:45:41 +0000

  Ah, kids…The light of our lives. They bring joy, fulfillment, laughter, and love. Then they start crying, and I hand them right back to their parents.

  Don’t get me wrong. I like children in the abstract. I believe they are the future, and so they should be protected and nurtured…elsewhere. I’ve even been given responsibility over large numbers of them for hours at a time, back in my old missionary days. It still happens sometimes, because I have sixteen nieces and nephews.

  Does this make me qualified to talk about how to account for their existence when we build our websites? Maybe. Maybe not. But unless one of you is going to volunteer real fast, I’m going to get started. It takes a village, and all that. May Sir Tim Berners-Lee help us all.

  Keeping it Family Friendly(?)

  The first thing to remember is that there are children on the Internet. I know. There’s nothing we can do about it. Parents sometimes need to leave their children alone in the next room because, well, they have to do things. It happens. One way or another, those children will get their sticky hands on Internet-capable devices. Then, they’ll get around the parental controls because that is literally their job as children.

  The question becomes this: how family/kid-friendly should your site be? If you’re running something corporate and professional, it shouldn’t be a problem. Any corporate-type site has the advantages of being both inoffensive by design, and generally boring to children.

  But what about something more…cultural? News sites tend to be inherently disturbing because the real world is disturbing. Sites full of commentary on music, TV, and culture in general are becoming steadily more adult as we open up to explore the full range of human experiences. This is, in my own opinion, a good thing. Not every site needs to be adult in its tone, but we need those sites in our collective cultural exploration.

  Censorship “for the sake of the children” is a generally terrible idea. A lot of horrible things in history have been done “for the sake of the children”, and so many children have been poorer for it. They do need to eventually find out that the world is a big, terrifying and wonderful place all at once, and preferably before they turn twenty-five.

  Even so, we are at least somewhat responsible for the content we host, and so if we aren’t going to make the Internet one big, soft, kiddie-friendly space, we should be taking what measures we can.

  Age Verification is (Mostly) Useless

  So the full-on “Are you really, really 18? Pinky swear?” sort of age verification systems are only legally required on certain sites that I’m sure none of us ever go to. Social networking style sites usually have a check-box somewhere in the sign-up form that states you’re at least thirteen years old, but if you’re still giggling about those secret sites we never go to, I’m pretty sure you’re still twelve; no Facebook for you.

  Now the thing about age verification is that, on the Internet, it’s almost almost entirely pro forma. Sure, it can help you cover your rear end legally, but it doesn’t actually keep the kids out. Some of those aforementioned giggle-inducing sites experimented with requiring a credit card as age verification.

  [sarcasm] What? They promised they’d never, ever charge you. No one foresaw any problems with this approach, and that’s why they still use it. [/sarcasm]

  Ultimately, having a minimum-age policy is most useful for two things only: the aforementioned legal butt-coverage, and as a tool for moderation.

  Active Moderation is Key

  While stopping young and impressionable minds from merely browsing a website is next to impossible, if you have a community, you should be moderating it in any case. The youngest members of any community should be priority number one for all moderators, as they are the most vulnerable.

  Those who are just too young need to be removed from the community immediately. If you don’t, and their parents get mad, you could be on the hook legally, and/or in the court of public opinion. Don’t mess around with this.

  But how do you know? A lot of kids who are too young to be hanging around will actually out themselves, in time. The ones who are actually smarter than that, well, it’s a lot harder. Sometimes you can just tell, from the way they write. But verifying that without doing some very invasive things (which you probably shouldn’t do) is just plain difficult. The important thing is simply to take immediate action whenever you have actual information to go on.

  Maybe Don’t Make Payments too Easy

  There are many horror stories of kids buying way too much stuff through apps and the Internet with their parents’ money or credit. While it is important not to make paying for stuff so difficult that your users simply leave, you don’t want to be the company that tricks little kids into making purchases, whether on purpose or by accident.

  Look, if parents set up PayPal for one-click payments, that’s on them. You can’t control everything. It should go without saying, however, they you need a way to do refunds and allow parents to undo payments their kids may have made, ideally even a while after the fact. Apple’s doing it. Amazon was forced to do it. Be proactive about it, if you’re selling things.

  Parental Controls

  Just because kids will eventually find their way around parental controls doesn’t mean they’re not a good start. If you’re running a website with a minimum age rating of any kind, it may be worth reaching out to parental control software companies to (and I can’t believe I’m saying this) intentionally have your site put on whatever lists they might have.

  It would be nice if there was a proper central database you could add yourself to, and be done with it. The closest I’ve been able to find so far is zvelo.

  None of these are perfect solutions, and most are far from it…but it’s a place to start. The responsibility may ultimately lie with the parents of the world, but if we can try to make their jobs a bit easier, that’s a good thing for all of us.

   

  Featured image via DepositPhotos.

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Case Study: Killer Marketing Can’t Overcome Poor UX

  Posted:Thu, 14 Mar 2019 10:45:50 +0000

  In 2014, I was a busy, young software engineer working full-time for a tech company in London. On a quest to be hyper efficient, I was always was on the hunt for user-friendly tools that would streamline my workflows and cut back on paper usage, which proved to be a challenge.

  I fell right into a market gap when I needed to edit and modify PDFs but none of the tools on the market offered a user-friendly interface with the functionality I needed or wanted.

  While plenty of tools were sitting pretty on the throne of page one search results (and sported snazzy marketing campaigns), I still needed a product that prioritized user experience over marketing; a central platform to perform PDF tasks.

  All the available options fell flat.

  Then I realized that, if I built my own application, I could help everyone from professionals to creatives get their PDF work done online, for free.

  So I did.

  With a fluency in back-end development, I built the online PDF editor myself. Since I couldn’t afford to quit my day job, I spent nights and weekends programming PDF Pro. Building a product was exciting, yes, but unsurprisingly, it was hard work. Armed with a long list of features and functionalities I wanted the product to have, it was easy for me to focus solely on the complex backend of the software and neglect the front end.

  As an engineer, my goal was to build the best online PDF editor available. I thought this meant offering a laundry list of features in order to meet a wide range of use cases. The original design of the product was geared towards communicating all of the tool’s functionalities. For example, after uploading a file, the user was presented with every available option for editing their file. I thought that my product’s breadth of features would impress users and drive sales.

  while my company was successful at marketing…we suffered from poor conversion rates

  And while my company was successful at marketing the product (as evidenced by the thousands of users who used, and still use, the application every day), we suffered from poor conversion rates.

  I felt lost. Wasn’t I offering a more robust application than any of my competitors? What was happening between the time users entered my site and when they bounced? I needed answers.

  With the help of an agency, I conducted significant user research to better understand high-level user needs. I also implemented specialized tools, such as Hotjar, that elicited customer feedback and tracked behavior flows so I could understand minute patterns and details.

  It became clear: user needs were not being met; a painful, yet valuable, discovery. Even great marketing couldn’t outrun poor UX.

  At the genesis of PDF Pro, I focused only on broad goals like ‘increase user acquisition.’ By comparing high-level needs with the nitty gritty feedback, I quickly learned that customers were looking for very specific solutions.

  Using these valuable data and insights, I adjusted my approach towards implementing great UX in three critical areas, which resulted in driving significant gains (sometimes north of 100%) for the product’s conversion rate.

  Here’s what I needed to understand:

  1. Understand the User’s Research Journey & Query Intent

  Simply put, query intent refers to the understanding of what problem the user is seeking to solve. And in turn, great UX and optimization should be able to offer solutions that meet that intent.

  While customers will frequently search for a ‘PDF editor’, this term means different things to different users. Some users are only focused on converting images to PDFs while others are more interested in electronic signature solutions. To help match query intent, I created a series of mini-products focused on specific needs (e.g. ‘convert PNG to PDF’ or ‘sign a PDF’).

  Beyond designing the product around these specific workflows, I also published ‘how-to’ content helping even the most novice users navigate the service and find what they needed, when they needed it.

  2. Provide Clear Instructions & Feedback

  It’s no secret that humans seek affirmation and direction. People are more likely to experience a boost in confidence when they have clear directions and guidance on what they’re “supposed” to do.

  Feeling like you have a guide when you’ve moved to a new city is always comforting; the same goes for the virtual user experience. Clear instructions can offer this level of confidence to users (and help them avoid situations where they feel incompetent).

  Provide users with clear instructions and how-to’s through the use of copy, micro-copy, and illustrations. Inversely, there’s nothing worse than taking an action and the action results in…crickets. Never leave your user wondering what went wrong or what to do next. Be sure to include clear feedback when a user “takes a wrong turn” or enters an invalid information.

  3. Respect the User’s Time

  Few things are as relatable (or more annoying) than waiting for the spinning “rainbow wheel of death” to leave your Macbook’s screen. Or, obsessively refreshing your browser when a page is slow to load. How long do you give your technology to load before you give up hope and jump ship? 2 seconds? 3 seconds?

  Site speed matters. In fact, it matters so much that if a website takes longer than three seconds to load, nearly half of all visitors leave. Remedy high bounce rates and low conversions by respecting your user’s time; make sure your site’s images and CSS are properly optimized and keep your scripts below the fold.

  As great developers and designers know, the importance of UX and functionality eclipse marketing. Yes, great marketing attracts users but if they can’t figure out how to use your software quickly and easily, they will give up and move on to one of your competitors. So, before you jump feet first into your marketing campaign, take a long, hard look at your user experience and how it satisfies the customers’ needs or helps them achieve their goals. Remember, it’s not about you, it’s about them.

   

  Featured image via Unsplash

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Enhancing Website Design with UX Writing

  Posted:Wed, 13 Mar 2019 10:45:09 +0000

  As a UX writer, it’s my job to know how to create web copy that convinces readers to take action. That said, it doesn’t matter how engaging of a story I craft for my clients’ web pages or blog posts. If what I’ve written looks terrible on the page, no one will bother to read it.

  Here’s the problem though: UX writers are not designers. No matter how many short sentences we write to succinctly communicate a point or jargon-free copy we craft to appeal to a broader audience, poor design choices will negate all of that.

  Web designers are the ones that best know how to design for engagement and conversion. As such, you need to be comfortable working with copy as well as you do the visual piece.

  1. Don’t Mess with Color

  There are a lot of really cool ways to use color and create a memorable look for a website. But typography? That is not the place to mess around with color.

  Let me show you something:

  This is the website for the Red Lantern restaurant in Boston:

  

  This website makes great use of wide open spaces to draw attention to the copy on the page. And, while the logo is in a decorative red font, the copy that really matters is black-on-white. Overall, this is a beautifully structured web page and also one that’s easy to read.

  Now, let’s look at the Intercontinental Hotel:

  

  There are so many bad choices made with the font on this page.

  For starters, it’s far too thin of a font at that size. In addition, the black font on top of the ecru background doesn’t work well either (again, that’s probably due to the skimpiness of the font face). And the hyperlink color against the similarly-colored background is an even worse choice.

  I get that the designer wanted to incorporate the brand color into the page, but the background is overkill. A white background, black font, and branded hyperlink color would suffice.

  2. Maintain Symmetry

  In many cases, there isn’t really a need for symmetry in copywriting. Paragraphs and pages will run as long as they need to be, within reason. However, there is a particular part of a website where symmetry matters a great deal and it’s, unfortunately, something not a lot of writers are mindful of. Worse, there are designers who are too scared to do anything about it.

  Here’s what I mean:

  This is a block of side-by-side featurettes on the WordStream website:

  

  You’re familiar with this, right? You have a number of features, services, or benefits you want to include on a web page. However, you’d rather not list them out as vertically-aligned plain text. That’s boring and takes up too much space. So, you think, I’ll turn this into a multi-column element with graphics woven in.

  In the case of WordStream, you would’ve succeed. Everything is balanced:

  • Illustrations
  • Header text
  • Subheaders
  • Explainer text
  • CTAs

  Now, have a look at Pixability:

  

  It follows the same basic concept. However, the first point runs on way too long. This not only creates a distraction, but it also leads to a lot of unsightly white space.

  3. Break up Paragraphs

  In general, you never want a paragraph to run longer than five lines on a web page. Anything longer, and it’s safe to say your readers will lose focus. The same happens when you place too many paragraphs one after another.

  Your readers need a break.

  While the writers should be the ones to determine where a pause should fall within the text, there are other things you can do to break up the monotony of paragraph after paragraph.

  Take, for example, what Consigli Construction does to tell its business’s story:

  

  There are never more than two paragraphs placed together, before they’re broken up by a creative element. In this case, the history of the company is divided into logical chunks and key milestones get their own dedicated boxes. This looks great.

  Contrast that with the Bright Horizons website.

  

  Usually, I’m all for bulletpoints as they help to break up thick chunks of text. In this case, though, they’re not very well done. For starters, each bulletpoint is too long. Also, the bold font is overwhelming.

  To fix this, the designer could go a route similar to Consigli Construction and give each bullet its own dedicated block. Or the designer and writer could work together to strip out the excess. For example, the list could realistically be shortened to:

  • An assigned primary caregiver;
  • Personalized care plans;
  • Sensory-rich spaces and soft places;
  • Safety, security, and cleanliness practices.

  4. Be Space-Conscious with Header Tags

  Header tags are an essential part of every page on a website, from the home page to blog posts.

  Structurally, they help create a hierarchy of topics, enhancing readers’ ability to scan a page and get an idea of what it’s about without having to read it. In addition, Google bots use header tags to pick up on the key points of a page and rank it according to how well it matches users’ search queries.

  That said, you should be careful about how much space your headers take up. As a general rule of thumb, they should be no more than one line.

  Take this example from Audley Travel:

  

  There are two header tags here and both are kept to a reasonable length while still accurately getting the point across.

  Then, you have this example from Bevi’s blog:

  

  This is a clear example of where header tags become too much.

  But it’s not just the size of the header text that’s the problem. It’s the length of the statement itself. Rather than give away what the ensuing text is going to tell the reader, this could simply be left as: “Manage projects and deliverables with a task management tool” or, even better, “Use a task management tool”.

  What Web Designers Can Do to Improve Website Copy

  While I’d love to say that it’s 100% the UX writer’s responsibility to write copy that converts, there are clear examples of how design can get in the way of that happening. All the more reason why a website should be a collaboration among all parties involved in it.

  If you’re ever unsure of how your design choices will affect the quality of the copy, seek out the UX writer’s opinion. Or your project manager’s. Their fresh eyes might be able to catch something that you cannot.

   

  Featured image via Unsplash

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• 20 Best New Portfolios, March 2019

  Posted:Mon, 11 Mar 2019 10:45:27 +0000

  It’s March, dear Readers, and here in Monterrey, the weather can’t seem to make up its darned mind. Is it Spring? Early Summer? Are we getting a plague of groundhogs? None can tell.

  On the whole, it would be best to stay inside, grab a nice beverage that could be hot or cold depending on your weather, and browse through some portfolios. We’ve got a rather varied mix, and a continuation of the amorphous blob trend, which I’m still not tired of. Enjoy!

  Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

  John Henry Müller

  John Henry Müller’s portfolio does several things very right. For one, the way responsive typography is handled makes me feel all warm and fuzzy inside. Secondly, I love the way testimonials are sprinkled throughout the home page, between other things.

  And hey, anyone who can get a good review from both Zeldman and their own mother deserves to be on this list.

  Platform: Static Site

  

  Victor Vergara

  If you’re going to go all out on animation and flashy stuff, do it like Victor Vergara. The site loads fast, the 3D objects are kept simple, and they the animations run smoothly. The whole aesthetic of the site plays heavily into the retro-3D feel, and it looks fantastic.

  As presentational sites go, it’s good. Just go ahead and assume that I’ve done some griping about fallbacks, but otherwise it’s beautiful.

  Platform: Static Site (I think)

  

  Peak

  Peak has achieved something simple yet wonderful with diagonal lines, silhouettes, and a cool (as in mostly blue) color scheme that I absolutely adore. Plus, they’re actually pulling off the logo-in-the-sidebar layout that it took me ages to get right.

  Platform: WordPress

  

  Designerpart

  Designerpart reminds me of the old days where everything had to look like a shiny vector, but in a good way. This time, they use shiny vector blobs in the background as a motif, and while I think they could have made some of the text on top a bit darker, the whole effect is nostalgic and modern at the same time.

  Is it weird that I’ve come to love “blobs” as a trend?

  Platform: WordPress

  

  Florian Monfrini

  Many sites go for the collage look, but Florian Monfrini’s portfolio is one of the few that actually makes use of the full screen at large resolutions. I mean, why not? If you’re going to cover the screen with your work, really cover it.

  After that, it’s pretty much standard post-modernist faire, but it does look good, and it does stand out.

  Platform: Static Site

  

  Bethany Heck

  Bethany Heck’s portfolio has what might be one of my favorite URLs of all time: heckhouse.com. Also, the entire portfolio consists of project titles, sometimes joined by the logos associated with the project. Some lead to external links, and others to lightly art-directed sub pages with impeccable typography.

  It’s so simple, yet it slams you in the eyeballs with lots of high-quality, high profile work all at once. I love it.

  Platform: WordPress

  

  Nicky Tesla

  If you keep up with various design blogs and news sites, you might have seen Nicky Tesla’s portfolio, and for good reason: it’s a spreadsheet. No, it doesn’t “look like” a spreadsheet, we’ve had those before. It’s literally a publicly available spreadsheet on Google sheets, with a domain attached to it.

  I wouldn’t call it the most usable site, what with a few text contrast issues, but on the whole… it works. And it’s certainly intriguing. There’s also a mobile-specific version that is a lot easier to read.

  Platform: Google Sheets

  

  Pixelfish

  Pixelfish is a fairly standard business site, but it’s good-looking for all that. Just a simple, good website. Can never have too many of those around.

  Platform: Concrete5

  

  Alex Faure

  Alex Faure’s portfolio brings us more blobs, but with pictures in them! Everything else about the site is almost “standard elegant minimalist portfolio”, but the blobs make it stand out amongst the other sites in the genre. It’s gorgeous.

  Platform: Static Site (or a CMS based on Node)

  

  Ada Sokol

  Ada Sokol’s portfolio uses that “preview on hover” technique popular with many artsy portfolios, but adds a sort of pseudo-3D smudge effect to the mix. The rest of the layout is familiarly asymmetrical with overlapping elements, but it’s always nice to see a small new twist added to an old formula… Even if the formula’s not actually that old yet.

  Platform: WordPress

  

  Shonen

  Shonen is, as far as I can tell, some sort of art portfolio. It goes hard on the minimalism, monospaced type, and a typeface called MAD sans that I have just now fallen in love with.

  Platform: Squarespace

  

  ONNO

  ONNO brings us a classically modernist (Is that a thing, now?) portfolio that focuses on white space, gray backgrounds, and the occasional light drop shadow. It’s simple, reliable stuff, and always looks elegant. And it works without JavaScript!

  Platform: Static Site

  

  Kairos Studio

  Kairos Studio is our one video-focused portfolio on this month’s list. They keep it simple: scroll down to watch videos (silently!) play. The navigation in particular interests me because it combines primary navigation with contextual navigation based on where in the site you are. Sure, the text is a little small, but I’d like to explore the basic concept further.

  Platform: Static Site

  

  PBDA

  Have you ever seen a semi-post-minimalist collage-style industrial-artsy site in Russian? Well now you can, because that’s the only way I can describe PBDA. With all of that, plus the bold yellow, it’s a site that takes familiar elements and turns them into something of a spectacle. I want more.

  Platform: Custom CMS (probably)

  

  Vincit

  Vincit is a pretty large design studio with a lot of high-profile work, so their style runs toward the business-friendly minimalism in such a way that their whole site looks a bit like a tech company advertisement.

  It’s also a highly varied design, that evolves rather dramatically as you scroll down the main pages of the site. I particularly like the animations as well, because they run fast. You can tell they’re there, but they don’t ever slow the experience down.

  Platform: Craft CMS

  

  3 Sided Cube

  3 Sided Cube is an app development company, so it makes sense that they lean hard into the “programmer” aesthetic with monospaced type. They mixed all of that up with bright colors and distinctly presentation-style layout and navigation to create a site that’s bold and brash while still being easy enough to read.

  Platform: WordPress

  

  LOOP

  LOOP is on the list because it’s pretty. The site’s look is pretty standard business-minimalism, but don’t let that stop you from enjoying a well-crafted portfolio site.

  Platform: Craft CMS

  

  5S

  5S is a content studio that starts off with a bold promise, and goes on with a boldly modernist aesthetic that combines some pastels, some light illustration, and a fair amount of the now-requisite animation. The aesthetic feels a little odd sometimes, but hey, that’ll just make it stick in your head better.

  Platform: WordPress

  

  ejeeban

  ejeeban is a Malaysian design studio that embraces the now-familiar put-a-grid-in-the-background trend, combined with pretty good type, and the occasional use of (gasp) texture. I know! None of the individual elements of the design are particularly new, but the overall effect is nonetheless striking and memorable.

  Platform: Custom CMS (Probably)

  

  Voga

  Voga gives us more blobs! What is that now, three? Anyway, we’ve got blobs, minimalism, beautiful typography, and a very strong focus on using photos to show off their work in the real world.

  Platform: WordPress

  

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

• Popular Design News of the Week: March 4, 2019 – March 10, 2019

  Posted:Sun, 10 Mar 2019 10:45:17 +0000

  Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

  The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

  Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

  WDRfree – Free Web Design Resources Library

  

   

  Site Design: Superrb

  

   

  Stop Using Responsive Design

  

   

  The Google Cemetery – A List of Dead Google Products and Why They Died

  

   

  CSS Selectors Cheatsheet

  

   

  Website Speed Guide

  

   

  You are Killing Me with your Tiny Fonts

  

   

  Site Design: Mixpanel

  

   

  Introducing Latitude: Flexport’s Design System

  

   

  Effective Use of Gradients in Design

  

   

  20 CSS Color Palettes

  

   

  This is the Best Ad Blocker We’ve Seen (and Heard)

  

   

  The Top Ten Fonts of 2018 at YouWorkForThem

  

   

  Accessible Brand Colors

  

   

  The Bottleneck of the Web

  

   

  Best Practices: Component, Styles, and Shared Libraries

  

   

  The Dark Side of the Grid

  

   

  Introducing Storybook 5.0

  

   

  Stay User-oriented up to the 404 Page

  

   

  28 Design Tools in 28 Days

  

   

  EditorConfig: Consistent Coding Styles Across Various Editors and IDEs

  

   

  Best Free Photo Editing Software 2019

  

   

  5 Awesome Tips to Grow your Business with Instagram

  

   

  One Minute of Silence for Digital Design

  

   

  There are 7 Types of Logo Designs

  

   

  Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

  Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

  Source

FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.