How does a professional UI/UX designer's workflow look like in reality and how it shoud look like in the ideal world? What problems still exist today? What would you change?
What is that process, where do you start from, which step is next, and which one is the last.
Do you do any research/analysis at the beginning of any new work?
Which devices and apps are used? Tablets with pencils? Just a paper? Drawing with mouse?
What tools should be used today? Photoshop, Illustrator, Sketch, with what plugins, Affinity Designer, GIMP, Inkscape, etc... Mac or Windows? Or just design, and write code right in the browser yourself?
Any patterns, frameworks, methodologies used?
What about collaboration? Google Drive, Marvel, InVision, what else, why?
Version control/Git for designers, is it possible, does it work?
Do you create UI kits? At the beginning, at the end?
Do pixels matter in the age of responsive design and thousands of devices and screen sizes?
Do you write instructions for engineers? How they should animate, change on hover, min/max container sizes, breakpoints, etc.
I believe it's about building design systems, collaborate with other designers with shared UI libraries. Of course, using software like Sketch. You can check my course where I share my UI Design Workflow by creating an iOS app for iPhone X. This includes topics above udemy.com/optimization-of-ui-design-workflow-in-s…
Hello @mevrael,
I've tried to answer all your questions to the best of my knowledge below:
Sadly, there's no universal design process. A designer's process can change on a project-to-project or even day-to-day basis.
My current design process:
Brief ⟶ Research ⟶ Wireframes ⟶ Prototype ⟶ Review ⟶ Testing ⟶ Refine
The ideal UI/UX design process would involve going into depth at each stage. However, in most cases, time and money are constraints that make this challenging.
See also: Shaan Suleman's response to Do you even "User Interface Design"? - Hashnode
Brief:
Start by understanding what your client/consumer wants and ask as many questions as you can. There's nothing wrong in asking questions. This way you eliminate most back-and-forth sessions.
Research:
One of the most important stages in UI/UX design. Some excellent sources of UI/UX information include:
Wireframes:
Start with low-fidelity wireframes then move to medium/high-fidelity wireframes. Low-fidelity is all about rapid prototyping. It doesn't have to be perfect or aligned to the pixel. Just focus on creating basic layouts that may work. Learn more here.
Prototype:
Once you've finalized on a design, prototype the interactions. Static images cannot capture animations and micro-interactions. Try and prototype or at least think about/visualize how the users will use the product. This will help the developer understand the requirements and make his/her life a little easier.
Image source: Yalantis - https://goo.gl/6fb3PU
Review:
After you're done with the design, review it. You can even test the design yourself and find areas of intervention where you can improve the design and experience.
Test:
Testing is crucial to making any product work. It is best to get participants to user test with. Ask friends, family, neighbors, colleagues, and anyone else that could participate in user testing your product/design. Don't heavily rely on your targeted demographic if time and finances are a constraint.
Refine:
Final refinements and finishing touches to create a polished product.
You could use any system that runs on either Mac OS or Windows. I personally prefer using a MacBook because of it's display color accuracy and ease-of-use. Both have their advantages and disadvantages.
I don't draw on paper as much anymore because I find it easier to prototype on my system. However, if you're starting out then I suggest trying to draw on paper first before moving on to software.
Tools I use on a daily basis include:
Primary tools:
https://www.sketchapp.com
http://principleformac.com/
https://www.flinto.com/mac
http://mindnode.com/
https://zeplin.io/
Other tools:
https://getkap.co/
http://www.svgs.us
There are many design frameworks out there to use. At Hashnode, we follow Google's Material Design Framework as much as we can. Following a framework can be useful as it helps create a consistent experience for the user. That being said, if you're an experienced designer, try working on creating your own framework or UI kit for projects you work on.
Resources that could be useful to you:
https://material.google.com/
https://yeun.github.io/open-color/
http://semantic-ui.com/
Slack:
Slack App is a great collaborative tool for teams. It's one of the most popular team messaging apps and you can send files, embed code, and even call people. Additionally, Slack has a large library of third-party integrations.
Google Drive:
Google Drive is also a great tool for collaboration but I find that there is a lot of friction. I use it more for backups since it's reliable and trustworthy.
Zeplin:
Zeplin is a great tool for designers and developers to collaborate. It allows you to export your .Sketch documents into full interactive Spec Sheets and share them. This way, the developer knows specifics like font sizes, color values, padding, etc.
See also: Shaan Suleman's response to How can multiple designers, working on the same design project, stay in sync?
I haven't used one but you could see the Git Sketch Plugin - http://mathieudutour.github.io/git-sketch-plugin/
There are many existing UI kits you can use. See https://www.sketchappsources.com/category/ui.html
Creating a UI kit from scratch could be challenging but it is certainly rewarding. Try and follow conventions, look at as many examples as you can and then proceed. You can begin working on a simple UI kit for your product once you move on to high-fidelity wireframes.
Pixels will always continue to hold high importance as long as devices continue to use pixels for their displays. I don't really know what the future holds in terms of screen display units but for now, pixels are still the guiding unit for any interface intended for screens.
For print designers, they hold less importance since millimeters, inches, and centimeters are their primary measurement units.
Some of the tools mentioned above (Zeplin, Principle, Slack, and Google Drive) will make your life easier when explaining your ideas/design with engineers. If you work closely with teammates then you could just explain it to them in person but if you work remotely then these tools along with others like Skype can help significantly.