Lightroom is your digital darkroom without biting chemicals. Instead of toxic perils, you’ll find clean switches, sliders, and buttons to adjust the quality and looks of your photos. Still, that’s not easy, as finding the perfect settings for the most fascinating results needs a lot of experience. To ease the pain on the lesser experienced Lightroomers Adobe’s solution allows for so-called presets. These presets are batches of settings that lead to predictable results. Becoming creative with these is just a matter of choosing the right preset and let it do its work. We have 30 high-quality options for you. And all of them are free to use.

I started out as a designer. At one point in time, I was forced to start developing. Now, it’s time for a reset.

We Didn’t Have Anything

This goes back to the nineties. Netobjects Fusion was the most widespread design tool, with Microsoft’s Frontpage as a close second. Fusion was made for designers. There was no encounter with the source text of a website, and it wasn’t even possible. The same applied to Frontpage. This resulted in pretty pages, but horrible source code.

Later on, Macromedia’s Dreamweaver, and Adobe’s GoLive joined the group, and even surpassed Fusion and Frontpage. In terms of WYSIWYG, the newcomers were superior, and in terms of code quality too. It only made sense that designers were not sad to see the pioneers of design tools leave. However, the damage had already been done.

What Could Have Been if Things Had Gone Differently

Do you write Postscript manually? No? Why not? Right, you don’t need to. Manually writing HTML would not have become necessary either, had the early tools been able to provide a proper realization of the standards, or at least established that this didn’t matter at all. Look at Word and its topsy-turvy code, that works.

Better solutions would’ve been helpful. pucho / Pixabay

Now, did the mediocre quality of early HTML design tools force all of us onto the developer track? This might seem a little over the top. At the very least, the guys from Netobjects or Microsoft won’t be the only ones to blame. However, it’s a fact that we’ve been forced to manually write code from the very beginning, which is something that print design tools never have and would never have asked from us.

Thus, we ended up dealing with unattractive code blocks, rather than appealing designs. Soon enough, this became standard. Ever since then, the code-based working has been picking up pace almost dramatically. No day passes without three dozens of brand-new, naturally awesome frameworks, boilerplates, libraries, and other tools.

Design is Only a Partial Aspect of Our Work

Design in itself has been moved to the background. The developer tasks dominate. Some may like it, but not all do. When looking at my order book, the requests of my typical client have barely changed in the past two years. However, the technological options have changed drastically. This barely matters to the average client, though, as their business goals are the same that people had twenty/thirty years ago. You can open any business studies book of the Eighties and just start reading anywhere.

That’s not beautiful… (Pexels / Pixabay)

The brand-new features that you can only make use of as a developer are not useless, of course. However, they only affect a rather small share of potential customers and are heavily overrepresented in terms of their visibility, and the buzz that is created around them.

Back to the Roots

I’m done. Instead of evaluating new tools just to realize that, after a pointless training period, I can accomplish the same thing that I accomplished before, I will now exit this rat race. I don’t want to develop a Facebook clone, and no client will ever ask me to do so.

I enjoy working on designs, not fiddling around with code. I’ve gotten angry about a missing semicolon, or a superfluous underscore countless times, once I finally found them. This has to stop.

And while we’re at it. I don’t want to be a webmaster either. In the Nineties, I’ve put days of work because the mail server of client XYZ didn’t work, or appeared on some block list. Today, doing this is much clearer, and easier, thanks to proper backends. But that doesn’t make it a fun activity.

So, if I don’t want to webmaster, and don’t want to develop, which tool is the one for me? Naturally, the first thing that comes to mind is the homepage builders of the new generation. Dreamweaver and co don’t take care of the webmaster tasks, although they go pretty far in terms of cloud storage support, and management of modules, and other reusable elements.

Hello Wix

For Noupe, I’ve already looked into homepage builders several times, and I’ve also covered the topic for t3n, including the creation of a large market overview. I think I’m able to claim that I can make qualified decisions for, or against certain products.

Looking at it from this perspective, two website builders remained, namely Wix and Webydo. You’ll find awholebunch of articles covering both of them here at Noupe. My colleague Robert Mening also created a complete website using Wix, and gave a detailed report on it.

While Webydo seems to provide the more complete package, even including billing and white labeling, Wix established the bigger business.

Why does that matter? I don’t want to act as if I was putting my entire occupational future in the hands of the system that I choose. However, it would definitely be – say – annoying should my provider end up shutting down at a moment’s notice. So, assessing how likely the worst case is, is the right thing to do in advance.

Here, I, personally, think the market leader Wix is the safest bet. German competitors have been through tough times already, so all of them are out of question for me. Webydo does offer a good product, but it appears to be moving towards some sort of final battle with Wix. In the end, one of the two will be victorious, and I feel like it will be Wix.

In terms of the feature set, the two providers are very similar, and that also applies to the learning curve and the controls. In case of doubt, it would even be possible to quickly switch between the two. This idea reinforced my decision.

By clearly focusing on Wix-based websites, I won’t lose one single customer. I can tell you that much already. The clients never cared for the technological foundation I got their designs running on. And I’ve only developed web services, mostly communities, two or three times in the past; the last time was 15 years ago.

Psychologically, this decision is immensely easing to me. Once you’ve realized that your business doesn’t need to run at the cutting edge of the latest technologies, a lot of weight falls off.

Of course, I’ll keep staying up to date regarding new developments, but there won’t be a lot of experiments anymore. I won’t write any more code, either. From today on, I’ll only design. Just like I used to in days gone by.

