archive page

Become a Better Designer With App Design Tips

As a UX Consultant and designer, I’ve had this passion to share insights into my experience throughout multiple projects. That’s what lead me to create the website App Design Tips. Includes a blog and videos featuring tips using some of the latest design tools like Figma, Sketch, Adobe XD, and InVision.

I also feature design best practices and case studies to help you out on your next project.

If you’re in the mood to join one of my design courses, you can find them here.

Featuring Online UI/UX Design Courses

Figma Online Course

Learn Figma. The online collaborative design tool that makes it easy to design and prototype with others in real time. Think Google Docs for design.

Adobe XD Online Course

Adobe announced Adobe Experience Design just over a year ago as a round trip solution for designing and prototyping. If you already have the adobe Creative Cloud subscription, this course will help you get up to speed on adding this new tool to your design workflow.

InVision Studio Online Course

The newest of all design tools available. InVision Studio has the best prototyping features on the market making your next designed app or website have an animated interactive look and feel that can fool even the most techy users.

What was announced at Adobe Max

The 2017 Adobe Max was jam packed with new announcements across dozens of design apps. You will see many news articles surrounding each of these new tools and features and creative ways to use them, but this article will give you a brief overview of what changes they announced at their live keynote event. And here they are:

What’s new in Adobe Illustrator

  • 30% faster
  • Now supports 1000 artboards compared to 100 previously
  • Variable font control. You can change the weight, width, serif height, and more for any font
  • Puppet warp for vector graphics. Instead of selecting anchor points of an arm of a character, for example, and trying to move and rotate the arm, you can use the puppet warp to define pivot points and change the position more naturally.

Learn more about Adobe Illustrator

What’s new in Adobe Capture

  • Type capture. You can now take pictures of fonts and adobe type will give you a list of typekit fonts that are similar

Learn more about Adobe Capture

What’s new in adobe stock

  • Reverse image search. Drop a picture in the search area and adobe stock will find thousands of similar images that you can choose from.
  • Greater control in filtering searches of images. Filter by things like depth of field and vivid color
  • Dynamic filters. If you’re searching for pictures of stars, for example, you can filter the star density and size.

Learn more about adobe stock

What’s new in Adobe photoshop Sketch

  • You can use all photoshop brushes in sketch now. All brushes are synced through Adobe CC
  • Timelapse. With one tap, create a video timelapse from drawing. Share video to social media.

Learn more about Adobe Photoshop Sketch

What’s new in Adobe Photoshop

  • Layer styles and Libraries. Add layer styles to a shared library to use across multiple projects.
  • Microsoft Surface Dial support. Use Microsoft’s hardware dial to control settings.
  • New Pen Curvature tool. Click around to make anchor points as usual but when you click a 3rd point, the Pen Curvature tool will interpolate the curve from these 3 curves to make curves more natural. Points remain entirely editable after the fact.
  • Finding brushes is a problem of the past. New brush organization. Rename folders and see brush previews in each folder.
  • Brush Smoothing. If your brushing is shaky or the beginning and end of your brush trail has unwanted curves, brush smoothing will let you control how smooth you want that path and if you want to remove unwanted whips at the beginning or end of your brush path.

Learn more about Adobe Photoshop

What’s new in Adobe XD CC

  • Adobe XD is officially out of Beta. It is now 1.0
  • Support for CC libraries built into app. Drag media created in photoshop or other adobe products and drag directly into Adobe XD. If you make a change to that image in photoshop, just save and the changes are live in Adobe XD.
  • Assets Panel. Centralized place to keep symbols, character styles, and color swatches. You can update any of these and changes reflect across entire project.

Learn more about Adobe XD CC

Coming Soon in Adobe XD CC

  • Collaboration Features. This includes collaboration and handoff for designer and developer workflow.

What’s new in Adobe Dimension (Formerly Project Felix)

  • Out of beta and available to use right now.
  • Extend your designs on to physical products in 3D.
  • Lighting, perspective, camera, material is all editable in a scene.
  • Thousands of stock assets in Adobe Stock optimized for adobe dimension. This means you can download a bag of chips or a billboard to place your design on.
  • Add patterns on objects
  • Drag graphics onto objects, resize, reposition and preview live.
  • Add custom photographs in the background. When you do this, it detects environmental light, camera perspective and ground plane of the background image and places your objects contextually in the scene to automatically add more realism.
  • Render out a photoshop file for further editing after you’re done.
  • Multiple layers in photoshop. Select mask components to change hues, saturation, etc.

Learn more about Adobe Dimension

