UI Tutorial: How To Place Your UI Design In A Mock-up (with Photoshop)

This is my first YouTube video and I would be very thankful if you guys supported me by Subscribing or liking my video!

I frequently get questions from friends and on Instagram on how I place my designs in Mock-ups (in devices like iPhones and Laptops and different environments). It’s very easy so I wanted to share how I do it in a short video.

Hope you guys liked it and that it was helpful!

Advertisements

Affinity Designer on the iPad Pro 2018

This post will be a short review of doing UI design with the Affinity Designer on the iPad Pro 2018 (12.9 inch). This is a first impression post so I’ll probably make additional posts in the future when I learn about more functionalities.

What is Affinity Designer?

“Affinity Designer is a vector graphics editor developed by Serif for macOS, iOS, and Microsoft Windows. It is part of the “Affinity trinity” alongside Affinity Photo and the yet-to-be-released Affinity Publisher. Affinity Designer is available for purchase in the Mac App Store, iOS App Store, and the Microsoft Store.” – From Wikipedia

In short, Affinity Designers is a software similar to Illustrator that allows the user to create vector and pixel graphics. It’s available for both desktop and tablet.

Affinity Designer for iPad Pro

There aren’t many good softwares out there yet for designing with iPad Pro, especially not vector based ones. It’s not odd since it wasn’t long ago iPad + a pencil became a thing. There are some big ones like Procreate and Sketchbook which are more optimized for pixel graphics (drawings) than vector graphics (illustrations and UI design).

Affinity Designer is one of the biggest ones intended for tablet use and optimized for vector graphics which is why I choose it.

UI Design + Affinity Designer

Affinity Designer features some of the most important functions that’s needed to do proper UI design:

  • Create vector shapes
  • Edit in detail (corner radius, colors, borders etc)
  • Work in layers
  • Group elements
  • Make re-usable components
  • Easy grids and alignment systems
  • UI libraries for quicker mockups
  • Multiple Artboards in one document

These functions are already more than what most other applications offer. For me, it’s great for doing static UI design screens and explore with different design elements.

But, it’s not enough for me to completely stop using the computer and only design on the iPad Pro. The reason is simple: Not this one, nor any other app on App Store today enables UI designers to create any interactive components (which is so important in enjoyable designs!). I want to be able to prototype between screens and do simple animations!

Summary

This is a GREAT application for UI design on the iPad Pro featuring multiple artboards in one document, creating groups and components, working in layers, offers auto-snap and alignments and a UI library that you can add your own elements to.

I would even say that it’s the best one I’ve tried up to date. But it still lacks some basic functionalities like prototyping between screens and doing interaction design, which I would require before switching completely from the computer.

I hope you found this post helpful! Leave a comment to share any thoughts

I posted a video on my Instagram of me using the UI library. Click here to see it.

Instagram: @wendy.design
https://www.instagram.com/wendy.design/

About me

My name is Wendy Zhou and I’m working as a UI & UX designer in Sweden. I’m also studying Cognitive Science at the University of Gothenburg and will have my B.Sc. degree in 2020.

My main areas of interest are UX/UI design, Interaction Design and Motion Graphics. I mainly work in Sketch, Figma and After Effects.

What I’m writing about

This website is a place where I’m going to share design tips, what I’m learning and what I’m working on. It’ll be a place where I summarize the things I post on the internet whether if it’s on Instagram, Dribbble or Youtube.

Say Hi!

I love to come in contact with other designers, creatives or simply people interested in these things. So don’t hesitate to send me a message or email me at: wendyzhou.design@gmail.com

Social Media

Instagram: @wendy.design 
https://www.instagram.com/wendy.design/

Dribbble: @wendydesign
https://dribbble.com/wendydesign

Task of 2019: To build my Personal Brand online

Or at least try. And the above figure will be my first personal logo.

I’ve been interested by the idea of freelancing as a designer for the longest time and one of the first things I read about was the skill to create your personal brand and marketing yourself through social medias. Running a blog, an Instagram, Dribbble and Youtube channel. Attracting a community and following to be able to influence other designers around the world.

So I thought, why not? I should try. It’s now one of my goals for 2019 (along with starting a small company). Even if I don’t end up wanting to freelance full-time I’ll still probably appreciate being able to share my designs to many people and being able to reach out and talk to designers situated around the world.

I started posting my designs on Instagram three months ago and surprisingly I’ve already reached 1000 followers and I’m getting multiple DM’s every day already by other designers or aspiring ones. The community is incredibly helpful and consists of so many driven and ambitious people that I’m more motivated than ever to be like them.

I’ll try to keep this blog updated as my journey moves on…

Front-end dev and UX/UI designer

I have thought much about what I want to focus on within web design. Many articles say that UX/UI designers don’t need to know any programming/coding at all, but others say that it is meriting to know some coding on top of design. All in all though, UX, UI and front-end dev all go hand in hand.

And since I do enjoy learning and creating websites using HTML/CSS & Javascript I have come to the realisation that I want to learn it too, as good as I possibly can. That way I can  apply for both front-end and UX design jobs. I am very lucky to have found something that I’m passionate about, but that I also can work with.

The design of everyday things

I received my books yesterday and have now started reading The design of everyday things by Don Norman. This book is one of the most famous and recommended book about UX design and interaction design. Don Norman has studied cognitive science, which is exactly what I’m going to university for this autumn so hopefully this book will even give me some more insight about what I will be learning.

Updates will come when I’ve finished the book 🙂

Codecademy – Javascript

I finished the course on Codecademy yesterday for learning Javascript and I think that I have a fairly good understanding of how the basics of Javascript works now. The next thing I will do is to finish my book on Javascript by John Duckett and to also try to code more website where I use Javascript.

Hopefully it will continue to go as well as it has now and that I will be able to do really cool stuff with it in a few months time!