The free app Landscape lets you prepare images for social media in a way that meets the respective requirements. This saves time and nerves.

Images and social media belong together. Without a picture, even the post with the most significant content doesn’t get any attention. Unfortunately, there are more than 30 different image sizes across the various networks. Because of that, the processing of your images can easily take up one or two hours of your day. It is likely that this is time you can’t spare. You need help.

Images and Social Media: Inseparable Connection

“An image is worth more than 1,000 words”. There are tons of studies that prove that visual content, like images and videos, are consumed a lot more, generate better click rates, and overall, are remembered more often than purely text-based content. Learn more about it here.

These results go for both your website and your blog. However, they are even more relevant to social media. Here, your content is just a part of a constant stream of news. If you don’t offer a visual anchor, your groundbreaking post won’t even be noticed.

Thus, a part of your social media strategy should be adding images to all posts. This is not even that hard. After all, there are dozens of providers of high-quality image material, some of which has to be paid for, but there’s a lot of free content too. We have compiled the top free image services for you.

Thus, getting to images for social media that attract attention shouldn’t be a problem. However, one thing that can easily turn into a problem is the different image sizes that social networks confront you with. If you want to share your image in the most extensive possible variety of formats, prepare for at least three dozens of different resolutions, all of which take up considerable effort. Simple size cutting won’t do the trick, as, depending on the aspect ratio, you also have to make sure that no essential image components are cut off.

Overall, you’ve got a whole bunch of work on your hands if you want to supply a wide variety of social networks. Though, it may be worth discussing if it actually makes sense to try to serve all at once. Maybe, limiting your activity to a select few networks is not a bad idea. That’s a topic for another article, though.

Fortunately, there are a bunch of useful tools to support you to different extents. Today, I want to introduce you to a tool with the purpose of quickly providing you with all required resolutions for the seven most significant social networks.

Landscape Prepares Your Image for Seven Networks

Landscape by Sprout Social is free to use, only created to get you the right format for an image, without taking hours of your time to do so.

Landscape supports all image formats and resolutions of the networks Twitter, Facebook, Instagram, Linkedin, Google+, Pinterest, and Youtube. Additionally, Landscape also offers an option to generate a custom format, for your blog for example, together with the others. To do that, you need to enter the pixel measurements yourself, while Landscape already knows the values for the other networks.

Creating Your Social Media Images Using Landscape is This Simple

Landscape is basically self-explanatory. The assistant guides you through the individual steps. You can’t forget anything.

Start by uploading your image. The possible formats are JPG, PNG, or GIF, and the maximum size is 10 MB. Animated GIFs are not supported.

Choose a high-resolution picture with a broad frame of non-essential image components. In the following steps, you’ll have to do a lot of pushing and zooming to maintain the essential elements. Alternatively, just choose a picture where it doesn’t matter if something is cut off.

Landscape: After the Upload, You Need to Choose Which Networks You Want to Supply. (Screenshot: D. Petereit)

After uploading the image, decide for which platforms you want to prepare it. In the next steps, reify this selection regarding individual formats of the respective network. If you don’t need to manually work on the image cropping, you can also accept Landscape’s offer to perform an auto-crop.

Naturally, auto-crop gets you the fastest result, as Landscape automatically provides you with all sizes and formats that it knows. With pictures where the cropping is irrelevant, this is the way to go. Landscape always cuts off parts in the same spots and doesn’t care about essential elements.

Landscape: Once you chose a few networks, specify which format you need, respectively. (Screenshot: D. Petereit)

When forgoing auto-crop, the next steps guide you through the options for the individual social networks. Here, choose which of the respective service’s image formats you want to support.

At the end of this process, just click the download button. Now, Landscape executes the tasks and sends you a Zip archive to your local hard drive. In this Zip archive, you’ll find all desired image files, sorted by name and usage purpose of the respective network.

Now, they are ready to be used on social media. So? How much time did you save?

A free UI kit with elements for the modern user interface is a good thing as it is. Elements for Sketch is current and extensive on top of that.

Sketch, the Whizkid of Illustrator Rivals

Sketch is, without a doubt, one of the most popular graphics solutions for UI designers. Although the app is available for macOS only, it can unite a respectable amount of users.

Bohemian Coding, the developers behind the Sketch app, is one of the software companies that Adobe has to include in their evening prayers, ever since their decision to turn the Creative Cloud into a subscription model. It is highly likely that, without this (wrong) decision, Bohemian would have never taken over such a large share of the market.

The fact that Sketch is now being distributed in some subscription model itself does not change anything. The detail differences are very significant, though. After canceling your CC subscription, you’re left with nothing but your files, while scrapping the Sketch annual subscription at least leaves you with the program in the most recent version before cancelation. Thus, you can keep using your outdated version for as long as you want to, unless macOS thwarts your plans.

Excerpt of Elements. (Screenshot: Noupe)

On top of that, a Sketch subscription costs 99 USD a year, while a single subscription to Adobe Illustrator, for example, would already cost you about 24 Euro a month (!). As a result, the Illustrator has an annual price tag of about 290 Euro, while Sketch is approximately 104 Euro a year (in Germany).

Clever readers may say that I had compared Illustrator to Sketch, although a comparison to Adobe XD would be more appropriate. I don’t agree, but let’s look at the prices nonetheless. As an individual subscription, Adobe XD costs 12 Euro a month, adding up to 144 Euro a year. This is still about 40 percent more than Sketch, although the comparison is lacking as it is. Sketch covers the entire design process, ranging from the prototyping to the finished product, while Adobe XD’s strengths are exclusively located in the prototyping. The tool is out of the question for the production assets.