What’s new in Adobe Spark

  • New premium features.
  • Custom brand your posts, videos, or pages. Click “Add brand” button and you can add your logo, brand colors and fonts and it presents you with template themes to illustrate how your brand will look on future content.
  • New brand manager. When you create multiple brands, you can update any Spark Page, Spark Post, or Spark Video to use any of the custom brands.
  • Add alternate versions of logos, secondary colors and fonts to a custom brand.

Learn more about Adobe Spark

What’s new in Lightroom CC

  • Complete and seamless photography experience across desktop, mobile, and web.
  • All images sync on cloud any changes are instantly saved on the cloud
  • Smart Keyword searches with sense. No need to add your own keywords, you can search for cats, horses, cars that are in the desert, etc. It will find them all.
  • Local adjustments on all devices. Use the graduated, brush, or radial edits tools across any device.
  • New sharing settings. Share instantly to adobe portfolio or with colleagues or friends.

Learn more about Lightroom CC

What’s new in Premier Pro

  • Responsive design positioning. Pin layers to other layers or the video frame. When the layer size or video frame changes, the layers remain in positions relative to where they are pinned.
  • Responsive design time. Title or animation sequences can preserve fixed timing at the beginning and end of the timeline even when you expand the length of the animation. The animations in between will still expand or contract.
  • Motion graphics templates in Adobe Stock. Access thousands of motion graphics templates with complete editability.
  • 3D video – Adjust content like text or graphics to be flat or spherical in environment with features like VR plane to sphere effect.
  • 360 VR transitions. Add transitions like Lightrays and light leaks and the view frame will transition instead of the VR entire frame.
  • Editors can now edit with a headset with spatial and sonic audio experience.

Learn more about Premier Pro

What’s new in Character Animator CC

  • Now out of beta

Learn more about Character Animator

What’s new with Adobe Sensei

Adobe sensei is an artificial intelligence engine that works seamlessly across all CC apps. It’s meant to amplify human intelligence, not replace it.

Some of the features announced:

  • Continually learns from hundreds of millions of assets.
  • Purpose built with deep understanding of design domains.

  • Everyone is training sensei with their cloud content
  • Computational creativity. Trains itself on video, illustrations, designs.
  • Experience intelligence. Brands and businesses can drive measurement to all experiences created.
  • Content – Discovers meaning from content.
  • Example uses of Sensei: Face tracking in character animator, font recognition, Anticipating next tools before you search for it.
  • Sensei seamlessly integrates in context with your workstyle.

 

Sneak Peek of the future of Sensei

Natural interaction

  • Blue dot within adobe Apps will represent Sensei suggestions.
  • As you drop an image, sensei will pop up suggesting tags and recognizing objects within an image.
  • Ask sensei questions in photoshop like “find some images based on my sketch” Sensei will search Adobe Stock to find useful assets.

Content Intelligence

  • Searches through hundreds of millions of images.
  • Sensei can suggest backgrounds from stock. Sensei filters through hundreds of millions of other images providing context aware search filters. If you have an image of stars, you can search for star density and size as a filter option.
  • Take images of people and drop them in. Sensei suggests other versions from your photoshoot that may work better. Filter your photographs by whether they look to the left or right, if it shows her face, or space suit, etc.
  • Sensei suggests things like smart masking photos. One click and your image is automatically masked.

Design intelligence

  • Learns from styles you develop and suggests them in the future. You can select text, type in a title and you see some treatments you’ve used in past projects to click and apply.
  • In XD if you have an app you’ve created, use creative assistant to change assets or styles.
  • Talk to sensei and say things like “Create iphone 8 layouts of my artboards” and sensei will suggest a re-layout for the iPhone that you can click and drag onto your artboard. Sensei also wires the mobile app in prototype saving tons of work.

Creative Graph

  • You can interact with intelligent decisions. In this graph you can revisit what an image would have looked like if you made other intelligent decisions.. In the current flow that you’ve gone through. You can change characters, etc after your design is finalized. Very versatile.

Learn more about Adobe Sensei

Why InVision and Sketch might get a divorce: Invision Studio

If you’ve spent any time in the design world, you should be familiar with InVision and the important role it plays with prototyping apps. But until now, this is all they were. A prototyping tool.

Sketch and InVision have had a great marriage for years. Sketch has been a powerful design tool that made designers jobs easier, funner, and more dynamic. When InVision came along, they paired up with Sketch to bring a lightweight and fast prototyping solution to sketch designers. This made the users of these 2 products very happy. Creating many wonderful design and prototyping solutions.

InVision Brings Craft to the marriage

