Help needed — I'm a UX Designer wanting to improve my design skills!

Careers & Mentoring
#1

Hey folks!

At my current job I specialize in user research, wireframing, and low fidelity mockups for new desktop/mobile experiences, but I am wanting to transition into new UX roles where I can create higher fidelity designs. In order to do this, I would really like to improve my visual design, animation, and prototyping chops.

What tips would you have for me?

For example, thoughts about online courses/tutorials, design bootcamps, or maybe just your own personal methods of growing your design skills and staying creative!

#2

Do you have any background in graphics or have much knowledge of photoshop?

#3

I do not. :o

#4

In that case, i’d get yourself looking at learning photoshop first (if you have access to photoshop), maybe look at Lynda.com or VTC for paid online training videos. Or YouTube, or Adobe help for free stuff. Alternatively there is cheaper software out there if you haven’t got photoshop. I self taught myself photoshop using the adobe help, vtc and lynda.com.

You could look at a part-time course in graphic design at a local college.

I’ve also just found this which might be helpful https://www.creativelive.com/design/graphic-design?via=topic-list_2

Maybe also look at local courses in art, which will teach you visual skills other than graphics, this will teach you about colour relationships and slihtly alternative ways of thinking.

Another thing worth doing, is taking your wireframes that you’ve already done, and in your free time, build on those to add visual design. Prototyping software like Axure allows you to do high-fidelity wireframes, I’ve also used a cheaper software called Flairbuilder, which allows you to do fairly high-fidelity wireframes too. Once you have some images with some visual design pop them on here and ask for a critique.

Do you work with a designer currently who adds to your wireframes?

1 Like
#5

Thank you. That’s helpful! I do every now and then create my own wireframes for side projects and use Sketch to add to the visual design, so that’s always a helpful practice. Axure is actually my primary wireframing and prototyping tool, but I’m thinking more about tools like AE, Principle, or even the coding side with Framer.js, HTML/CSS.

I know that there are these classes and tutorials out there for the tools, but I would be really interested to know from your personal opinions what have been the most helpful projects and practices that you like to do or have done to improve visual, animation, and prototyping skills. And if these online classes are what you’d recommend, are there any courses that didn’t provide the most practical methods for what you were hoping to get out of them?

I do work with a designer on my agile team who adds to the wireframes. I’ve talked to him about this. He went to school for graphic design, so that hasn’t been the most helpful comparison for my situation haha. I have thought about doing a part-time course, so I’d be interested to hear if any of you have done something like that and what you got out of it.

1 Like
#6

from my POV this is the best way to implement prototypes.

Sketch+code (for web apps) is the best combo, for native apps I’m very happy with Sketch+Proto.io/InVision

#7

I’m going to link to my UX story here which gives some info into my background.

I went to university to study Visual Communication but am self taught with UI and UX. I have only learned HTML, CSS and bootstrap in the past year. I used VTC at university to help me learn Photoshop and Illustrator, I then used it to start learning HTML and CSS. For the past year or so I have been using Lynda.com to build on my HTML, CSS and also for some photoshop and general design courses.

I’m a little confused by this statement, is it your CSS and styling the code you want to improve or actually creating high fidelity screenshots and wireframes?

1 Like
#8

I’m afraid I have to disagree here! I find that buidling up to code is the best way. Starting with sketches allows people to be brutally honest, they know it can be scribbled on, rubbed out and even started again if they don’t like it. Once they have something they like I put it into axure in a low fidelity still so they can interact with the screens on a computer and get a better feel for the flow and put in realistic data. Once this is approved I then add visual design and make a high fidelity wireframe.

Only after these stages do I then put anything into HTML, which is then handed over to developers along with the axure for them to implement the back end.

The previous designer to me went straight into code, and stakeholders found the process much slower and harder to critique.

#9

@jacquidow
I do like when someone does not agree with me :slight_smile:

I was talking about the prototype stage.
When we decided to code solutions it’s because we already clarified several aspects with previous steps and deliverables (sketches, lo-fi wireframes, lo-fi mockups and so on).

In my experience I found html and css are very the best way to run usability test specially for responsive projects.
As UX designer, I believe, we should evangelize stakeholders to be reactive and to familiarize with the different project stages.
And again project size, team size, company culture, design vision are variables with a huge impact on the way how to deliver solutions.

#10

You’ve got to love a bit of debate :slight_smile:

So, what happens to the code prototype? Does this get developed into the real thing or do you start again with new code?

Also, do you only start usability testing once you have something in code?

I do agree it depends on team sizes and the skills within the team though.

1 Like
#11

The prototype is a deliverable belongs the design team. Is built by our front end DEVs using a shared framework.
The “real” code is belonging to the engineering teams. Due to the fact that we are using the same components they do not re-use the prototype code because they don’t need it

Absolutely not, we test as soon we have something to test. We have test sessions with sketches, wireframes and quick and dirty prototypes

:slight_smile:

#12

I don’t know if I’m being a bit simple here… does that mean you have 2 versions of the same code? Written by different people, that do the same thing? But one is called a prototype and one is the real thing?

#13

thanks for the response! what are some good resources that you know of that a beginner like myself could use to make prototypes with HTML/CSS or Framer.js?

I find that when it comes to code, there is so much information out there on the internet that it makes it difficult to find a concise set of resources for learning.

Anything you’d personally recommend to start for animations and interactions?

#14

They look similar but are very different in terms of code.
We deliver, as UX team, a HTML prototype built with CSS, JS and some mock data
The DEV teams deliver components, with real code (JAVA), that are merged at server side

Our prototypes are built for demonstration goals and usability test.
We are not doing the same thing because we are not taking care about system performances, server validations and other tech topics.

Due to the fact that we are sharing a framework, naming convention, css classes and semantic HTML are the same for everybody.
I would call prototype just prototype
The dynamic code is the software as it is for the customers

#15

I can give u some tips according my personal experience and remember that I’m not a coder.
If you want to have a better overview about responsive projects I suggest to download Bootstrap (http://getbootstrap.com/) and play with it.

Try to build a page using the framewrok and make a list of UI components that you can’t code or u can’t modify.
In this way you will understand where are the limits for u as a prototyper.

I’m very happy using a web tool to create quick and dirty protos, this one: https://webflow.com/

#16

Ah ok, this makes things clearer.

We work in a slightly different way. The HTML we produce is very basic HTML and CSS, static pages, with no interactivity (JS) - although because we use bootstrap we can implement certain things. This is then handed over to the developers who add in .net code and link it up to the back end.

We used to do HTML, CSS and javascript prototypes but there was a bit of a misunderstanding within the department about the purpose of these and they were handed over to developers who then ripped them apart and linked them up to the back end after pulling out all the JS. We found this was taking a lot of their time so decided instead to move to the new approach of Axure and basic HTML for them to work from.

1 Like
#17

yes!

I faced the same scenario several times, this is the reason why we decided to build our own framework.
Basically we lean on the same libraries and the updating process is always shared between teams (fro instance a new component or a new UI for an existing component). Some specific topics are handled by dedicated team like UI definition in terms of styling (color palette, typography) or JS code and so on.

1 Like