Elements: Elegant and Extensive iOS Kit for Free

If you own a Mac and are not stuck in Adobe’s CC world because of Photoshop and InDesign, I highly recommend taking a peek at Bohemian. From my impression, the community over there is more professional as well. Or, let’s word that differently, the entire Sketch community consists of professionals, while the Adobe community is watered down by hundred thousands of amateurs.

The Sketch community provides tons of templates and other design helpers, able to accelerate your workflow while being of professional quality. Recently, Bohemian made an extensive UI kit available for iOS designers.

More Examples Of Elements. (Screenshot: Noupe)

The 21 MB large package called Elements comes with a contemporary look, manifested in five different themes, 35 templates, 45 icons, and 175 other symbols. The themes cover the popular topics food, social media, music, photography, and travel. However, your creativity is not limited in any way.

Elements is available for free download here. To download it, you don’t need to share any information about you. Just click the download button on the right of the browser window, and the download starts right away.

The linked page also allows you to look at a detailed preview of each individual element. The UI kit comes with a single Sketch file and was structured carefully. All components have self-explaining names and are fully editable.

If you want to create contemporary designs for the current iOS, and use Sketch as it is, Elements is a must-have for your toolbox.

Pablo Stanley is the name of the man that actually created the website mentioned in the title. He explains Photoshop to designers that don’t use Photoshop.

Starting Point for Occasional Photoshop Users

At first glance, Pablo’s website seems to be silly, a joke. If a designer doesn’t use Photoshop, why should he care about it? On second glance, it becomes clear which target group Pablo wants to reach.

It is meant for those that spend a majority of their work time in applications that are suitable for UI/UX design. Photoshop is not the most optimal choice here. Adobe tries to establish both Illustrator and XD for this task. However, the top dog in this segment should still be Sketch by Bohemian Coding.

Now, you’ve created your UI using Sketch, but notice that the images you want to use are not suitable out of the box. If you were able to make some alterations in Photoshop, you would not have to rely on your colleague, that always gives you a pitiful grin when you ask him to help you with these things.

Quick Guides of a Few Minutes

These simple tasks that come up on a regular basis are what Pablo Stanley covers in his free video tutorials. Pablo starts with five tutorials, giving professional explanations on individual features of the image editing giant, ranging from two to eight minutes.

For instance, his videos provide brief explanations on how to cut out image elements using Photoshop, or how to approach actions and batch processing. Color changes, spot repairs, and the gradient tool are some of the other things he makes you familiar with.

I watched two of the videos, and I can confirm that they are suitable for daily use. Within a few minutes, you have understood the approach, and are able to apply it to your own needs. Pablo is already working on a list of videos, allowing his website to turn into a true starting point for everyone that wants to gain spotty Photoshop skills.

More Under “Sketch Together” on YouTube

Pablo Stanley is the mastermind behind the YouTube channel Sketch Together, where you’ll find even more tutorials. As you can expect from the name, Pablo teaches you a lot about Sketch but also covers Framer, Illustrator, and other apps.

Virtual reality can only succeed when it conveys a bit of realism through the use of three-dimensional objects. To free you from the burden of having to create all objects yourself, Google Poly offers a whole bunch of them.

Extensive Portfolio of 3D Objects

Google Poly is a collection of 3D objects to use in projects that deal with AR (Augmented Reality) or VR (Virtual Reality). While AR projects only require a modest amount of 3D objects, since the analogous reality is also displayed on the user interface and the AR has only an additional appearance, VR projects are comprised of digital elements only.

Google Poly: Landing Page

There are plenty of solutions for the creation of digitally conceived 3D models. Google Blocks is one of the freshest. Google Blocks shifts the modeling process itself into virtual reality. The software only supports VR glasses, namely the Oculus Rift, and the HTV Vive.

For you to be able to use the created objects, Google has now extended the software with a repository. This project called Poly, derived from Polygon, the defining element of every 3D model, is not only able to gather objects from Blocks. Instead, you can also down- and upload projects from any other 3D modeler.

Some people offer their constructions from Lego’s Visual Designer. The important thing is that the software can export to the desired .OBJ format. It’s no surprise that Blocks provides the majority of available objects, however.

Mostly Free-to-Use 3D Objects of High Quality

The objects, uploaded by Google and, more commonly, the community are subject to different license restrictions. After a few random samples, I can say that the CC-BY, aka the Creative Commons (by Attribution) is the most common one. Here, you get to use the elements for free, as long as you credit the originator.

Google Poly: Large Detail Views

Poly has an impressive array of different themes to offer. Thus, it’s a good thing that you’re not only able to search via free text search, as you know it from Google. Instead, the posts are categorized on top of that. Thus, you’ll find drawers like “Animals and Creatures,” “Food and Drinks,” “Technology” and plenty of others.

Google Poly: Mobile-First and Designed as a Community

Poly itself follows the mobile-first approach. Thus, its user experience is equally good on mobile devices and desktop. The individual 3D objects, the platform’s protagonists, are displayed large enough. Because of that, the question of applicability in own projects is easily answered.

Poly is designed as a community. You can become a member with your Google account. The handling of Poly is very similar to that of Google+. Simply “Like” your favorites, which results in the labeled objects being easily accessible via the “Like” folder in your profile. If you only need an object for a presentation or a website without VR functionality, you can turn it into a GIF. During this process, you also get to influence the aspect ratio, as well as the speed of the rotation. There’s also the option to share individual objects on conventional social media, as well as the option to embed them as iFrame via embed code.

