I started as a web admin and worked my way into frontend development. I have a daughter with developmental learning issues and I was looking for ways to give her a better experience online. That lead to finding out about accessibility. It made me realize that no user is exactly like another and how we navigate a site is based on various perceptions for each individual. As a user we all bring our own set of ideas when we search, navigate, browse, etc. I am fascinated by those concepts.
Hi Shravan,
As a web admin I maintained the website front and back end. The website was built with Joomla (similar to WordPress) so it was fairly easy. PHP, html and CSS were the top skills necessary. Hope that helps!
If you're not in a technical field you need coding skills in javascript, html and css. If you have no design experience you'll need to be able to use products like sketch, Adobe XD, UXPin, Ionic Creator, photoshop, Animate, Muse, etc. A great learning environment like Frontend Masters, Free code Camp, Lynda.com, Sitepoint Premium. Study a little history on web design and development as well. It will give you perspective on how page and site design has evolved over time. One fun thing to do is look at the wayback machine, archive.org/web/.
How do you help the DevTeam implementing your ideas? From UX/UI perspective. Do you give them code or just templates? How do you integrate design-thinking into a SCRUM organization :)
My process is different each time. I have my own set of starters that I keep on hand that I can modify: grid layouts, flex starters, media queries, js, node projects. I also have github repos I use over and over for things like Angular, Ember, React, Material Design, and Bootstrap projects. I write my own code or add on to a frontend framework like MD or Bootstrap. And I have tons of tools! I'm the "cheat-sheet" queen! lol
And finally, don't be afraid to trust your gut or draw from knowledge you have based on REAL LIFE. As a software engineer I sometimes find myself consumed by the coding process; forgetting that what I'm doing is supposed to produce enhancements for the real world. Get up and get out into the world and meet the user. That will create intrinsic knowledge that you can apply when you sit back down to code.
How do you continually improve user experience? I find in UX we are trying to come at an end and then maybe we move on to something else. How would you go about refining a high-traffic experience over time?
Have a plan where you break each known issue into smaller parts. Maintain a source that gives accurate user data with analytics info. Utilize collaboration skills for crossover issues (is it a backend solution?) Understand who the user is (are they international? ages 18-24? mostly female? mostly male?). Be prepared to mockup your solutions/suggestions with an interactive tool like UXPin or Ionic Creator to get accurate feedback from collaborators. Know and understand the most common problems, and know what to expect if they are outside the scope of your work. Create initiatives that insure user information can be communicated through soft skills by those team members who have hands on contact. With some projects you may have to take the proverbial "Bull by the Horns" yourself and implement changes to improve the way user issues get communicated.
What are best strategy in case javascript is switch off on target browser and we have to run application(I've face this question in one of interview and i gave i answer to use noscript tag as fallback, but they don't like my answer.so i'm curious for exact answer).
I need a little more info to answer your question. For instance: If your trying to run an app and you don't want to loose your user, what did you give as your fallback? The
tag supports HTML global attributes so you have options. Can you fill me in please?
Hi AnKush
It's a great topic and I think you should post it. Maybe a title like "What are your questions about single page apps." Start it off with your questions and other people will join in :)
So, as a PROGRAMMER WHO HAS SPENT YEARS AT THE BOTTOM OF THE STACK,
I would like to GET FIVE TOP TIPS ON HOW TO ENGAGE WITH UX EXPERTISE,
So that I can MAKE THINGS PEOPLE WANT TO USE.
Seriously - I've spent years on the server-side of client-server apps, and I'm moving to do more front-end - what should I be thinking about?
That is a really awesome question. I ask it to myself almost every time I start a project! Here are my top five:
Learn to interpret the research you get from UAT. If you want to fast-track your comfort level with this you can buy reports from sites like Baymard baymard.com/research but it will cost you.
Refine your ideas about users. Find out what the most common user groups are (men, women, 18-24, etc) and study edge cases (sub groups like elderly, visually challenged, language/hearing impaired)
Get the docs for HTML5, CSS, SASS, js and deep dive. If you think you know them - you don't.
Practice writing site maps and page structure based on UX for specific groups.
There are a lot more steps you can do but if you start with those more will be revealed as you go along your journey :) Thanks for the great question and good luck! Namaste!
How do you distinguish the rolls of developers? I have often see "front end developer" vs "back end developer" but I see that as being an artificial distinction. I kind of like "application developer" vs "UX developer" understanding that some people make have a foot in both. However I am still thinking through how to categorize developer rolls and areas of expertise. I see issues with a lot of the "classic" ways of doing that categorization and have been looking for better alternatives.
Background note: In some context's this is not a huge deal. However in a company with hundreds of developers and dozen's of projects it becomes very important.
You nailed it when you said "I see that as being an artificial distinction". They are all just names given to the general role we play. If you ask me, we should probably give up these artificial naming conventions in lieu of "developer - expert in "whatever" or software engineer "generalist" or "developer - with "design training", etc.
A web developer who combines branding, user interface design , web development & digital marketing, to improve sales. Proud that all of his clients came from mouth to mouth recommendation.
A web developer who combines branding, user interface design , web development & digital marketing, to improve sales. Proud that all of his clients came from mouth to mouth recommendation.
For Documentation and storing snippets I like Dash kapeli.com/dash
My repos are all in Github
I use Chrome dev tools with:
Augury
Chrome Lens
whatfont
jet brains toolbox and IDE support
Lighthouse
UA spoofer
live reload
dev tools auto save
php console
validate aria
ip address & domain info
css viewer
md editor
json formatter
css used
checkmylinks
react dev tools
redux dev tools
colorzilla
Ember Inspector
DuckDuckGo
Emulated Device Lab
js errors notifier
Node.js V8 Inspector
Validity
Postman
Web Server for Chrome
Note: I turn on and off the chrome extensions as needed. They can eat up a lot of memory if they are running in the background. As far as the uses for each one they are self explanatory but if you have a question about any let me know. Sometimes they are hard to set up and you may have to change some of your settings to get them to work. You can see those settings here: chrome://flags/
I use Codepen for inspiration and fun doodling in css: codepen.io/jrohatiner/
I use plunkr for experimenting with mostly Angular: plnkr.co/users/jrohatiner/plunks
I also like stackblitz - but haven't used it that much yet. stackblitz.com/@jrohatiner
I use graphql launchpad launchpad.graphql.com/new (great tool for serverless and mocking an endpoint)
regex101 regex101.com/
jsLint jslint.com/
I use js fiddle, sql fiddle jsfiddle.net/ sqlfiddle.com/
I also keep a dev server on Mediatemple.net (a bit of a mess right now :P) and I use the typescript and Docker playgrounds. Typescript because it will convert js to ts. Docker because its a great tool for constructing microservices. labs.play-with-docker.com/
Testing: e2e, jasmine, phantom, phpunit
My IDE is Webstorm or phpstorm
Sometimes I use BBEdit
Whew! If you have any questions about the tools I'm happy to help :)
How did you get into UX?
I started as a web admin and worked my way into frontend development. I have a daughter with developmental learning issues and I was looking for ways to give her a better experience online. That lead to finding out about accessibility. It made me realize that no user is exactly like another and how we navigate a site is based on various perceptions for each individual. As a user we all bring our own set of ideas when we search, navigate, browse, etc. I am fascinated by those concepts.
Great story
Namaste!
Can you tell a little about the earlier job you had? Web admin as you mentioned.
Hi Shravan,
As a web admin I maintained the website front and back end. The website was built with Joomla (similar to WordPress) so it was fairly easy. PHP, html and CSS were the top skills necessary. Hope that helps!
Thankyou for replying:)
If you're not in a technical field you need coding skills in javascript, html and css. If you have no design experience you'll need to be able to use products like sketch, Adobe XD, UXPin, Ionic Creator, photoshop, Animate, Muse, etc. A great learning environment like Frontend Masters, Free code Camp, Lynda.com, Sitepoint Premium. Study a little history on web design and development as well. It will give you perspective on how page and site design has evolved over time. One fun thing to do is look at the wayback machine, archive.org/web/.
How do you help the DevTeam implementing your ideas? From UX/UI perspective. Do you give them code or just templates? How do you integrate design-thinking into a SCRUM organization :)
My process is different each time. I have my own set of starters that I keep on hand that I can modify: grid layouts, flex starters, media queries, js, node projects. I also have github repos I use over and over for things like Angular, Ember, React, Material Design, and Bootstrap projects. I write my own code or add on to a frontend framework like MD or Bootstrap. And I have tons of tools! I'm the "cheat-sheet" queen! lol
Thank you!
Namaste!
I forgot to answer the SCRUM part: I do what the rest of the team does to comply with SCRUM and CI.
I am a big fan of tutorials. I regularly use:
Front End Masters (bless you Mark Grabanski!) frontendmasters.com/
Site Point Premium sitepoint.com/
Oreilly oreilly.com/
Scotch scotch.io/ (also fun to drink)
Read newsletters like the ones Adam Roberts produces for sitepoint: twitter.com/Adam__Roberts
versioning.substack.com/
or
Louis Lazarus webtoolsweekly.com/
or
uxmatters.com/
Join a slack or mighty networks UX channel
And finally, don't be afraid to trust your gut or draw from knowledge you have based on REAL LIFE. As a software engineer I sometimes find myself consumed by the coding process; forgetting that what I'm doing is supposed to produce enhancements for the real world. Get up and get out into the world and meet the user. That will create intrinsic knowledge that you can apply when you sit back down to code.
How do you continually improve user experience? I find in UX we are trying to come at an end and then maybe we move on to something else. How would you go about refining a high-traffic experience over time?
That is a great question.
Have a plan where you break each known issue into smaller parts. Maintain a source that gives accurate user data with analytics info. Utilize collaboration skills for crossover issues (is it a backend solution?) Understand who the user is (are they international? ages 18-24? mostly female? mostly male?). Be prepared to mockup your solutions/suggestions with an interactive tool like UXPin or Ionic Creator to get accurate feedback from collaborators. Know and understand the most common problems, and know what to expect if they are outside the scope of your work. Create initiatives that insure user information can be communicated through soft skills by those team members who have hands on contact. With some projects you may have to take the proverbial "Bull by the Horns" yourself and implement changes to improve the way user issues get communicated.
What are best strategy in case javascript is switch off on target browser and we have to run application(I've face this question in one of interview and i gave i answer to use noscript tag as fallback, but they don't like my answer.so i'm curious for exact answer).
I need a little more info to answer your question. For instance: If your trying to run an app and you don't want to loose your user, what did you give as your fallback? The
tag supports HTML global attributes so you have options. Can you fill me in please?I mean any server side rendering is suppose to help in this situation?
Hi AnKush
It's a great topic and I think you should post it. Maybe a title like "What are your questions about single page apps." Start it off with your questions and other people will join in :)
Good Luck
Judith
So, as a PROGRAMMER WHO HAS SPENT YEARS AT THE BOTTOM OF THE STACK,
I would like to GET FIVE TOP TIPS ON HOW TO ENGAGE WITH UX EXPERTISE,
So that I can MAKE THINGS PEOPLE WANT TO USE.
Seriously - I've spent years on the server-side of client-server apps, and I'm moving to do more front-end - what should I be thinking about?
That is a really awesome question. I ask it to myself almost every time I start a project! Here are my top five:
There are a lot more steps you can do but if you start with those more will be revealed as you go along your journey :) Thanks for the great question and good luck! Namaste!
How do you distinguish the rolls of developers? I have often see "front end developer" vs "back end developer" but I see that as being an artificial distinction. I kind of like "application developer" vs "UX developer" understanding that some people make have a foot in both. However I am still thinking through how to categorize developer rolls and areas of expertise. I see issues with a lot of the "classic" ways of doing that categorization and have been looking for better alternatives.
Background note: In some context's this is not a huge deal. However in a company with hundreds of developers and dozen's of projects it becomes very important.
You nailed it when you said "I see that as being an artificial distinction". They are all just names given to the general role we play. If you ask me, we should probably give up these artificial naming conventions in lieu of "developer - expert in "whatever" or software engineer "generalist" or "developer - with "design training", etc.
Hello. You said earlier: "...For prototyping I prefer Sketch -> Zeplin -> UXPin.."
Do you use them in that order?
Sketch => Zeplin (with html and css plugins)
Sketch => UXPin - if it is an interactive prototype.
There are many different ways to use Sketch, Zeplin and UXPin. This is just how I do it :)
Thanks, do you prefer UXPin over Axure for prototyping? If so, why? Thanks again.
You mentioned some tools to start using, like Adobe XD or UXPin. What are YOUR tools of preference, and what specific tasks do you use them for?
For prototyping I prefer Sketch -> Zeplin -> UXPin
uxpin.com/prototyping
sketchapp.com/
zeplin.io/
For Documentation and storing snippets I like Dash
kapeli.com/dash
My repos are all in Github
I use Chrome dev tools with:
Augury
Chrome Lens
whatfont
jet brains toolbox and IDE support
Lighthouse
UA spoofer
live reload
dev tools auto save
php console
validate aria
ip address & domain info
css viewer
md editor
json formatter
css used
checkmylinks
react dev tools
redux dev tools
colorzilla
Ember Inspector
DuckDuckGo
Emulated Device Lab
js errors notifier
Node.js V8 Inspector
Validity
Postman
Web Server for Chrome
Note: I turn on and off the chrome extensions as needed. They can eat up a lot of memory if they are running in the background. As far as the uses for each one they are self explanatory but if you have a question about any let me know. Sometimes they are hard to set up and you may have to change some of your settings to get them to work. You can see those settings here: chrome://flags/
I use Codepen for inspiration and fun doodling in css: codepen.io/jrohatiner/
I use plunkr for experimenting with mostly Angular: plnkr.co/users/jrohatiner/plunks
I also like stackblitz - but haven't used it that much yet. stackblitz.com/@jrohatiner
I use graphql launchpad launchpad.graphql.com/new (great tool for serverless and mocking an endpoint)
regex101 regex101.com/
jsLint jslint.com/
I use js fiddle, sql fiddle
jsfiddle.net/
sqlfiddle.com/
I also keep a dev server on Mediatemple.net (a bit of a mess right now :P) and I use the typescript and Docker playgrounds. Typescript because it will convert js to ts. Docker because its a great tool for constructing microservices. labs.play-with-docker.com/
Testing: e2e, jasmine, phantom, phpunit
My IDE is Webstorm or phpstorm
Sometimes I use BBEdit
Whew! If you have any questions about the tools I'm happy to help :)
Wow, didn't expect that explanation! Thanks a lot, will be researching those tools as well. Cheers!
Namaste!
How does one become a UX designer from scratch?
What are the key notes in ux?
What kind of suggestions do you want to give to new students interested to pursue career as a UX UI Developer?
see replys @danielluna, @juankortiz , @davidcridland.
and specifically to women I tell them to mentor other women as well.
What's most important for you to design a great UX?
Knowing how to interpret the task and then coding it with the necessary elements that adhere to best practices.
I have a set of psd's , what is the best way to convert it into live prototypes which can be easily converted into html ?
export from PS (also works for sketch and figma) -> project Dashboard -> enable ext to your liking!
Hello! What is your process for front-end testing? In terms of automated testing like regression testing and performance testing.
Thank you!
I use selenium IDE (works better in Firefox dev edition then Chrome). Chrome dev tools is awesome for performance for js.
Jasmine jasmine.github.io/2.0/introduction... is also a go to and Mocha mochajs.org/
TBH testing isn't my favorite task to do but its so important I'm really glad to have the tools to get it done right.