UIX101 Design Together Workshop 🥳✒️
Before Workshop
💡Brief
• We are designing a “Create account” screen.
• The pop-up form will have a single frame.
• There should be a minimum of 1 and a maximum of 3 input fields.
• There should be 2 social login options.
• ⏱️Time limit: 2 hours.
During Workshop
🧐My Initial Choices
• I am really quick at finding or generating visuals 🦄. Therefore, if I create visuals while doing my research in parallel, my design can look richer.
• I overlooked the fact that the visuals I produced significantly reduced the white space, which made the design look cluttered and tiring to the eye 👀
• Since I tried to think of every detail, I included a "remember me" toggle 💭 This was unnecessary. A computer game typically remembers the user unless the game is deleted, so this can be adjusted.
• I added social platform logos in PNG format, which made them hard to edit and match the same style 👎
☑️Checklist from the Workshop
• Placing the "Already have an account? Log in." sentence in the top right corner was called dark UX targeting user psychology. However, the majority agreed that this is a modern and innovative approach. Making the “Log in” part bold and underlined or in button format would be good.
🧐Additionally, a single sentence can provide two different interactions. For example, "Already have an account, but forgot my password." This sentence can include interactions for both having an account and forgetting the password.
• When choosing font sizes, I usually relied on my intuition or previous choices. The most efficient way to do this is through “Typescale.com.” During the revision, I confirmed the font sizes I selected using this website.
• Making the “Sign Up/Create” button enabled only after the input fields are validated shows the mandatory fields (not indicated by “*”) by keeping the button disabled until then.
• Although border radius in UI design seems cluttered to me, there were successful examples. Adding a border color for error messages might save time on contrast adjustments. I haven't tried it, but I saw good examples ✌️
After Workshop
✌️Based on that checklist
• I reduced the number of input fields 👎 If users aren't very enthusiastic about signing up, there's no need to tire them out before they access the application. Later on, restricting access to certain features unless they connect their account can be a sufficient incentive for users. But early on, just knowing a nickname is enough.
• I tried using Auto-Layout in Figma. Although I struggled at first, I must admit it significantly sped up the process 😍
• 📱I imported social platform logos as SVG using a plug-in.
• If the user doesn’t want to connect their account, they can play a game saved only to the device with their chosen nickname. To save to the cloud 😶🌫️, they need to verify their account or link it with a social media platform 🔗
In conclusion, I created a UI template for myself. With my checklist, I established a UI design that can be commonly used for most games.
Typeface
Color Palette
That's how the first session of the workshop went! Stay tuned for more!
Contact Me