InVision then announced Craft which strengthened their marriage tremendously. So much so that InVision decided to be much more exclusive with Sketch and removed cloud syncing features making it harder for other design tools like Figma and Adobe XD to utilize the power of InVision.

So what’s the problem now?

Well, this morning, InVision announced a new screen design tool, InVision Studio, which will be a direct competitor to Sketch, Figma, and Adobe XD (which just updated to 1.0 today, also). This move is going to convert many InVision / Sketch users directly to InVision as it will be an all-in-one design/prototyping solution.

“But InVision will still make Craft better for sketch over time”, you say?

Well, not necessarily true. If they receive traction with their new design tool and their users demand increased features, their priority will be with InVision Studio. Sure, they might continue improving craft for a while but I believe the day will come where Sketch and InVision will go toe to toe battling to steal market share from each other and when InVision needs that edge, all they have to do is announce they will no longer be updating Craft or InVision to fit 3rd party design programs.

Sure, their marriage might last another couple of years, but I for one, don’t see this going too much longer than that. If Sketch is smart and wants to save themselves from getting their heart broken, I believe it’s in their best interest to design a built in prototyping solution themselves before the big fall out with InVision. This is just one designer’s opinion.

Adobe XD Essential Training

Welcome to my brand new course, “Learn Adobe XD: UX Designing and Prototyping” where I teach you how to navigate around and use the tools of Adobe XD efficiently while also teaching you UX design best practices as we design and prototype an app together.

This course is normally $70 but to celebrate the launch, for a limited time, I am offering the course for only $10!

View course details and enroll here

What is Adobe XD?

Adobe XD is a brand new tool for UI/UX designers that gives you the power to design and prototype an entire app, all from one program. This is what makes adobe XD so powerful amongst other competitors. With eas you can switch between design and linking prorotypes to have an interactive design assembled within minutes of launching the app for the first time.

Course instructor

My name is Caleb, I’ve been a UX designer for over 7 years as I founded my company, brainspin. I’m also the founder of Salt Lake Designers. A local design community that I host to share design industry news, workshops and best practices.

Course pre-requisites

  • No prior UX/UI knowlege necessary. This course is built to teach you adobe XD as well as serve as an introduction into UX design. This means, this course services all skill levels.

Who should take this course?

  • Anyone brand new to UX design
  • Experienced designers wanting to learn Adobe XD

What you will learn?

  • How to efficiently use the tools in Adobe XD to create designs and prototypes with speed and ease.
  • Best practices on how to set up your project for rapid layout and graphic changes across the project.
  • How to share your designs and prototypes with commenting features for quick feedback.
  • How to design multiple artboards and prototype them during your design.

Adobe XD Curriculum

Getting started

  • Course Introduction
  • Using the exercise files

Section 2: Getting familiar with Adobe XD

  • The start screen
  • The interface
  • The menu
  • The tools panel
  • The properties panel
  • Using UI templates
  • The assets panel
  • Creating and using symbols
  • The layers panel
  • The prototype workspace
  • Using device preview
  • Sharing prototypes

Section 3: Creating your first project

  • Setting up your artboards and grids
  • Creating a wireframe
  • Designing a wireframe
  • Creating icons
  • Adding and formatting text
  • Using repeat grids
  • Working with color
  • Importing images
  • Designing a login screen
  • Creating a background blur
  • Prototyping your design
  • Testing your prototype

Section 4: Working with images and vectors

  • Importing assets
  • Masking images with a shape

Section 5: Creating reusable content

  • Using repeat grid to design a popup menu
  • Creating a custom color palette and color styles
  • Editing SVG imports

Section 6: Publishing your prototype and exporting assets for developer handoff

  • Using device preview to quickly discover and fix errors
  • Using desktop preview
  • Sharing and commenting on your prototype
  • Exporting assets for developer handoff

Section 7: Conclusion

  • Conclusion

RealAnatomy 2.0

Anatomical web application

RealAnatomy 2.0 was designed and developed as a supplemental web application. It is used alongside Wiley’s Human Anatomy and Physiology college books. The purpose of this web application is to serve as a virtual cadaver lab. The user is able to cut through layers of the human body and pinpoint specific structures and their meanings.

project-real-anatomy-website-development-sample-display

 

Brainspin Website Rebrand

The trends of web and digital designs are ever-changing. With that, we have decided it was time to modernize our website. Our beautiful edge-to-edge borderless design and fluid layout shapes to fit beautifully on the hundreds and even thousands of different screens out there reading our content.

Our new design

We hope you enjoy this new and more modern layout. Our fresh coat of colors has rebranded and prepared for the future of digital and web design.