Please enable JavaScript.
Coggle requires JavaScript to display documents.
UX/UI Development to complete a Full Stack Development role (User…
UX/UI Development to complete a Full Stack Development role
User Interface Prototyping
Test Design Ideas
used for interactions
does the interface fit on a display?
does it show all needed information?
is it appealing?
is it showing too much information?
does the interface work in every browser?
if you get one thing from this diagram, understand that making a great UX/UI requires a prototype
Design/Development Tips
Mobile Responsiveness
Pick one mobile device in the beginning (usually the most popular)
then you can expand from there
build mobile first, you can always start simple and then build the desktop on top
you must design proportional to the device, a thumb press is rather large... around 7-12mm (around 4-8% view width of a iphone 6 screen)
Information
Use easy to read fonts (simple looking like Arial) for long paragraphs
To draw attention to some text use contrasting colors and unique font styles
If there is a priority to the information, you want to make sure the most important information starts about 1/3 down the page.
DO NOT USE ALL CAPS
It makes some text blend at times when the page is very rectangular or the same shape as what is in caps
I have a tendency to ignore it... people conditioned to ignoring ads have removed a lot of appeal of all caps
This is used in advertisements, it does not mean it belongs on a website.
Design Appeal
1 third rule drawing attention to appealing designs
anything outside of the 1/3 of the page may feel distracting to some unless it is easily identifiable (like the hamburger menu)
Use contrasting colors to draw attention to menus
complimentary colors to make sections of the page flow together (maybe the header and footer would use the darkest complimentary colors and the main content would have the lightest)
Be careful with overlays (absolutely positioned and overlapping). You should check the z-index at times because it will make buttons/forms non-functional
"Whitespace" in design terms generally increases the perceived value of what is on your page
Important buttons and areas should stand out
Speed
Developers need to think about how long it should take to get to the next step and possible add things like animation in between to help with the delay
AJAX can sometimes be used, but try to keep API calls simple whenever possible.
Use benchmarking software to test information retrieval pages and Time To First Byte (TTFB)
You can use "srcset" javascript and open source image resize packages to load the bare minimum images for a particular screen size, this will mainly affect page load
Why?
As a full stack developer, you will be bombarded with questions at the interview, mainly about functionality and about general website know-how. UX/UI is a growing part of the know-how. Usually, experience is best to grant this type of knowledge.
A full stack developer with this type of knowledge is generally extremely successful.
Companies spend a lot testing the UX of the customer/audience to find out what works best. As a full-stack, knowing how to put this information to use will allow you to communicate more effectively and write better code when you can "see" the potential changes and understand your user.
A great website with a great user experience in your portfolio will give interviewer's a reason to say "Wow" before the interview.
Full stack dev is hard to show off in the beginning. UX/UI is an easy sell at an interview (remember my highest paying job?) especially when the interviewer does not know how to code. It will give you something to talk passionately about.
if you still love design, and have a full-stack certificate, this is a great avenue to explore
Websites and Companies have an overwhelming amount of information to get across to their audience, be part of the solution and come up with interesting ways to displaying more than 1000 words in your single webpage view.
Uses...
Can be the difference between a million dollar website and a multi million dollar website, believe me, i have seen it happen over and over again
your current project
Many free-lance gigs where they talk about "re-design look and feel" require this type of development in addition to the full-stack
Increases the inherit value of what you build
UX deals with the user experience (how a user feels while interacting)
user feels good using a keyboard
user feels bad clicking an ad
UI deals with the nuts and bolts of the user's interface
(How a user interacts)
user uses a keyboard
user uses a mouse