Poly as a First Introduction to the Topic

Poly is a repository for every designer aiming to look deeper into VR and AR. There is no faster way to familiarize yourself with the topic than via ready-made objects. But even in a real-time application, one may want to default to one or another object, especially when it comes to generic items like tables or chairs.

The video is pretty cool, but it would be even better if your ex weren’t on it? Adobe’s Project Cloak may have what you need.

Sneaks, Technological Experiments, at MAX 2017

During its annual MAX conference, Adobe always gives the visitors a peek at the technologies that are in the works. Adobe calls them sneaks. One of the sneaks on MAX 2017 was called Project Cloak. Cloak is a pretty appropriate description of the function hidden behind the name.

Cloak allows you to remove undesired elements from videos. This works in a way that’s similar to the content based filling in Photoshop. As you know, it lets you mask items, and then have Photoshop remove them from the image. The area that was covered by the removed element is filled with the content of the background. Ideally, you can’t even tell that there was something else in that spot before.

In theory, we could do the same for videos in tedious frame-by-frame work. However, this would become very obvious when playing the video, as we have changed each frame, but didn’t adjust them to each other. Thus, we need a technology that can consistently remove image elements across multiple frames.

Cloak Removes Elements Under All Circumstances

This is precisely what Project Cloak promises to do. The following video shows you what Cloak is capable of in six minutes:

Comparatively, the most straightforward task is removing a static element from a video. Like the light pole in this image, for example:

Look at the light pole right in front of the building.

Using Cloak, the pole can simply be masked, using a rough polygon selection, for instance. The result looks like this:

The image on the right shows the result of the choice in the left-hand image.

The pole has vanished completely, and even in the playing video (see above), there is no indication of a pole possibly being there. The removal is residue free.

Cloak can also handle more difficult challenges. For example, it can completely remove people or groups of people:

If you prefer your desert video without any people…

The demand could also be eliminating the shadow of the recording drone on a t-shirt. If you can select it, you can remove it. This is a fantastic outlook for videographers.

It is Unclear When You Get to Use the Function

At the conference, Cloak was used as a part of After Effects. As it is only an experimental feature as of right now, you shouldn’t expect to find the function in your After Effects anytime soon. Since the feature seems to work reliably already, though, it shouldn’t take years until we can ban all of our exes and the in-laws from our videos.

You love Sketch, just got the hang of Adobe XD, or pay for Framer already? InVision Studio could still win you over.

InVision Studio is a tool for rapid prototyping and the creation of production-ready assets alike. This puts it on one level with the favorite weapons from the houses of Bohemian Software, or Adobe, while also challenging the newcomer Framer.

InVision Studio: Landing Page

After their recent MAX conference, Adobe has completed the beta stage and released the version 1.0 of their tool XD, which basically means that previous beta testers don’t get to use it without a CC subscription, as it is not free anymore. By now, Sketch also costs 99 USD a year, and Framer starts at 144 USD per year.

InVision Studio, on the other hand, will come in at the most radical price possible, a flat zero. InVision wants to distribute the tool for free, and rely on the existing, paid InVision service for sharing and commenting options. The pure software with all of its features doesn’t cost a single cent, though.

This way, InVision sets a pretty high bar; especially since previous projects have already shown that InVision does not provide mediocrity. The Studio is not available yet, and the planned release is in January 2018. InVision intends to release both a macOS and a Windows version right off the bat. This should be especially concerning for the developers of Sketch. After all, the software is still only available for macOS, and won’t be created for Windows.

The following video gives you a first impression of the feature scope you can expect:

Visually, InVision Studio is reminiscent of Adobe XD, seems less intuitive, but filled with more features. The animation options depicted in the video alone already exceed the ones of Adobe XD by a mile. Overall, the UI concepts of XD, Framer, and Studio are very similar, while Studio and its additional features also pose a direct threat for Sketch. According to InVision, Studio aims for a simple interface concept that can become a lot more in-depth with the proper expertise. This sounds like a jack of all trades device, and it seems like that’s what it’s supposed to be.

I have signed up for the beta program, and I’ll make sure to inform you once I have my hands on the app.

Adobe Photoshop Elements 2018 is here, and there are a couple of solid arguments for a spontaneous purchase. We’ll tell you about them.

Adobe Photoshop Elements: Not an Amateur Version

People like to call Adobe Photoshop Elements a watered down version of Photoshop CC. This definition was never correct, though. Elements, and its just-released 2018 version has always been a completely different software, with a unique control concept.

While the expensive, heavy weight version is aimed at professional image editors that want to manipulate even the last pixel, Elements is directed towards the everyday user. This doesn’t mean that Elements doesn’t produce professional results. The opposite is the case.

Especially for web designers, Adobe Photoshop Elements can be the better choice, as it’s entirely sufficient even compared to the big brother (or sister, to keep genderists calm). The benefits are obvious. You can buy Elements for a one-time payment of 98.77 EUR, while the only way to get Photoshop CC is a Creative Cloud subscription.

The more critical aspect, however, is that Elements’ toolset is a lot easier to learn than the one of the big, often too big, counterpart. Elements is an alternative to Adobe Lightroom, the graphics giant’s photo lab, too, as Elements also aims at users that value fast and easy manipulation of image settings. Thus, one could call Elements a successful mix of Photoshop and Lightroom, which does not even try to match their feature sets but only forgoes functions that don’t matter in an everyday editing routine.

