Subscribe Now!
...with web-based news readers. Click your choice below:
...with other readers:
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
-
A Simple Introduction to Intrinsic Web Design
Posted:Tue, 22 May 2018 10:45:18 +0000
Every industry has its jargon, and almost its own language, in some cases. God knows web design has a lot of jargon, even if half of our made up phrases are fancy and nonsensical job titles. But for all of the silliness that comes with having to invent our own words and acronyms for things, jargon plays an important role: it allows us to communicate more efficiently with other designers and devs.Sometimes, the person who (more or less) comes up with a concept gets to name it, as it was with Responsive Web Design. [Here I shake my fist at Ethan Marcotte out of long-standing habit. RWD is a good thing, but it gave me headaches for a while.] And sometimes someone comes along and makes up a word or phrase for something we’ve already been doing for a while, which is what (I’m reasonably sure) happened with Web 2.0.
Intrinsic Web Design (you can thank Jen Simmons for this bit of jargon) belongs to the latter category. We’ve already started doing it, but now we have a name for it. We thought it would be a good idea to write up a quick introduction to the concept, because it’s going to become a major part of the web design conversation going forward.
What is Intrinsic Web Design?
It starts with the Flexbox and CSS Grid modules. Ever since we decided that using tables for layout was impractical, we’ve been using the float property, along with a healthy dose of absolute and fixed positioning, to put things wherever we wanted on a page. This has worked well for us, but it was, essentially, a hack.
Nearly all of the web is built on hacky front-end code
Actually, it was a series of hacks. Then we started putting together CSS frameworks full of hacks. Then some very wrong people started using JavaScript to write their CSS full of hacks. Nearly all of the web is built on hacky front-end code, and it has gotten messy.
This is not to criticize the work of those who came before. Using hacky layout methods was the only way to get anything done. We didn’t have any other options. Now we do: Flexbox and CSS Grid are layout methods built into CSS itself. They are, you might say, intrinsic to the medium.
Get it? You see what I… yeah. Anyway. The aforementioned CSS modules are just the start of it. CSS is progressing to the point that we have the tools to properly lay out our designs exactly how we want them to be laid out, with no hacks, and certainly no help from JavaScript. Being able to create what we want with a minimal reliance on hacks, tricks, and outside libraries is a part of what Intrinsic Web Design is about.
Or to hear how the creator of the term herself puts it:
I’m just talking about layout, that layout itself, and the graphic design itself, had changed significantly enough that I wanted a new word so we could say, “Oh, yeah, that new thing,” and it includes CSS Grid, but it’s not just about CSS Grid. It’s also about using Flexbox, and kind of rediscovering what Flexbox is actually intended to be for.
Plus, it’s about using some floats sometimes, using things like CSS shapes or object-fit, using a flow content, using multi-column. Some of these things are old, and they’ve been around for a long time, but it’s about thinking about the whole system of layout, and how all these pieces fit together in a brand new way.
To put it another way, I think Intrinsic Web Design is about the shift from being limited by CSS’ capabilities to being empowered by them. It opens up a whole lot of exciting new possibilities.
Who Came up With This?
Jen Simmons. She’s a web designer and front-end developer who has worked with/for: CERN: the W3C, Google, and Drupal, and other small businesses. She currently spends her time as a Designer Advocate at Mozilla, speaking at conferences, as well as hosting and producing The Web Ahead, a fantastic podcast about the future of the Internet.
She also hosts the Layout Land channel on YouTube. If you want to learn about Flexbox, CSS Grid, and the other building blocks of Intrinsic Web Design, these videos are a wonderful and informative place to start. You should also check out her interview that I quoted above, where she and Jeffrey Zeldman discuss IWD and a whole host of other topics at length.
Entering a New Era
Things are gonna get wild as designers latch on to these ideas, and start to figure out what they can build with Flexbox and CSS Grid in conjunction with all of the layout methods we already have. I have no doubt that we’re going to see an explosion of new, or at least refined layout ideas. Then the JavaScript nuts are going to get involved, and that’s going to get truly interesting.
Non-coders especially should pay attention to what’s going on with Intrinsic Web Design, precisely because it will change, and is already changing what is possible on the web. Whether you’re strictly an in-the-image-editor UI designer or an art director, you should absolutely be researching what these technologies can do. Knowing what your front-end colleagues can do now will make your job easier.
Coders, they’re about to start asking for some crazy stuff. You should research it, too, if you haven’t already.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
What’s New for Designers, May 2018
Posted:Mon, 21 May 2018 10:45:47 +0000
Do you ever get bogged down with some of your tools? They work, but you know there’s got to be a better way to do something. Hopefully, this month’s collection has the solution. It’s packed with design tools that are lightweight and functional.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!
Duotone Effect Generator
Create a quick, and trendy, duotone effect with the Duotone Effect Generator. Upload a photo and pick a color combo or use your own and get a cool effect in seconds. Then you can download the image for use in projects.
Curtains.js
Curtains.js is a fun little WebGL tool that animates images to have a moving curtain effect. From the developer: “It is a small vanilla WebGL javascript library that converts HTML elements containing images into 3D WebGL textured planes, allowing you to animate them via shaders. You can define each plane size and position via CSS, which makes it super easy to add WebGL responsive planes all over your pages.”
Solis
Solis is a live design output app that allows you to see the result of code as you input it. You get real-time live previews of HTML, CSS, Sass and LESS with multi-viewport views. This tool is only available for Mac right now.
Cards Webflow UI Kit
If you are a Webflow use, the Cards Webflow UI Kit is a great free tool. It’s one of the first clonable UI kits that’s been made completely with Webflow (so you know it’ll work). Elements include a kit with buttons, tags, alerts and social icons in a card-style format.
BBC Sound Effects
You probably use Creative Commons images all the time for projects, but what about sound? BBC Sound Effects is a library of 16,000 sound effects from the BBC library that come with the BBC copyright but are available to use for personal, education or research purposes. (If nothing else, it’s just fun to listen to all the sound bits.)
ScreenFocus
ScreenFocus is a productivity tool that can help you make the most of a dual-monitor setup. It includes the ability to change settings between screens, such as dimming an unused monitor so it is not distracting.
React Circle
React Circle renders a dashboard-style progress animation in the shape of a circle. It is made using customizable SVG.
Unavatar
Want to use the same avatar across multiple social media profiles? This micro service lets you do that with just a few lines of code and a username, email address or domain.
Login Critter
Make your login form standout with a custom critter avatar. Login Critter is an animated login screen with multiple states for the “critter” – neutral, active, ecstatic and shy (shown below). Grab it on GitHub.
Lobe
Lobe is a visual artificial intelligence tool that helps you build a deep learning model for apps. The tool is in beta and had a wide application, from helping connect apps to people to showcasing data and information.
Blobby Background
The popularity of unusual shapes makes Blobby Background a fun fork on CodePen. The demo uses SVG masks and filters to function.
HueSnap
HueSnap is one more color palette generation tool. Browse hundreds of color combinations and save your favorites for later use. What’s impressive about this gallery is the number of palettes that you can see at once.
Findshot
Findshot is a new, free stock photo repository. Sign up via email and new photos that you can use for free in projects will come right to your inbox. You can also search the free collection.
Pico-js
Pico.js is a face detection library that uses just 200 lines of JaveScript. The neat thing about this element is that it is super small and lighter than many other options out there. (It’s just 2kb when minified.)
Modular
Modular is a free Android UI kit with adaptable elements in the Material Design style. It includes 167 items with 78 elements in 13 categories.
Tutorial: Responsive Knockout Text with Video
This tutorial from Giulio Mainardi for CSS-Tricks shows you how to build a super trendy knockout text element with video. The great thing about the tutorial is it does everything responsively – that’s the real trick here – so that your element will look great anywhere.
Semantic Experiences
Voice search and internet “scrolling” is getting to be a bigger deal by the day. Interfaces have to understand expressions and natural language. That’s why the Google team is working on Semantic Expressions, an experiment to help developers better understand natural language.
Design Systems Repo
This website is a giant collection of examples, articles and tools about design systems. The database is pretty large and is a great place to find inspiration or think about different ways of doing things.
Science of Color Codes
Color codes are more than just a series of numbers that spit out a specific hue. There’s some science that supports how each of these systems – RGB, Hex, HSL, CMYK and Pantone – actually works. Patrick Woodhead takes a deep dive into that science.
Fontisto
Fontisto is a giant collection of SVG icons that you can customize with CSS. It’s a responsive tool and is easy to use without JavaScript. Plus, Fontisto is free for personal and commercial use. It includes simple icons, social media icons and even brand elements.
Aloja
Aloja is a free handwriting-style font that’s made for display uses. The bigger you use it, the better. The character set include capital letters only, numerals and basic punctuation.
Dank Mono
Dank Mono is a coding font. It is made to look great and work with retina displays. It includes a full character set, ligatures and italics. This is a premium font (paid).
MD Tall
MD Tall is a display typeface that has a high x-height and works primarily for small blocks of text. It has an uppercase character set with a few alternate characters, numerals and punctuation.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Popular Design News of the Week: May 14, 2018 – May 20, 2018
Posted:Sun, 20 May 2018 10:45:32 +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.
Google Just Remade its Brand Again
Site Design: MetaLab
LayoutIt CSS Grid Generator
Typography Trends in Web Design
JavaScript is Good, Actually
How to Double your Page Views Without Publishing Anything New
Introducing Airbnb Cereal
Spirit is Out Now for Mac
On Design Changing the World
Crunch 2.0 – Insane PNG Image Optimization
10 Interaction Design Books You’d Be Crazy not to Read
Working Type
Design Systems
The Environmental Cost of your Internet Searches, Visualized
Final Notice by Unpayd – Send a Free Final Demand Letter to your Non-paying Clients
UI/UX Case Study: Dealsdate
Screely – Instantly Turn Screenshots into Beautiful Images
I Emptied my Savings to Buy a Newsletter.
Snapchat’s Redesigned Redesign Starts Rolling Out
If Trello and Google Calendar Had a Baby… Sunsama!
I Let Gmail’s New AI Write my Pointless Emails for Me
Flopstarter – A Platform for Bad Ideas
Lightning Fast Wireframing in Sketch
Making Profit from a Design System
Arby’s Made a Font, So…
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 -
6 Pointless Design Achievements You Should Totally Go For
Posted:Fri, 18 May 2018 10:45:06 +0000
Web design is a process of carefully planned and researched steps. You have a job to do, and users to satisfy. Ideally, everything you do has a purpose. There is a point to it all.But life is weird, complex, and even fun sometimes. Sometimes, you end up doing something that might seem a bit excessive, a bit “out there”, or even downright silly. But you do it just because it makes you feel good to have accomplished it, or because it looked fun. In gaming parlance, we call these things “achievements”.
Achievements in gaming often don’t give you anything but a sense of pride and accomplishment. (That’s an EA joke for you fellow gamers out there.) But seriously, while achievements occasionally do give you an in-game bonus, they’re usually mostly pointless. You do these things just to see if you can.
I thought it would be fun to take a look at some possible achievements that I think we should make official. If you think of more, please, please post them in the comments, along with any stories you have.
Make Another Designer Green With Envy
Okay, this is an interesting one, because you can do this on easy mode or hard mode. Easy mode is when you’ve been working in design for a while, and you show off your work to a brand new designer. I myself bestowed this achievement upon many a designer when I was new to the industry, because this design stuff looks like magic until you really get into it.
Hard mode is, of course, impressing an experienced designer. You can’t just get them to say “it’s good”. You have to make them wish they were you, and that’s tough to do. Bonus points if you can make a design celebrity publicly lament your superiority on Twitter.
My Score: I’ve only managed this on easy mode.
Get Your Site Featured on a Website Gallery
This achievement is mostly pointless because, if you’re freelancing, customers usually don’t browse website galleries. This is a distinctly web designer thing. That said, you can get a small in-industry bonus with other designers. It can possibly help you land agency jobs, too.
My Score: I have done this once in the long past, when you didn’t have to pay CSSMania to showcase your stuff.
Build a Site Full of Easter Eggs
We’ve all seen them: Vogue, of all websites, used to have well-dressed T-Rexes pop up when you input the Konami code. Then there’s Zurb with the cows. Google itself is known to incorporate little gimmicks when you search for things like “do a barrel roll”, and a full game when you search for “Atari Breakout”.
Now, it could be said that Easter eggs delight users when they’re found, but they are hardly essential to any website’s core experience. That said, they’re fun to imagine up, and fun to build. The only real downside is the amount of time it may take to implement them, which is why most Easter eggs tend to reside within the text of the code itself.
My Score: I’ve put amusing comments to myself in the code. That’s about as far as I’ve gone.
Convince a Client Their Logo Doesn’t Actually Need to be Bigger.
Client input is important. However, some clients tend to provide input just because they believe it’s expected of them. They feel compelled to make their mark, and put their stamp on the website, if only so that they feel it’s “really theirs”.
You get this achievement by convincing them to leave well enough alone. I mean, as long as you didn’t make the logo ridiculously small, it’s usually fine, right? But you forfeit this achievement if you use “the fold” as an excuse for not making the logo bigger. You have to convince them with the truth.
My Score: Nope. Never pulled it off.
Send a Client the Exact Same File When They Ask You to “Make it Pop”
Just like in the last example, this happens when you get a client who provides input because their “management style” demands it, and not because anything needs to be changed. Just send them back the same file, and see if they accept it this time.
If they do, you’ve saved yourself some time. If not, then at least you know they’re actually paying attention. Either way, you’ve gained valuable information.
My Score: I’ve never actually done this one, either. I got lucky, and my clients have nearly always provided more specific feedback, and would have known if I sent the same file back. I have sent the same file back by accident, though.
Write Humorous Temporary Copy, Have it Accepted as the Final Text
When you don’t have copy to work with, Lorem Ipsum and such like things often have to suffice. It’s certainly not ideal, but you can’t make content appear out of thin air. You can, however, write some silly things in your mockups, just for fun. I typically only do this with headings and other small strings of text. Paragraphs would be too much.
You score if any one of your silly ideas is accepted as actual copy in the final product. It need only be a line or two.
My Score: Yup, I got this one!
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
9 A11y Tips for Global Accessibility Awareness Day
Posted:Thu, 17 May 2018 10:45:56 +0000
The 17th May 2018 is Global Accessibility Awareness day, which makes today the ideal time to consider how inclusive our experiences are for those users who may be disabled, differently-abled, or temporarily inconvenienced.2017 was a big year for website accessibility lawsuits. Seyfarth and Shaw reported that, by year’s end, there were 814 ADA Title III federal lawsuits filed against websites in the United States alone. Perhaps the most well-known of these cases was Juan Carlos Gil v. Winn-Dixie Stores, Inc.
The blind plaintiff, Mr Gil, alleged that certain parts of the website essential to the shopping experience (like the store locator tool and coupon generator) could not be accessed by his JAWS screen reader. The reason why this case made such waves in the news is: one, because it was the first of its kind to go to federal court; and, two, because Winn-Dixie lost the case (as well as a lot of money and part of its reputation in the process).
While Mr. Gil wasn’t trying to purchase anything from the Winn-Dixie site, per se, this does still bring up an important question about what types of businesses are required by law to make their sites accessible.
So, let’s explore what it means to have an accessible website and which kinds of websites should take heed. Later, we’ll look at 9 recommendations posed by the Website Accessibility Initiative on how to ensure your site abides by the rules of accessibility.
What is Website Accessibility?
Website accessibility isn’t a difficult concept to understand. It simply means that a website is equipped to deliver an experience to all users, regardless of any disability or impairment they might have. And it’s not just about being able to see, read, or understand the content either; users need to be able to navigate through websites and complete transactions just like everyone else.
You may be surprised by the kinds of impairments that are affected by a lack of accessibility. Here are some of the broader categories:
- Visual
- Auditory
- Cognitive
- Physical (think of someone with a broken arm or hand)
- Geographic (for instance, users living in areas with limited bandwidth)
Website accessibility aims to address any limitations that may prevent the general public from being able to use a website that was explicitly built for public consumption.
Who Should Abide by Website Accessibility Rules?
The Winn-Dixie lawsuit was a big deal. It demonstrated that you don’t have to explicitly sell any goods or services online in order to be required by law to provide a fully accessible experience to all users. What ultimately matters is whether or not a website falls under the category of providing “public accommodation” as defined by the Americans with Disabilities Act.
In the case of Winn-Dixie, the judge ruled against the grocery store chain because the lack of website accessibility consequently affected the in-store experience. But that’s not always the case.
In another case from the United States, Andrews v. Blick Art Materials, LLC, Blick attempted to argue that, because it only sold art supplies online, that it did not technically fall under the “place of public accommodation” rule defined by the ADA. The judge, however, threw out their argument with the understanding that any business that deals with the public—either in person or online—should be held accountable for providing an accessible website.
If you’re designing websites for businesses or individuals that intend on offering a service or selling a product to the public, then website accessibility needs to be a part of your workflow starting now.
That said, it’s important to note that this will likely be a more common request you receive from clients based in the United States. While there are other countries where web accessibility laws have been established, most of them pertain to government and other public sector websites. While we wait for these laws to be revamped to account for more stringent web accessibility laws, it might still be a good idea to adopt the following tips into your workflow.
Design and Development Tips for Website Accessibility
Below, you will find web design and development tips from W3C and the Website Accessibility Initiative (WAI) on how to build websites that better accommodate impaired users.
1. Use Proper Tagging
Using header tags in text is helpful for a number of reasons. For one, the visual hierarchy of enlarged and stylized text makes it easier to understand content. But it also serves an important purpose in accessibility as the title tag and subsequent header tags of a page inform impaired individuals when they arrive at key points.
2. Write Descriptive Code
Some users rely on markup to figure out what is on the screen. So you will need to use markup that provides some context for what they’re seeing on screen. This should include things like the language attribute.
3. Be Careful with Color
Pay attention to color choice as well, especially as it pertains to text. When there’s a lower contrast between the text and background–usually with lighter fonts against white backgrounds or daker fonts with dark backgrounds—it can be too difficult for users to read.
Rely on strong indicators like underlining, animation on hover, large call-to-action buttons, and high contrast text.
The Senior Living website does a great job with high-contrast text (and also large text).
4. Use Big Text
Use a font size that can be reasonably read from any and all devices or screen sizes. Beyond that, you may also want to integrate with a tool that enables users to increase the font size if it isn’t large enough for their needs.
5. Make It Keyboard Accessible
Some visitors will access your site using a keyboard.
If interactive elements (like the menu) are not tabbable or keyboard accessible, you’re going to have serious problems.
The Consumer Reports site is tab accessible.
6. Create Ultra Clear Forms
Contact forms are an important element in websites.
Without them, you would have to rely on in-person or telephonic conversions (which just isn’t going to fly with a modern audience). So, pay extra special attention to these. Here are some tips:
- Provide instructions on how to fill out the form.
- Include descriptive and clear labels for each field.
- Make form fields tabbable in the order in which they appear.
- Use big, bold error messages with exclamation points, shading, or warning symbols, to indicate problems to your users.
- Do not use CAPTCHA.
The AARP website has a well-labeled and easy to populate contact form.
7. Add Supportive Text
In order to ensure that everyone can consume your visual content, add supportive text.
- For images, use alt-text that describes the photo as well as captions.
- For videos, add a transcript below or active captions within it.
- For podcasts and other audio, include a corresponding transcript.
Also, be sure to give users control over any of this media that auto-plays, including video, audio clips, and image sliders.
Freakonomics includes transcripts of each of its podcasts.
8. Use Abundant White Space
It may be difficult for some disabled individuals to focus on what’s most important if pages are cluttered. Use abundant white space to frame the most important parts of your site while also providing enough breathing room for them to comfortably view your content.
9. Include Orientation Cues
Another way in which you can guide users through a site is by including orientation cues. Of course, navigation is an important part of this.
You can also add breadcrumbs as well as strong UI elements that draw users down through the page. If all else fails, add a search bar to the top so they can instantly look for what they need.
Nordstrom uses abundant navigational cues.
Wrapping Up
All in all, I would say that enabling a site for website accessibility is beneficial for all parties. Your site’s ability to deliver a consistently high-quality experience for all users will lead to higher times on page, lower bounce rates, and, ideally, greater conversion rates. This, in turn, will give your site a more favorable ranking in search… and who doesn’t want that?
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Take Control of WordPress with New Elementor Pro 2.0
Posted:Wed, 16 May 2018 10:45:24 +0000
Elementor 2.0 is an innovative approach to site building in WordPress that lets you customize any part of your site, with absolutely zero coding knowledge.A plugin rather than a theme, this flexible approach means that you can use Elementor 2.0 to manage your site design, and unlike some WordPress site builders, you won’t be tied to a particular theme; Elementor 2.0 works with almost any WordPress theme from any vendor, as well as custom themes.
Build everything on your WordPress site exactly as you want it, without having to switch themes to find the right functionality, or pay a developer’s fees to personalize your template.
A Comprehensive Site Builder
There are dozens of different theme builders that will allow you to change the layout of your static content, but they nearly all tie you to fundamental elements of the theme, such as the header, or footer. Elementor 2.0 is designed to free you from that restriction by enabling the customization of those hard-to-change elements such as your header.
Using intuitive tools that enable you to build your site in a familiar WYSIWYG style, Elementor 2.0 is one of the simplest ways to make these changes, all the while confident that the code underpinning your design is robust and properly implemented.
All of this functionality was available before, but reserved for those coders who knew how to drill into the WordPress codebase. Elementor 2.0 puts the power to customize your site in your hands.
Intuitive Workflow
Elementor 2.0 has been crafted for speed. To make changes, simply install the plugin and you’ll find the Elementor option added to your dashboard menu, and you can now create new templates at will. Everything works instantly, giving you control of your site in a few clicks.
To speed up the editing process Elementor 2.0 features theme element widgets, such as an author box, a site logo, or a featured image; these and other elements can be combined to rapidly develop real-world WordPress solutions. To build templates, either start with one of the pre-designed options and customize it to suit your site, or build entirely from scratch.
All of Elementor 2.0’s code is fully responsive, meaning that you can create a design and be confident that it will look exactly as you intend on any device. You can even create premium features like a sticky header—an essential component of modern UX—so that your menu will follow users up and down the screen as they scroll.
To see your design live, all you have to do it click the ‘publish’ button and choose the conditions under which your new element should appear.
Conditional Elements
One of the features of Elementor 2.0 that we like the most is the conditional option: Once you’ve finished designing an element for your site, you can choose the conditions under which it will be displayed.
Let’s say for example that you want to design two headers: one for your main site, and one for your blog; Elementor 2.0 allows you to create them both and set them so that they will appear on the right pages; even when you’re creating repetitive UI elements you can apply them intelligently.
Create different footers for your site and blog, or a unique footer for your contact page, or even different designs for personal blog posts and professional blog posts. The biggest benefit to conditional elements is that you retain control of what elements appear when.
Design Dynamic Content
Many pages on your site, your home page for example, are static pages. Your blog posts however—the part of your site that WordPress really excels at creating—are dynamic. Dynamic pages pull content in from your database, so you can’t always be sure what that content will be.
The challenge this creates is that while static pages can easily be previewed in your WordPress dashboard, dynamic pages cannot, and each dynamic post could significantly affect your design. Elementor 2.0 solves this issue with an innovative preview option that really should be built into the WordPress core: With Elementor 2.0 you can choose which post content to preview a page with, giving you an unprecedented overview of your design right in the dashboard.
As well as elegantly handling static pages and dynamic posts, Elementor 2.0 allows you to create archives like category pages and search results, even a custom 404 error page; all the control you need to manage a modern WordPress site.
Conclusion
You shouldn’t have to choose between the freedom to switch themes and the ability to modify your site; with Elementor 2.0 you don’t have to.
Fresh to the market, Elementor 2.0 is a significant advancement in the control WordPress developers have, enabling them to edit almost any theme with ease, and with absolutely zero coding knowledge.
Not only is Elementor 2.0 a boost to creativity, but it’s a boon to timetables too. Delivering site-wide changes in a fraction of the time it would take to hand-code them could give you the competitive edge you need.
With a unique visual approach to theme building, Elementor 2.0 opens up new possibilities for WordPress professionals.
[– This is a sponsored post on behalf of Elementor –]
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Adobe XD CC is Now Available for Free
Posted:Tue, 15 May 2018 13:00:08 +0000
In a step clearly intended to maintain dominance in an increasingly competitive market, Adobe have announced that XD CC (eXperience Design) is being released to the community as a free application.XD is amongst the most well-rounded, reliable, and innovative UX design applications available; by making it free of charge to both Mac and Windows users, Adobe are hoping to make it the de facto choice.
Intriguingly Adobe executives are now openly referring to XD as Adobe’s flagship product—a moniker previously reserved for its 25 year-old, raster-editing, behemoth Photoshop.
We believe Adobe XD will be as big as Photoshop, if not bigger.
— Scott Belsky, Chief Product Officer & Executive Vice President, Adobe
It’s a trend that reflects recent changes in the design industry, as designers are increasingly asked to integrate user experience principles and methodologies into their workflow.
Yes, I Said Free
The official release name is the “Adobe XD CC Starter” plan, which is neither time-limited, nor feature-reduced. There is one version of Adobe XD, and it is identical whether you’re using the free plan, or you’re a fully paid up Creative Cloud subscriber. The XD CC Starter plan even includes Typekit and CC Library integration.
The cynical amongst us will question how Adobe can afford to do this. The last few months have demonstrated with shocking clarity, the truth behind the adage that if you’re not paying for a product, then you are the product.
It may be more astute to ask whether Adobe can afford not to do this. Great design tools are regularly being launched at very reasonable rates, often gratis. From Sketch to InVision, the competition is stiff and Adobe is often—perhaps part-fairly—perceived as maintaining a stable of out-dated and over-priced applications.
Since XD’s beta release, there has been a tangible buzz of excitement around it. Talking to Adobe product evangelists, it’s clear they can’t quite believe how good their own product is. XD may be seen by Adobe business strategists as a gateway application to the rest of the Creative Cloud suite.
There is one limitation of the free version of Adobe XD: You can only share one prototype, and one design spec, at a time. (There’s no restriction on the number of files you can save.) If this is too onerous for you, there’s a $9.99 single-app plan. However, for freelancers working on one project at a time, it’s no restriction at all.
Adobe seem to be targeting freelancers to build a grass-roots community that drives demand, while funding it by charging agencies who require more flexible sharing options.
Photoshop “Killer”
For years we’ve been calling applications “Photoshop-killer” and recently that has been extended to “Sketch-killer” as Bohemian Coding’s offering spreads. It’s a click-bait approach that fuels social media, but is rarely fair to the application being discussed. However on this occasion, “Photoshop-killer” may be an appropriate title.
There are (believe it or not) still professional designers who layout websites in Photoshop—if you’re one of them, then more power to you—but the lure of XD may now be too strong for even the most rehearsed designer. Especially as XD now opens PSD files natively, giving you unfettered access to your old assets.
In addition to Photoshop integration, the latest round of features includes Sketch integration, password-protected files, drag and drop asset swapping, and pasting to multiple artboards.
Over the next few months the XD team expects to ship enhanced animation features, and improved asset management. The most anticipated items on the roadmap are the UI element animations, enabling designers to accurately describe the intended feel of an interface for richer experiences.
Import from Sketch
Drag and drop symbol swapping
Paste to multiple artboards
Password protected export option
Adobe Want to Give You $10,000,000
Adobe are also launching a $10million fund—to be made available as either grants or investments—for the development of XD plugins that enhance what they are now calling “the XD ecosystem.”
If you’ve been developing Sketch plugins, now is a very good time to think about porting to Adobe XD. If you think there’s a major feature missing from XD, then Adobe may pay you to develop it.
Adobe’s $10million fund is welcoming applications from both experienced teams, and individual developers. As well as cold hard cash, Adobe will give you access to tools, early previews, and access to experts, so you can develop the most robust version of your plugin possible.
You can sign up for access here.
Should You Try Adobe XD?
XD, arguably unlike some Adobe products, is exceptionally good. From the initial beta-release until its official launch just six months ago, the XD team has continually impressed with its drive to keep pushing XD’s potential. Whilst I’ve never considered “cheap” to be a particularly desirable aspect of a professional-grade application, XD becoming a realistic option for more designers will only increase Adobe’s commitment to the product.
Adobe XD may not have everything you need for your design practice, but it is continually evolving and carries none of the baggage of Adobe’s other products.
The expectation for design careers is that experience of UX processes will be increasingly desirable over the next five years, as will fluency in UX design tools. Adobe have the financial clout to make XD the global standard, something that they appear determined to do.
The free XD CC Starter plan is available right now.
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
20 Best New Portfolios, May 2018
Posted:Mon, 14 May 2018 10:45:32 +0000
Welcome back, readers. It’s May, and that means the weather’s getting hotter. Stay inside, away from the evil, evil sunshine. Relax, grab a lemonade, and browse through this month’s collection of portfolios. This time around, we have a whole lot of grid-based minimalism with black borders, and some other stuff, too.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.Frank Chimero
We’ve actually featured a previous version of Frank Chimero’s portfolio once before, back in February 2016. Where the previous iteration was mainly focused on selling his writing, this version includes portfolios for his design and illustration as well.
It’s still pretty simple and modern, but there’s now a definite tendency toward using more images. Also, those pencil strokes in the background are a very nice touch, and fit thematically with all of the work he does.
Platform: Static Site
Jacqui Nguyen
Jacqui Nguyen is an architect, and her one-page portfolio pulls off something I didn’t expect to see this month: an accordion-based layout that I actually kind of like. It doesn’t hurt, mind you, that it’s styled to look vaguely like a file drawer.
I have a weird love for office supplies I never use. Anyway, that slight touch of skeuomorphism is just enough to set her site apart without delving into the realm of leather textures and other abominations. Above all, it is functional. That feels appropriate for an architect.
Platform: WordPress
Tej Chauhan
Tej Chauhan combines the presentation style website with pseudo-brutalism (read: minimalism with monospaced type) in a way that I find interesting. On the one hand, you have the presentation-style layout and handling of images for the portfolio, plus the nigh-unusable navigation so prevalent in presentation sites. (The red dot is the menu button.) On the other, every other element is near-brutalist in its aesthetic.
I wouldn’t adopt Tej’s approach to navigation, but the rest of the design presents some interesting contrast in style.
Platform: WordPress
A Friend of Mine
A Friend of Mine is a design agency that took on an interesting challenge when designing their portfolio: limiting the sense of style and personality as much as possible. Their whole shtick is that they tackle every problem differently, according to the situation. They don’t have a “house style”.
In execution, this means that their site is as simple as possible, taking minimalism to its practical extreme. I like to think that the constantly changing background color on the first part of their home page is a symbol of their commitment to doing everything differently as-needed.
Platform: Static Site
Studio Six
Studio Six’s agency portfolio is basically a study in what you might call corporate elegance. It has some of the hallmarks of artsy work, some fantastic typography, and the some of the restraint of your average corporate site. It manages to strike a balance between all of the elements that you don’t see to often.
Platform: Static Site and/or JS App
Katie Shillingford
Katie Shillingford is a fashion stylist, and her site goes for that magazine feel without trying to completely copy magazine layouts. It’s actually one of the better examples I’ve seen of adapting a print medium’s aesthetic to the web, even if it is loaded down with slideshows galore.
Platform: Static Site
daji studio
daji studio is the portfolio of Kenji Yoshida, a sound designer. You might expect, then, to be blasted by audio the second you open the page.
But lo and behold, Kenji is polite. No audio plays until you click one of the many “play” buttons scattered around the pleasing grid-based design. Be like Kenji.
And the site looks cool, too. The audio visualizations that take over the whole screen when you click a play button can be jarring at first, but overall, I like them.
Platform: WordPress
Hiatus
Hiatus is a team of video editors, and their site is deliciously creative. From making their branding look kind of like a pause button, to the rustic style of their site, to the layout that literally keeps the branding front and center at all times, this thing just… well it made me look.
Plus, unlike most video studios, they don’t hit you with a bunch of auto-playing video. You have to actually click on a project and then click play, so you’ve got plenty of time to set up your headphones first, and it won’t hurt your data caps unless you want it to.
Platform: Static Site
Under After
Under After is another minimalist portfolio that spices things up with just a hint of an illustrator’s touch, here and there. The site’s strongest point is really its typography, but the general layout is pretty snazzy as well.
I actually really like the way they designed those testimonials, and it might be the first time I’ve ever said that. Or not. I just know I don’t say it that often.
Platform: Static Site
Base
Base is a branding studio, and they’ve gone with a website design that forgoes any real fancy touches, and gets straight to showing off their work. It’s simple, it’s clean, it looks good.
Platform: WordPress
Mathilde Serra
Mathilde Serra is an art director with a strong emphasis on type. Combined with the strong colors, and a penchant for illustration, her portfolio looks classy and creative.
It’s so good, it’s almost worth the pre-loader. No but really, go look through the case studies. They’re beautiful.
Platform: Static Site
Johanne Roten
Johanne Roten is a Swiss graphic designer, and the Swiss style definitely shows in her work. It’s got that feeling of near-extreme-minimalism we’ve come to associate with our favorite some of our favorite designers from there. It’s also maybe one of the more well-organized one-page portfolios I’ve ever seen.
Platform: Static Site
Make Architects
Make Architects is an interesting portfolio, and not just for its design, which looks darn good. It takes that asymmetry-focused minimalism that got so popular last year, and combines it with a more business-friendly aesthetic.
It also spends half of its home page showing off not just their work, but advertising how they work. ie. it’s an employee-owned company, etc. They put just as much effort into letting you know what to expect from their business practices as anything else. It’s an approach I’ve seen before, but these people do it right from the get-go.
Platform: WordPress
Studio Thomas
Studio Thomas is one of those studios that has, with some mild animation aside, chosen the dead-simple look for their site. I am rather partial, though, to the header/navigation. It takes an interesting approach to telling the user where they are on the site at all times, putting the page title right up top with the site’s name.
It’s like they think telling you what page you’re on is equal in importance to telling you who they are. And I can’t say I disagree.
Platform: Vue.js / Nuxt
MAD
MAD has also gone for a dead-simple look, but they’ve given their type and visual flair a distinctly playful look through very small touches. It’s a subtle kind of full-site branding, but it gets the message across while keeping the site usable and readable. I can get behind that.
Platform: Static Site
Artomatic
Artomatic is bringing us yet more of that minimalism with lots of black borders that is this month’s theme. Well, there’s also a sense of carefully-imposed order, and one of the nicer approached to video that I’ve seen.
Platform: Static Site (probably)
Creative Media Design
Creative Media Design is a German design studio with a style that you might call simple, professional, efficient, and quintessentially German. True to the ambitions stated in their name, though, the site is livened up with the excellent use of accent colors, and a few small touched of handwriting-style type.
Platform: WordPress
MD
MD is yet another site on this list competing for “most minimalist thing since blank paper”. I mean, portfolio slideshows aside, it has a one-column layout. And yet, it still looks good.
Platform: Static Site
Drexler
Drexler’s studio portfolio spices things up by going back to the old asmymmetry. I mean, what’s old is new again, right? Or at least what’s old is a refreshing change of pace in a sea of grid-heavy aesthetics.
Platform: WordPress
Josh Sender
And lastly, Josh Sender has introduced me to the beautiful Romana BT family of typefaces. Just look at those headings. I mean, the rest of the site is good, but those headings are beautiful.
I also rather like the approach to the navigation used on this one-page portfolio. It’s simple, efficient, and mostly stays out of your way, while never being exactly hidden.
Platform: WordPress
Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!
Source -
Popular Design News of the Week: May 7, 2018 – May 13, 2018
Posted:Sun, 13 May 2018 10:45:35 +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.
Why You Should Never Use Pure Black for Text or Backgrounds
Curtains.js – Easily Animate Images
Meet Hadron. A Tool that Makes Design with Code Easy and Visual
The Deadly Trap in User Interface Design & How to Solve it
Solid Tips for Creating a Design Portfolio
Toddler Creates New Beer Label Design
The Next Big Thing in Type
25 Free Fonts to Enhance your Next Design Work
Charity Website: A UX Case Study
Site Design: Tribute to Akira
Reddit’s Designers and Users Aren’t Seeing Eye-to-eye Over Site’s New Look
Eden – UX Design Process
YouTube Music is Testing a New Player UI and Queue Functionality
How to Build a Responsive Type Scale with Bootstrap
I/O 2018: Our Definitive Guide to Design
CSS Custom Properties and Accesibility
Developing the Star Wars Opening Crawl in HTML/CSS
What Every Product Leader Should do in their First 60 Days on the Job
Google Drive Gets a New Interface to Match Redesigned Gmail
Google’s Material Design Guidelines Have been Updated
Intro to CSS – Free 20-part Course
Front-End Tooling Survey 2018 – Results!
The History of Iron Man’s Original HUD
Don’t Be a Rockstar & Other Pro-Tips for New UX Designers
User Onboarding: How to Get the Little Things Right
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 -
Comics of the Week #434
Posted:Sat, 12 May 2018 09:47:16 +0000
Every week we feature a set of comics created exclusively for WDD.The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.
These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.
So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.
Feel free to leave your comments and suggestions below as well as any related stories of your own…
Left brain search
Ironic poster
Copyright violator
Can you relate to these situations? Please share your funny stories and comments below…
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.