Thread
Popular posts
Hello @mevrael,
I've tried to answer all your questions to the best of my knowledge below:
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?
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
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?
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:
- Nielsen Norman Group - https://www.nngroup.com/
- UXBooth - http://www.uxbooth.com/
- UX Movement - http://uxmovement.com/
- Usabilla - http://blog.usabilla.com/
Image source: Savvy Apps - https://goo.gl/2h7n9k
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.
Image source: Web Design Ledger - https://goo.gl/2hjFIp
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.
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?
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:
- Sketch - Powerful design tool for prototyping and designing interfaces
https://www.sketchapp.com- [Plugin] Sketch Measure - https://github.com/utom/sketch-measure
- [Plugin] Zeplin - https://zeplin.io/
- [Plugin] Artboard Tricks - github.com/romannurik/Sketch-ArtboardTricks
- [Plugin] Craft - https://www.invisionapp.com/craft
Image source - https://designcode.io/sketch
- Principle - Prototyping tool with animations and micro-interactions
http://principleformac.com/ - Flinto - Prototyping tool with animations and micro-interactions
https://www.flinto.com/mac - Mindnode - Mindmapping tool
http://mindnode.com/ - Zeplin - Spec sheet collaboration tool for designers and developers
https://zeplin.io/
Other tools:
- Kap - Open-source screen recorder
https://getkap.co/ - SVGsus - SVG icon library application to store all your icons and easily use them
http://www.svgs.us
Any patterns, frameworks, methodologies used?
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:
- Google Material Design Framework
https://material.google.com/ - OpenColor Framework
https://yeun.github.io/open-color/ - Semantic UI
http://semantic-ui.com/
What about collaboration? Google Drive, Marvel, InVision, what else, why?
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.
Image source: Quartz - http://bit.ly/2dm1zXp
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.
Image source: Zeplin - zeplin.io
Version control/Git for designers, is it possible, does it work?
I haven't used one but you could see the Git Sketch Plugin - http://mathieudutour.github.io/git-sketch-plugin/
Do you create UI kits? At the beginning, at the end?
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.
Do pixels matter in the age of responsive design and thousands of devices and screen sizes?
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.
Do you write instructions for engineers? How they should animate, change on hover, min/max container sizes, breakpoints, etc.
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.