If you’re a professional photographer, these statements don’t apply. Stick with Photoshop CC and Lightroom. But, naturally, your routine is completely different from my webdesign routine.

The Best Innovations of Adobe Photoshop Elements 2018

With the version 2018, Adobe switched to naming their versions after years. This has been long overdue, as there has always been only one version per year as it is.

Aside from many detail improvements, Adobe Photoshop Elements 2018 comes with a bunch of completely new features that massively ease your daily photo work.

Automatically Opening Closed Eyes

We all know it. You take a photo of a client’s team for their website, but one of them closes their eyes. Each. And. Every. Time. Of course, it’s not always the same one. If that was the case, we could do something about that. Replace him with another one, for example…

Elements 2018 gives you a function that automatically opens closed eyes on images. This requires you to have another image where the according person has their eyes open. So, Elements doesn’t implement some generic eye but uses the original as a base.

Auto Selection After a Rather Rough Outline

Separating objects, like fore- and background, has become more comfortable with version 2018. Improved algorithms promise a more precise selection, even if the object of choice is only roughly outlined.

Auto Selection (Photo: Adobe)

New Assistants for Common Editing Requests

How often are you asked to replace a background, overlay images, or for the special effect of double exposure? In Elements 2018, dedicated assistants guide you through the respective task step by step.

An Example of What the Assistant’s Result for Double Exposure Could Look Like. (Photo: Adobe)

Expanded Abilities of the Element Organizer

Elements was already able to filter photos by specific criteria, such as people or locations. The photo-tagging based on the subject isn’t new either. This was always a massive help when it came to searching or finding relevant images.

The ability to make Elements curate only the best photos is new, though. Let’s assume you needed twelve images for a custom year calendar. Now, define a period in the Elements Organizer, and click on “auto curate” in the top right. The slider next to it lets you determine how many images should be included in the selection. In the example, you would drag the slider to 12 images.

Now, the Organizer analyzes the selection, and filters the best images, depending on several different aspects, including technological ones.

Is the Update Worth it?

If you already own version 15, which is the version right before 2018, you have to decide if the mentioned new additions are worth the price, which is 80.92 for the update. If you use Elements on a regular basis as a part of your professional toolbox, the answer will probably be yes.

If you haven’t worked with Elements before, version 2018 is the right one to get started. The tool has never been as powerful as it is now.

Prototyping, creating a first usable model of a website or app, needs to be one thing above all else: fast. The fastest tool for this purpose is Adobe Xd.

Today, I had to develop a wireframe model of a smartphone app. It wasn’t supposed to be very detailed but meant to give a comprehensible explanation of the basic concept and be presentable on a smartphone. It didn’t take me long to figure out which tool I should use. I started up Adobe Xd.

Adobe Xd: Newbie in the Creative Cloud

Adobe Xd, also known as Adobe Experience Design CC (Beta), is software available as a part of the Creative Cloud. If you’re already subscribed, you have access to the program. As it is currently in the beta for Mac and Windows, you can even use and download it for free. Setting up the required Adobe ID can be done fast, and for free.

So, at the current moment, you don’t need to be a subscriber of CC to download and use Adobe Xd. The time is now to test it.

Once the final version is out, after the beta test has concluded, the only way you’ll be able to use AdobeXd is via a CC subscription.

Fast Wireframes With Varying Details

Now, why did I start up Adobe Xd just to create a wireframe of an app? In contrast to what the product’s name may suggest, Adobe Xd does not only deal with more specific problems of UX designers. Instead, it is a general tool for the creation of designs for the web and mobile devices.

Adobe Xd Start Screen

Adobe Xd is a fast helper when it comes to wireframes. However, the software is also capable of creating interactive prototypes, screen designs, and even production ready assets. To sum it up, Adobe Xd supports the entire design process. You get to choose the level of detail.

Of course, Xd can support you from the wireframe up to the finished product, simply by continuously increasing your design’s complexity, depending on the customer feedback.

Adobe Xd: Clear Task Description and Clear Labor Division

Depending on which stage of your product you’re in, you’ll enjoy the various tools that Adobe Xd provides. At any point, it is possible to export the project stage, to get feedback from clients or team members. For example, you can create a link that allows everyone with access to the linked project to view your design, or even use it, if you selected that option. A comment feature allows for real-time feedback.

It’s also possible to view your app concept on mobile devices. To do so, move the Xd file into your Creative Cloud, where you can access it with a mobile app, available in the app stores of Android and iOS. The design can be then tested on mobile. Of course, this will be especially impressive to the client. For a quick test, the smartphone connection via USB should be the faster option, if you want to test it on a real mobile device at all.

Adobe Xd goes all in when it comes to speed. Thus, the software’s user interface is very clean and divided into two separate environments.

The design of the mockup is taken care of in the section “Design.” This is where you’re sure to spend most of the time. It’s where you create your drafts page by page, and place them next to each other on the screen. All visible image elements are designed here. The work section “Design” is where the app’s entire look is created.

In the section “Prototype,” the feel of your app is developed. Here, simple connection lines let you choose which screen element on which screen leads to another screen with a tap. This is where you work on the entire control structure. Aside from the pure targets, you also get to define various transition effects, as well as easings and their duration.

Connections Between the Drawing Areas Are Represented by Lines.

The fastest form of the preview is the program functionality simply called “preview.” It opens your mockup in a separate window, which has the size of the target resolution. This should be sufficient for the first review, and your own purposes. Distributions via links or the presentation on the phone are only worth it once other project participants come into play. In a later version, it will be possible to collaborate in real time using the Creative Cloud, as shown by Google Docs or Office365.

