ol ol ul, ol ul ul, ol menu ul, ol dir ul,
ol ol menu, ol ul menu, ol menu menu, ol dir menu,
ol ol dir, ol ul dir, ol menu dir, ol dir dir,
ul ol ul, ul ul ul, ul menu ul, ul dir ul,
ul ol menu, ul ul menu, ul menu menu, ul dir menu,
ul ol dir, ul ul dir, ul menu dir, ul dir dir,
menu ol ul, menu ul ul, menu menu ul, menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir, menu ul dir, menu menu dir, menu dir dir,
dir ol ul, dir ul ul, dir menu ul, dir dir ul,
dir ol menu, dir ul menu, dir menu menu, dir dir menu,
dir ol dir, dir ul dir, dir menu dir, dir dir dir {
list-style-type: square;
}
Browser support is just starting to get there and polyfilling is hard, so we aren’t at day-to-day no-brainer use levels quite yet. I’d bet it’s not too far away.
Firefox being “developer’s browser” has many great tools to help make our work easier. You can find more on its tool collection on the Firefox Developer Tools webpage and can also try their Developer Edition Browser which has more features and tools that are being tested.
For this post, I’ve listed 10 handy tools you might like from its developer tools collection. I’ve also demonstrated what these tools can do with GIFs plus how to access them for quick reference.
Firefox has a ruler tool that displays both horizontal and vertical rulers with pixel units on the page. The tool is useful for arranging your elements across the page.
To access rulers through the menu:
Go to: ☰ > Developer > Developer Toolbar (shortcut: ShiftF2).
Once the toolbar appears at the bottom of the page, type rulers.
Pess Enter.
To make this appear on the developer tools window:
Go to “Toolbox Options”.
Under the “Available Toolbox Buttons” section, check the “Toggle rulers for the page” checkbox.
2. Take screenshots using CSS selectors
Although the Firefox toolbar lets you take screenshots of the full page or visible portions, in my opinion the CSS selector method is more useful for capturing screenshots of individual elements as well as for elements that are visible on mouse-hover only (like menus).
To take screenshots through the menu:
Go to ☰ > Developer > Developer Toolbar (shortcutShiftF2).
Once the toolbar appears at the bottom of the page, type screenshot --selector any_unique_css_selector.
Press enter.
To make this appear on the developer tools window:
Click “Toolbox Options” and under “Available Toolbox Buttons” section.
Check “Take a fullpage screenshot” checkbox.
3. Pick colors from web pages
Firefox has a built-in color picker tool by the name of “Eyedropper”.
To access the “Eyedropper” tool through menu go to ☰ > Developer > Eyedropper.
To make this appear on the developer tools window: click “Toolbox Options” and under “Available Toolbox Buttons” section check “Grab a color from the page” checkbox.
4. View page layout in 3D
Viewing webpages in 3D helps with layout problems. You’ll be able to see the different layered elements much more clearly in 3D view. To view the webpage in 3D, click the “3D View” tool button.
To make this appear on the developer tools window, click “Toolbox Options” and under “Available Toolbox Buttons” section check the”3D View” checkbox.
5. View browser style
Browser Styles consist of two types: the default style a browser assigns for every element, and the browser-specific styles (the ones with the browser prefix). By taking a look at the browser styles you’ll be able to diagnose any override issues in your stylesheet and also come to know of any existing browser specific styles .
To access “Browser styles” through menu:
Go to ☰ > Developer > Inspector.
Click the “Computed” tab in the right section.
Check the “Browser styles” checkbox.
You can also open the “Inspector” tab through the shortcut CtrlShiftC and then accessing “Browser styles”.
6. Disable JavaScript for current session
For best practice and screen reader compatibility it is always advised to code any website in such a way that its functionality is not hindered in a javascript-disabled environment. To test for such environments, you can disable the JavaScript for the session you’re working in.
To disable JavaScript for current session click “Toolbox Options” and under “Advanced settings” section check the “Disable JavaScript*” checkbox.
7. Hide CSS style from the page
Just like JavaScript, due to accessibility concerns it is best to design websites in such a way that the pages should still be readable even without any styles. To see how the page looks without any style, you can disable them in the developer tools.
To remove any CSS style (inline, internal or external) applied on a webpage, just click on the eye symbol of the listed stylesheets in the “Style Editor” tab. Click it again to revert to the original view.
To access “Style Editor” through menu go to ☰ > Developer > Style Editor (shortcut: ShiftF7.
8. Preview the HTML content response to a request
Firefox developer tools has an option to preview the HTML content type responses. This helps the developer to preview any 302 redirects and check whether any sensitive information has been rendered or not in the response.
To access “Preview” through menu:
Go to ☰ > Developer > Network (shortcut: CtrlShiftQ.
Open the webpage of your choice or reload the current page, click on the desired request (with HTML response) from the list of requests.
Click the “Preview” tab in the right section.
9. Preview webpage in different screen sizes
To test a webpage for its responsiveness use the “Responsive Design View”, which can be accessed by ☰ > Developer > Responsive Design View or with the shortcut: CtrlShiftM.
To make the “Responsive Design Mode” tool button appear, click “Toolbox Options” and under the “Available Toolbox Buttons” section, check “Responsive Design Mode” checkbox.
10. Run JavaScript on pages
For quick JavaScript executions on any webpage simply use the “Scratchpad” tool of Firefox. To access “Scratchpad” through the menu go to; ☰ > Developer > Scratchpad or use the keyboard shortcut ShiftF4.
To make the “Scratchpad” tool button appear on the developer tools window for quick use: click “Toolbox Options” and under the “Available Toolbox Buttons” section check the “Scratchpad” checkbox.
This one’s for all of you web designers — we’ve rounded up some tools that we think you’ll find particularly helpful in your day-to-day workflow! Keep scrolling through to check out a hand-picked list of Google Chrome extensions for your web browser that just might change the way you work.
From checking your website for usability, identifying fonts, testing out responsive designs, and more, get ready to add a whole new layer of efficiency to your workflow. Who knows, you might even discover some tools you didn’t even know you needed! We hope you enjoy and don’t forget to check out our roundup of Chrome extensions for every kind of designer to download even more handy resources.
UX Check works to inform you of any possible usability issues on a website without having to involve real users. The extension calls out any areas of your website that need improvement based on Nielsen’s ten usability heuristics — a list of general principles for designing user-friendly interfaces. This is an ideal tool if you’re not able to conduct usability testing with users themselves. You can even export the feedback into a document to share with other team members later on!
Are you the kind of designer that loves getting font inspiration from typefaces you come across on the web? Instead of furiously searching for the font online, try using Fontface Ninja, a Chrome extension that lets you hover over the text on your screen to instantly help you identify a font, it’s size, line spacing, letter-spacing, and even the color hex code.
On top of that, Fontface Ninja enables you to test the font out yourself with whatever text by typing something out in the extension’s drop-down window. If you absolutely love it, there’s a handy link for you to find the web font’s source so you can purchase and/or download it for free.
Page Ruler Redux is the web designer’s (and web developer’s!) go-to digital ruler. Use the extension to get an accurate, pixel-perfect measurement of any web page element on your screen. Simply drag the ruler across any section of a website, and inspect the selected element’s height, width, and position. You can even adjust the ruler’s color to ensure there’s enough contrast depending on the website’s background!
This is more than just your average color picker or eyedropper tool. In addition to identifying color hex codes on the web, Color by Fardos comes with a few other helpful features: Identify a color’s different shades and tints, get color pairing recommendations based on color theory, and also grab the CSS for any gradient straight from your browser. This is a perfect way to get inspired by other website’s color palettes, without having to replicate them exactly.
This brilliant Chrome extension enables you to re-size your browser window to mimic all kinds of different mobile and desktop resolutions — perfect for quickly testing out responsive web designs. View your layouts on different browser resolutions and ensure your web designs look top-notch across all devices. While the tool comes with a few pre-set resolutions to choose from, you can also customize those as you please through changing the window’s size, height, and position.
That’s a wrap! We hope you find some use out of these Google Chrome extensions. Find them in the Chrome web store to test them out and see how much they enhance your browsing experience and overall workflow. For more hand-picked design resources to explore, check out 7 best illustration resources to use in your web designs, and 6 handy color palette picking tools.
An interview is a process that helps recruiters to find out a suitable person who can fulfill their requirements in a desirable way. It includes a set of questions and answers to get an understanding of the other person about his/her skills, interests and attitude.
Being a professional UX designer, you must have to appear in multiple interviews when you are searching for a job. At times, you rock in an interview and get a positive outcome in the form of your favorite job, while sometimes you might not be able to perform well and hence do not get the required results. However, taking these chances as learning opportunities help you improve yourself and try harder for your next interview.
There are different ways to show outstanding performance in an interview. Few useful tips that can help you for your next interview are listed below.
1. Prepare well
The first and most important thing that you can do before going to an interview is to prepare as much as you can. There is a lot of material available on the internet related to UX, including useful interview questions along with best possible answers.
To make sure that a lot of information may not overwhelm you, find few sites that serve you with the required content and are enough to follow to prepare well. Read the given questions and answers carefully and try to map those answers to your own knowledge and practical experience. A good source for UX related interview questions can be found here.
It is always important to prepare well that includes understanding your potential employer and may be the kind of interview questions employers ask. Glassdoor is a good source that contains interview questions for different companies as well as reviews from their former and current employees.
When you have a good collection of interview questions, organize them in the form of a document by listing all the questions and answers into it. Then, tweak the answers by adding your own experience in each answer. Keep on adding the questions/answers in the same document so that it becomes your interview glossary.
When you are called for an interview, you can go through this glossary thoroughly and practice your answers multiple times in your mind. This will be your guide for interview preparation that helps you save a lot of time.
2. Know about the company and your interviewer
Another important step in interview preparation is to research about the company where you are going for your interview. For this purpose, go to the company’s website and discover their goals, products and interests. It is also helpful to find information about company on Linkedin, Glassdoor, Quora and other related sites. Using this information, modify your portfolio and include keywords from the desired job description to make it more relevant and appealing to your recruiters.
In some interviews, you would already receive an email a few days before the interview regarding who is sitting in your interview panel. Knowing about the interviewers is also as important as doing research about the company. In this digital world, it is not difficult to find a professional on the internet. Go to Linkedin, and search their profiles. Get to know their experiences, their past work and their portfolios as this will help you get familiar with the person and their achievements.
An interesting tip is to look at the recommendations that they have either received or given to others. This will help you understand their working style, their relationships with peers, and their values. This knowledge will allow you to make a better and effective communication with them during the interview. Not just this, it would also help you reflect if this is really the job you are looking for. If you are uncomfortable with someone’s working style, do you really want to apply for the job?
3. Revise UX basics, even if you’re an experienced UX designer
You might have done a lot of practical work in UX field for a number of customers. You will have many projects to show and describe in your interview. However, make sure to revise your basic concepts of UX design, as sometimes we absorb too much in practical work that we ignore the usage of related terms and phrases.
The recruiters may not ask you the definition of information architecture or interaction design, but it will give a good impression if you use similar terms while explaining your design process.
Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use
Use a language with UX keywords and show them you have a good command over UX concepts, and you can help your customers to realize the value of UX design and you can mentor your juniors to understand them about the creation of amazing experiences.
4. Take along with your portfolio and make sure to include your UX process
To earn a UX job, bring your design portfolio with you including all necessary elements in it. To create an impressive portfolio, it is better to research a few useful tips that can help you when you organize your work in portfolio. Review portfolio examples from professional UX designers and see how they explain their projects. Behance and Dribble are two most common sites that contain hundreds of good portfolios from professionals around the world.
Make sure to discuss the process that you follow while working on your design projects. Start with an idea, and explain your process of converting that idea from wireframes and images into prototypes, and how you get client’s feedback. If you just add finalized graphics to your portfolio without explaining the process of creation, this will not add much value to your interview. It is better to prepare a balanced mix of examples, like having a user flow, a couple of prototypes (both low-fi and high-fi), few mockups, a case-study, an AB test that went well etc. This would give a general impression about not just your UX but also your thought process.
Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use
It is also a good idea to include recommendations that you get from your clients or from your organization. Explain the value that you add to business through your design work, and also describe the impact of your work on your user’s lives. Add links to your professional social media profiles to support your experience.
5. Answer the questions that you are asked
At times, there are candidates who are eager to share their experiences with much detail. The right length for interview answers is one to two minutes, as it is difficult to listen to someone for too long and your recruiter may get bored.
Try to give clear and precise answers that are specific to the asked questions. You can provide examples to support your answers, but don’t try to speak each and everything you know about UX.
If you provide solid information in your answer, you can deliver more in less time and its impact will be greater. Providing long answers containing irrelevant information can spare extra time, also it may not help you in any way in your interview.
6. Take your time to solve a design problem
It is a common approach to have a design task or exercise as part of your UX interview. This helps recruiters gauge your thinking process, imagination power and creativity. This is a tricky part of your interview and requires an attentive mind.
When you get a design problem to solve, always ask for a few minutes to understand it, though most of the time you will get it without asking. Read or listen to the problem carefully. Whatever has been asked in the interview, translate it in your mind to your own words and thoughts. Ask questions to clarify the problem.
One useful tip here is to try to relate the problem to any of the design tasks that you have already worked on. This will help you to go through the same process of ideation, user flows, sketches and layout. It would become easier for you to solve the problem and present it to the interview panel.
Keep in your mind that there is no right or wrong answer to a design problem. However, it is a good chance to show your design process, your way to solve the problem, and how you reach towards the solution.
Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use
7. Always think aloud
When you are asked a question in your interview, always think aloud as this will help the interview panel to understand your problem-solving approach, an essential requirement for a UX job. This is an important protocol when you are solving a design problem.
Lengthy silent periods can harm you as it will give no clue to the recruiter about your thought process. This is even more essential for a remote interview where face-to -face conversation is not possible.
Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use
8. Be honest, be confident and be positive
During an interview, always be honest in your answers, be confident about your knowledge and skills, and be positive in your communication.
We all know that UX skill is a mandatory qualification to earn a UX job. However, your attitude matters a lot. A big mistake that a person can do in an interview is not presenting himself as a professional worker. Good UX skills but an undesired behavior can harm you in an interview.
Be honest when you are explaining your work. If you don’t know the answer to a question, there is no harm to admit it. However, don’t forget to show your willingness to learn new concepts and trends. Be confident when giving your answers. You have the required knowledge and skills, that’s why you are called for the interview.
Author/Copyright holder: Unsplash. Copyright terms and licence: Free to Use
Think positive and behave positively. Everyone in the room wants to see you successful in the interview and that is the reason you are sitting with them. No one is there to make you feel bad or inferior.
Conclusion
Giving a UX interview needs a lot of preparation, whether you are an experienced or a fresh graduate. So, take time, prepare notes, study well, behave confident and perform excellently.
Make sure to follow up after the interview as this will show your interest for the job and thus leave a positive impact. Whether you are successful or not, make sure that you always get feedback from your recruiters as this can be a good learning experience useful in another future interview.
Want to get an industry-recognized Course Certificate in UX Design, Design Thinking, UI Design, or another related design topic? Then please consider signing up for Online UX Design courses from the Interaction Design Foundation (IDF). The online courses from the IDF will equip you with industry-relevant skills to advance your UX career. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research – Methods and Best Practices are some of the most popular courses. Good luck on your learning journey!
