behance behance twitter twitter facebook facebook
Design & Experience

October’s Kool Design Topics

Design is a profession and a practice that is always changing, always in the move, always re-shaping itself to fit the changing reality and the new needs that comes with it. As digital design is growing as a profession, feels like 2020 is a turning point, or better to say a peak in how it is being perceived in the popular culture.

post image

During this time of COVID-19 we learned to appreciate remote working and collaboration, we heavily use social media to connect and stay updated on what’s happening in the world. We buy online and we engage with online experiences to do so. So we can definitely say that digital or UX/UI Design has become this something we all notice now and learn to appreciate, in the same way we learned to appreciate good architecture design or fashion design, decades ago.

This month is full of these new and not so new but need to put a light on subjects in design, so this post is going to highlight and cover in short some of the things that caught our attention in October.

So we can definitely say that digital or UX/UI Design has become this something we all notice now and learn to appreciate, in the same way we learned to appreciate good architecture design or fashion design, decades ago.

Design Systems. How and when to do it?

Design System is apparently the new buzz word among designers and professionals who work around product and product design (i.e Product Managers, Front developers etc.) It’s part of a big transition that is happening as the whole design industry becoming digitally lead. As we make the full move from designing fixed products like printed materials, we need a way to be more mindful and strategic in the way we approach our craft. This Is how the Design System term was born.

So if you’re not the type that is jumping on trends as they come, here’s a brief non-binding outlook on how design system that fit our needs can be created at any point on time on our project.

Create order and ease of use instead of chaos

  • If you have just started creating a new UI to a project, it might be better to withhold creating a design system. You may not need it just yet, as in this time point you’re still iterating and exploring, finding a tone to your product – so Design System might be limiting more then adding at this point.
  • A good time to create a Design System will be a couple of months in the project, where you can take a macro view on all the screens, pages and iterations you’ve made and then find the core assets – and start building from it. You may also find that there are elements in the design that should be unified and consolidated, so this way your Design System will end to be more simple, lean, and exact to your and to the product and product team needs.

The best way to kickstart your design system is starting small, and maybe use another kit as a reference to help you build confines and structure to your file. Here is a solid example to start with, for Adobe XD Responsive UI Kit for XD

Design System With Developers

Both can benefit from lay outing down a solid design system.

  • Designers can work more freely and focus on the experience they are planning from a more functional place and then just pull the components they need to work with at that moment, and edit or manipulate it if there’s a need.
  • Developers already structure their code in a way that by design is built in a very ordered manner into components, whether the technology they work with.  So once a Design System is planned properly from the design stage – everyone can benefit from it. While this is the general rational of how this should be done, here is by far the most impressive, viable approach to Design Systems by Adobe XD’s integration with Visual Studio Code.

Visual Studio Integration to XD seems like the way to go to make this collaboration work.

Apple’s new iPhone 12 and iOS 14

If you notice carefully to Apple and how they execute on their products and keep developing and improving, you’ll find there’s a pattern to how they do it. It is obviously a topic that can covered  broadly on its own, but two of the things that are happening at apple is

  • They innovate their products in a cycle form (always creating something new and reviving something from the past, but in an improved version that fits the current time, similar to what’s happening in the fashion design world). An example for it is the new iPhone 12 that is really much similar in terms of the physical design qualities to it’s ancestor the iPhone 5, probably with improvements and an update screen size and look that fits today’s time.
  • Features are always ‘leaking’ or ‘flowing’ from one product to another, both in regard to technological advancements or even UI design changes. You can see it in the way that the iOS UI design is inspiring changes in MacOS Versions, and also for a more technological example the magnetic charger that was tested and born with the iWatch and found it’s way to other Apple’s products as the iPods and now the new iPhone 12.

Design Tools & Software. Which one to choose?

As been already said, the tools we use are just pipelines to the ideas we have in our minds, so it actually doesn’t really matters which one you go for. Well, that’s true but as designers we also know that there’s subtle differences in our own experiences using different apps or tools, some of that can create a significant impact on our work, can make us more creative and joyful or even more efficient and save ourselves time and hustle.