Adobe Xd: Efficiency is Key

What impresses me the most are the effective tools that Adobe Xd presents in the “Design” section. For instance, there’s the control panel “Elements.” Here, you get to deposit design elements, like colors or fonts, to let you pick them back up at a later point in your design. This is also where you save so-called symbols. These could be icons, for example, which can then be adjusted over the course of the entire project by just editing the stored symbol.

In general, you can transfer the formatting of any object to other objects by copying it. It is also useful to know that the text tool always keeps the settings of the previous text. Thus, you can quickly add text in the correct formatting, of which you, as a sound designer, only have three or four.

Very Clean! In Adobe Xd, You Get to View All Design Components at Once.

The so-called repeat grid allows you to quickly add a grid or a formatted list without having to manually add every single element of the list or table. All you need to do is create an object, and multiply it with the Repeat Grid.

Speaking of grids. Adobe Xd offers many ways to level your design elements. Various help lines tell you where your element is currently positioned within the design. It can easily be aligned with the top or bottom border.

Just drag images you want to use in the design into the respective drawing area via drag and drop. Specific masks make sure that your images are automatically adjusted to the defined design parameters.

As we know it from other Adobe applications, design parts can be grouped, letting you edit these groups in a later step, while preventing individual elements of the group from being moved or altered in other ways.

Once your prototype is matured to the point where it’s time to produce the assets for the developer of your app’s code parts, Adobe Xd’s export function comes into play. Depending on the target platform (Web, iOS, or Android), the software makes sure that all required assets are exported. The export is done as an SVG, or PNG. An additional PDF export allows you to distribute the concept in the reader format.

Adobe Xd: Fast, Catchy, and Available for Both Large Operating Systems

My app mockup took me half an hour. It didn’t contain any production-ready assets, as it was a classic wireframe. Nonetheless, the presentation on my smartphone was able to illustrate my ideas well enough for all project members. Did I mention that I’ve been a subscriber of the Creative Cloud for years as it is? For me, this subscription has gained a lot of value with Adobe Xd.

If you want to mention Sketch as an alternative, let’s get to this straight away. Sure, Sketch is an excellent product. However, it takes a lot longer to get to a result, as it focuses more on the creation of production-ready assets than rapid prototyping. On top of that, it’s only available for macOS, while Adobe Xd runs on both macOS and Windows.

For a quick start, Adobe offers a whole bunch of video tutorials. This way it will take you a maximum of 19 minutes to be able to use the software productively.

Images make up a majority of web content.But a lot of websites and applications that we browse aren’t always delivering the most optimal image format, size, quality and dimension.

As a developer, it seems inefficient to serve a 2,000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let’s review few of these patterns based on their categories:

Optimized formats

Third-party Libraries

Third-party APIs

Optimized Formats

It is natural to use image formats such as PNG, JPEG and GIF. These three have been around for several years, but they each have characteristics that would make you choose one over another in certain cases. Additional formats have been introduced and some are being standardized in order to provide a better way to serve images in their best optimization level.

Examples

WebP

JPEG-XR

BPG

These optimized formats are, as a matter fact, a very good attempt at reducing the image bloat. Image formats are the means for achieving convenient optimization and compression without resorting to third-party solutions. Unfortunately, the image format battle continues, as there is inadequate support across all browsers, limitations, policies and other factors that make it hard to ensure every image format is consistently optimized.

Third-Party Libraries

You can also use third-party libraries to compress images. These libraries provide an exposed API method to which you can pass your image file, specify some compression argument, and have a compressed image returned for your configuration.

There is nothing wrong with writing your own solution, but we are trying to save time as well. These libraries are written based on some standard algorithms so it’s fine to rely on them to some extent. However, they may not give you enough flexibility in terms of how compression is handled. It’s hard to find a third-party library that takes a PNG file and delivers an optimally compressed lossless image.

Third-Party APIs

There are public and premium third-party APIs that could be used to process a bloated image, which is then returned to you as an HTTP response. This so far is the most easier to use because it just requires basic knowledge of HTTP to get your images compressed. It’s not language or platform dependent which makes it a little more flexible than the others.

Examples:

Plus, you encounter the same issue as you do with third-party SDKs: It’s hard to find that all-in-one-solution that is flexible enough to address your problem.

A Better Choice That Offers CDN

While the platforms discussed above are commonly used for compressing images, not one offers a comprehensive, intelligent solution for compression and optimization. Image delivery and upload may even become more complex when you need to serve your images via a content delivery network (CDN). This adds another layer of complexity to the problem.

But, what if there was a single tool that could:

Upload, store and deliver images via CDN

Transform images (dimension, color adjustment, etc)

Compress images losslessly

Cloudinary is that solution. It’s a comprehensive image management tool that quickly and easily addresses your image concerns, eliminating the challenges and risks of image storage and management.

Cloudinary also intelligently addresses our image compression challenges. It uses image transformation features to give you control over the quality of your images, while giving you the option to automatically select quality and format.

What’s most interesting about Cloudinary is that all these features are URL-based, which means you simply need to alter the URL to achieve the configurations you need. You also can use the provided SDKs if you prefer not to do URL manipulation.

Image Quality Transformation

The following image of a woman was delivered using Cloudinary (the upload mechanism is not covered but you can read about that here):

It’s delivered with this URL:

http://res.cloudinary.com/demo/image/upload/woman.jpg

This image weighs about 569kb. This is not a bad quality, but we can do better. Let’s see how much we can adjust this image without losing visual quality:

