1

I am new in UX world and just started my career. Anyway, I am working on UI for a new product and have to make a lot of screens in Photoshop, which will be used for developing in the same time. The whole idea is to make a screens for prototyping in Invision.

First screen is already finished and I made dashboard with top bar with left vertical menu and content area in center. And guys like it!

Developers in my team has decided to use Semantic UI framework and I have a issue to find Semantic UI spec on the web. There is a lot material about developing data tables but nothing about standards dimensions for rows, spacing check boxes etc. With other words my developer can build a tables in Semantic Framework but I can't design anything and he suppose to follow my design.

What I should do?

Does anybody know Semantic style guide or spec with standard dimensions for tables ?

I appreciate any help!

Regards Bane

closed as off-topic by Devin, maxathousand, locationunknown, Nick Groeneveld, Michael Lai Jul 2 '17 at 12:41

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Devin, maxathousand, locationunknown, Nick Groeneveld, Michael Lai
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Semantic UI is a hybrid. You can use predefined themes such as Material or Bootstrap, or make your own styles. Due to this hybrid approach, it will depend on what do you want to do. For example, you could just use Bootstrap grids PSD and build from there, following Bootstrap specifications – Devin Jun 29 '17 at 18:09
  • 1: Don't use Photoshop. It's terrible for wireframes, layouts, and screen design. 2: If your developer can do it in code, why bother mocking it up? Just work with him to code it based on some simple wireframes (using Balsamiq, UXPin, Sketch, etc). – plainclothes Jun 29 '17 at 18:16
  • Thank you for answers guys. I found some semantic UI elements KIT for Illustrator which will help me to speed up my work. Regarding Photoshop I know that is not design for UX but we have Microsoft in office. I tried Adobe XD – Bane Jul 2 '17 at 9:09
1

To answer your question re: Semantic, here's a link to the table section If there are no dimensions listed, you can use the Inspect panel for Chrome developer tools to get pixel dimensions to start with. enter image description here

However, there's also another question here:

Do the current components sizes and styles suit the product you are working on?

Remember, as the designer, it's your responsibility to alter components where the framework falls short, and the user is not well served by defaults. Test your designs with users to make sure.

Another thought here is an opinion based on years of prototyping experience (I know, it's my 2 cents).

Use a different tool than photoshop when designing large sequences of screens

Photoshop is best used for image manipulation. Here's some of the problems with photoshop for UX design:

Photoshop has a single document interface.

Interactions take place across time: this means to convey an interaction there are multiple state changes on the same page, or flowing across multiple pages.

You need a tool to view multiple documents at once. Panning and zooming to get context of your interactions as you work. Photoshop can use Artboards, but other tools are more nimble.

Photoshop is not as nimble with programmatic thinking for design

You are using a framework to develop your actual interface. You should be thinking of ways to design components that are easy to update.

There are several tools which many UI and UX designers favor. All the designers I work with use Sketch. (NOTE: I am not being paid, nor do I work for this company). There are tons of user generated plugins available for using and arranging symbols, style guides, etc. All the things you'll be responsible for.

UPDATE: As mentioned in the comments above by @plainclothes, Balsamiq (available here for quick mocks) is great when you are not responsible for a detailed visual design layer, and want to work through a prototype quickly.

My experience is that it solves the multi-document view, where you have unlimited canvas to layout and pan across as you build view sizes and/or interactions.

This last part of the answer is perhaps a personal rant, but it comes from the problems I've encountered that have slowed teams (and individual designers) down.

enter image description here

Not the answer you're looking for? Browse other questions tagged or ask your own question.