Currently there are four players in this field of UX/UI prototyping and design tools which are Sketch, Adobe XD, Figma and Photoshop which the latter is also the old-fashioned one. Seems like Sketch is having a declining in it’s attention it gets and probably also in the mass of designers using it. Photoshop is the most ancient tool from these four, and also objectively has the most profound and developed graphic engine which makes it better as a software in general, but it still lacks the exact support designers need these days to develop their prototypes so it might also become very not useful. So that leaves Adobe XD and Figma in this battle.

Photoshop is the most ancient tool from these four, and also objectively has the most profound and developed graphic engine which makes it better as a software in general, but it still lacks the exact support designers need these days to develop their prototypes.

Why Adobe XD?

Adobe XD basically started as Adobe’s attempt to present an alternative to Sketch a couple yers ago. Its first version was very basic and minimalistic which makes it also very simple to use and adopt by new designers. Seems like they kept with the simplicity approach where even now, as a much more developed software with more complex and advanced features, it still feels very simple and intuitive.

 

Adobe XD’s Features and Benefits

  • It’s a native app that is installed on your OS so accessibility and ease of use are there by design. Feels lightweight.
  • Supports art-boards and enabling you to create a working prototype with transitions between screens, animations and hover effects that really help bring your design to life and actually mimic a real app use
  • Developed mechanism to build your design based on components, which makes it easier to create a design system to your application or product
  • Nice way to share your ready made designs to either review by stake holders or preparing it for development by engineers
  • Cloud support and collaboration is something that is still on the works at Adobe, but it exists in an initial phase.

Why Figma?

One big flaw that Adobe XD has is that a lot of more specific graphic edits can not be done there and should engage either Photoshop (for Image work) or Illustrator for more specific vector work – illustrations and icons, hopefully to see it being developed and shaped into a more mature tool that can have these abilities as well.

Figma’s Feature and Benefits

  • It’s a web based app, so while you can still download an app to your OS it does run on web technology – for better or probably for worse. It does frankly feels lightweight, and another benefit is that you can edit your work from remote on any other computer which is isn’t your own specifically.
  • Supports art-boards and enabling you to create a working prototype with transitions between screens, animations and hover effects that really help bring your design to life and actually mimic a real app use
  • Developed mechanism to build your design based on components, which makes it easier to create a design system to your application or product
  • As this tool is based on a web app, having the ability to collaborate on your designs with team mates and decision makers is very natural. This is definitely a feature that makes Figma unique in that sense of remote working and collaborative work.
  • Developed vector drawing and editing capabilities

Color trends for 2021

As we about to finally end 2020, 2021 is coming at us and with it a new direction for colour and specifically the chosen Pantone colour of 2021 which is Teal.

Warm hues and bright contrasted colours

This trend is basically a mixture of our natural need to use more cozy colours that builds a warm, home-like atmosphere and with it having a more functional driven need to highlight and make focal points with bright pop colours.

This trends also suggests building your color scheme in a more gradual way where you pick your main color tone and then build around It a set of hues – darker and brighter. We can see companies today already adopt some of these, and also another thing that is happening is that companies want to break out from their own color palettes, specifically in their marketing materials (ads & social media posts) so we can also notice a blend between a company’s known and defined color pallets and a use of new color tones that enrich and in a way flatters a concept or a piece of creative.

 

See how this color palette works outside of the digital world in interior design here, and also here are some nice examples of web design that are inspired by this light color blend. Lilo Social, Fellow App, Earmark, Slite.

The SaaS of the month — Spendesk

This month we came across some amazing B2B and SaaS companies websites design, and Spendesk was one of the highlights that we encountered. Really slick color tone pickings, a purple and light cyan that works really well together. This splash of color in the first fold leaves it mark on you so that does make their brand and website design memorable and unique. Great typography work, and a really good use of illustrations, and the way they string it along with some previews of screens and features from their core product.

Spendesk.com Homepage Design