http://res.cloudinary.com/demo/image/upload/q_90/woman.jpg

The q transformation property takes a variety of values, one of which is a range of 1 to 100 that indicates the quality in percentages. This is what we have applied above and the image was trimmed down to 123kb. We just eliminated 446kb, which is a great example of what we mean by the title of this article: “Your Web Image is Unnecessarily Bloated.”

Let’s go hard on this image and see what’s the worst that can happen:

http://res.cloudinary.com/demo/image/upload/q_40/woman.jpg

I just took the quality down to 40 and trimmed down the size to 38kb, yet the visual quality of the image is partially degraded. By now you could imagine the bandwidth you’d be wasting because of the lack of compression.

Let’s try 10 percent.

http://res.cloudinary.com/demo/image/upload/q_10/woman.jpg

Now the image is visually poor. This doesn’t mean we can tell for sure that 40 percent is the perfect point. It could be 30, it could be 20, but we don’t know exactly To find a perfect quality, we can use the auto quality value rather than a rigid value:

http://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

The auto value produces an image that weighs 45kb. This is easier and quicker than using a rigid value and guessing the perfect compression rate.

Auto Formats

In addition to quality transformations, you also can define automatic transcoding for your images. This enables Cloudinary to choose a suitable, and optimal, image format for the browser rendering the image:

http://res.cloudinary.com/demo/image/upload/f_auto/woman

Browsers, such as Chrome, support specific formats, like WebP, to improve performance . Cloudinary always knows when and how best to do this without losing the visual quality of the image.

Conclusion

You website images might be bloated or optimized to a certain level. You can use image formats, third-party libraries and APIs to optimize images, but they might not be as flexible as you need them to be.

Cloudinary offers a comprehensive image management solution that delivers and transforms images via URL-based APIs. You can utilize the transformation features for image optimization and compression.

Lunacy is a Sketch file viewer made by pictogram factory Icons8. Lunacy runs smoothly while being completely free. There’s even a portable version.

Sketch: Great Tool, If it Wasn’t For This One Problem

Sketch by Bohemian Coding is a vector editor that has become an everyday tool for many web developers, replacing Adobe Illustrator. The newcomer’s strong focus on web developer needs is likely to be the main reason for its popularity. The subscription constraint as placed by Adobe as a factor probably is not to be underestimated either.

It could all be so easy if Sketch wasn’t available exclusively for macOS. This excludes a large share of the design community. The operators of the pictogram manufactory Icons8 did not want to accept that lack and created a viewer.

Lunacy Opens Sketch Files Under Windows

Using this tool, called Lunacy, you can at least open Sketch files. Advanced features are already being developed. You can copy the CSS for individual objects, though. The same goes for text.

As we can see from different comparison screenshots, the Icons8 team proves that display under Windows is very close to the macOS original. Differences are mostly based on the different display configuration of the two operating systems.

Lunacy is a software that is available for free download and use. Keep in mind that this is an alpha version. In my tests, it crashed occasionally, but it worked correctly for the most part.

When installing Lunacy on your Windows computer, you can directly associate the file extension .sketch with Lunacy. The installation is not necessarily required, however. Icons8 also provide a portable version that functions autonomously from within an Exe file.

Lunacy in Action

Icons8: Symbol Forge With Giant Supply

Generally, the entire pictogram range of Icons8 is completely free to use as long as you can settle for a size limit of 100 x 100 pixels in the PNG file format, and if you are willing to properly link Icons8 every time.

Affinity Designer has quickly built a formidable reputation as the fastest, smoothest, most precise professional graphic design app available. A coveted Apple Design Award, and thousands of 5 star customer reviews on the Mac App Store are testament to that.

1. The complete package

Affinity Designer is a fully-fledged professional graphic design application, not a one trick pony. This means it’s packed with all the tools necessary for end-to-end production of UI – from initial concepts to the creation of every asset to final device ready output.

Fully Featured

Including all the tools you need in a professional vector design app, carefully considered and meticulously developed for designers like you.

Fast

Watch all your adjustments, effects, transformations and brushes take effect in real time, with pan and zoom at up to 60fps, no matter how large the project.

Accurate

Affinity Designer boasts the incredible ability to zoom in by more than 1 million per cent, and tools with the precision to match.

Compatible

Integrates easily into your familiar workflow in any colour space, with the best PSD import engine and full support for SVG, EPS, PDF, PDF/X and FH files.

2. Symbols taken to another level

New in v1.5, the Symbols feature allows you to have multiple instances of the same object, where editing one object will change all versions simultaneously. But it’s not as simple as that – Affinity Designer offers the most powerful toolset available for control and management of your symbols.

Nested Symbols

Nested Symbols lets you build up intricate designs by using unlimited levels of symbols within symbols. At the same time, it keeps your workflow organised and manageable even with the most complicated work.

In place, real time editing

Edit in place on a document and the changes will be updated instantaneously, in real time on every version. So when you’re designing for different devices, you can see immediately how different versions are going to look.

Unlimited versions

Use attribute sync to attach or detach symbol properties allowing for customization of individual instances of your symbol. Whether it’s color, text, shape, size, stroke or effect, you maintain total control over which properties are shared and which of them stay unique.

3. Designs that respond

The Constraints feature, new in v1.5, delivers the ability to control the position or size of an object relative to its container, making it possible to create reusable elements which perform in a pseudo-responsive fashion.

An invaluable addition when working on different device sizes or for responsive web design, it’s another Affinity Designer feature engineered to make your creative process as smooth as possible.

4. Perfect pixels

One of the standout features of Affinity Designer is the seamless way in which it enables you to work with both vectors and pixels interchangeably in the same document. This completely removes the frustration of switching apps – your workflow is covered end-to-end.

Comprehensive pixel editing tools

Our Pixel Persona allows you to switch to working with pixels on the same document at a single click and boasts an eye-popping array of selection tools and brushes to inspire raster creativity.

Real-time pixel preview

Perfection is assured by viewing your work in pixel preview mode. This allows you to view vectors in both standard and retina resolution, giving you a completely live view of how your design will export.

5. Amazing effects

Affinity Designer’s non-destructive workflow mean you can refine and polish your UI elements with customizable layer effects such as blurring, glows and drop shadows. Any combination of different effects, fills and strokes can be saved as styles too to quickly apply to other objects.

6. Total precision

Full control over your grids and snapping options is one of the features which continually wows users of Affinity Designer.

Alignment is easy with customizable grids and v1.5 now offers instant live feedback making it a breeze to guarantee the precision of your design.

What’s more, the Force Pixel Alignment snapping option is a treat for UI and web design, and the ability to save your favorite snapping configurations as presets is a huge time saver.

7. Advanced typography

Whether you want to add eye-catching text for headlines or flow text along a curve, the full range of professional typography tools is baked into Affinity Designer. You have full control over all properties like kerning, leading and tracking, and all attributes can be saved to text styles to be re-used and edited instantly across your entire design.

8. Asset management

Affinity Designer’s new asset management panel is another key element of a smoother workflow. It couldn’t be simpler – just drag and drop items into, or out of, the panel for easy access when you need them. Build up full galleries of objects, organized in your own folder structure, making them instantly available whatever project you are working on.

9. Huge documents, zero lag

Affinity Designer has the most advanced memory management system available. Whether you are working on huge retina website mock-ups, or a project with hundreds of artboards, you can still pan and zoom at 60 fps, with all edits and adjustments happening in real time with no lag.

10. Powerful export

Our dedicated Export persona puts everything you need for image export into one complete workspace. It’s never been easier to export all your elements in any size, resolution, and format, ideal when you’re creating designs for different display types. What’s more in v1.5 you can specify different folder locations for different elements in the same document, so re-exporting even the most complicated of projects is now a one click process. You can even automatically generate Xcode assets and Spine JSON from your designs to improve your workflow.

11. Outline View

Instantly switch to a wireframe view of your design, even viewing in split screen if you wish. It’s really powerful way to see all the elements across all layers in your project and adds incredible efficiency to selecting the right target object in complicated multi-layered designs.

12. Artboard-aware embedded document editing

One of the most impressive features of Affinity Designer is the ability to edit embedded documents in real time – seeing changes reflected instantly in your mock-up view.

Version 1.5 adds the much-requested feature of having artboard-aware embedded documents. This means you can now instantly switch between different screens or pages to see how every element of your design will look.

13. Unlimited undo

We’ve got your back. Affinity Designer’s rich history means you can undo, or redo, more than 8,000 steps. In fact, the savable, shared history allows you to undo steps later even if you’re on a different machine, or working in a different Affinity app.

For extra peace of mind, Snapshots allows you to store documents at different stages, while the unobtrusive Auto Save protects you against unexpected interruptions.

14. Free UI kit worth $58

Sergey Azovskiy’s incredible Grade UI kit is included for free with every purchase of Affinity Designer. Featuring 10 categories, 100+ icons, and an incredible 1000+ elements, this UI kit is something every creative should tuck away in their toolbox. Bought separately, it’s worth more than you pay for the app!

Is there a web developer, or ambitioned page owner that still doesn’t know the free vector graphic project Inkscape? Inkscape is the vector counterpart to the free pixel editor Gimp and has been established for years now. In the past few days, the current version 0.92 with plenty of changes has been released after two years of development.

SVG and CSS: Inkscape is Moving Closer Towards the Standard

Inkscape is distributed under the GPL, making it an open source software to the core. It’s not developed by a company but is kept alive by free contributions of many voluntary developers. For years now, the commitment has been on an oddly high level.

Financed by donations, the project is able to send out a representative to the W3C SVG Working Group. This is the council that is supposed to further develop the standard Scalable Vector Graphics (SVG). This way, some new ideas out of Inkscape are considered for the expansion of SVG, which makes the project especially attractive for developers. As to be expected, the standard file format of Inkscape is SVG.

Standards compliance is a particular priority of Inkscape. To meet the CSS standard, for example, the default resolution was raised from 90 to 96 dpi. The software provides different conversion options when trying to open an older Inkscape file.

Overall, the developers have focused on correctly displaying many SVG2, and CSS3 elements within the program. However, the user interface doesn’t allow you to alter all of these elements. Under Inkscape 0.92, the usage of complex mesh gradients doesn’t require any tricks anymore but is provided by default.

Inkscape is Still Available for Windows, macOS, and Linux

Designers will be especially happy about the new path effects, which allow for very creative designs via interactive deformations. Watch the following video to get an overview of the new functions:

As usual, Inscape 0.92 is available for the three dominant operating systems Windows, macOS, and Linux. Since we’re talking about open source, you can also compile your own build, but you don’t have to. The developers aimed for an easy distribution and brought you these installation packages. Under Linux, you’ll usually get to the current Inkscape using your default package manager.

If you want to gather detailed information on the current version’s feature set, read the entire changelog. The official announcement can be found here.