#DailyUI Feedback 046–050
046 — Calculator Logo by Abu_Mikey
Feedback
Nice design. Every section seems to have a different shape. The goal of the icon is to represent the app itself. In an actual calculator app, the ‘add-subtract-multiply’ have similar background and the ‘equal’ button has a different color, usually a primary color. The icons lack consistency as the ‘add’ and ‘multiply’ icons have rounded ends whereas the ‘subtract’ and ‘equal’ icons have sharp ends. The highlight seems to differentiate the icon into to light and dark parts rather than act as a highlight.
Changes
- Changed the background color for all the icons with the primary color for the equal icon
- Changed the colors for the icons to match the background color and improved consistency with the icons
047–Signup Page by demola_olayode
Original Tweet by demola_olayode
Feedback
Nice design looks clean, but the elements can be adjusted for a better visual design. The header icons look nice, but the icon size can be reduced as well as the color can be changed to a dark color rather than the primary color. The ‘Don’t have an account?’ text can be omitted and rather used on the login page to redirect users to signup which brings up another major issue with the design. The field structure is that of a login page on the signup page. The username or email field and password field are suitable for login page, but on sign up, we need to collect the users’ basic information hence the username and email fields need to be separated. It’s a good practice to add a show/hide password icon or button. The link to redirect users to login must be below the signup button rather than above it.
Changes
- Changed the size and color for the back and option icons
- Omitted unnecessary title text
- Changed the field structure and added labels as well as a show password icon
- Changed the signup button to be consistent with the fields
- Moved the redirect link below the signup button
048 — Event Listing by rafalfonfo98
Original Tweet by rafalfonfo98
Feedback
Nice concept. The components as well as the design overall seems clean and nice. When the listing is location based, give users the option to change their location rather than a title. The search bar as well as the categories sections are nice. The event cards have some unaligned components in terms of their margin. The bookmark, share and like icons can be arranged in a contextual order and with more spacing to avoid accidental taps. The event details screen looks empty. You can add a event details section to make the page feasible and make the design better. A very nice design overall.
Changes
- Replaced the title with a sidebar menu icon and added a location selection for header
- Changed the primary color and dimensions for the category pills
- Changed dimensions for the event cards and re-positioned the elements
- Added a note to indicate the end of the list for this week’s events
- Added a event description paragraph to provide more information and context for the event
049 — Share Page by ShreyaNagvekar
Original Tweet by ShreyaNagvekar
Feedback
Nice design, I like the clean and aesthetic visual style, but the share sections doesn’t seem to match the rest of the design in terms of visual style. Although the challenge focuses on the share icons, try to keep focus on the rest of the design as well. The web page doesn’t have proper context. The share section doesn’t have enough contrast on the background image as well as the color doesn’t seem to be from the same palette. Making it simply white would improve the contrast as well as match the colors in the design. A very nice concept and design style, keep it up!
Changes
- Followed the same basic idea but changed the context of the idea and in turn, the design
- Changed the design from split view to complete view
- Changed the colors to grayscale wherein the would use green once the users choose to donate or volunteer to signify them bringing green into their life
- The ‘Donate’ and ‘Volunteer’ buttons take place for the primary CTA and the sharing icons are placed below as the secondary actions
050 — Music Player by Abu_Mikey
Feedback
A very nice concept, I like the presentations for the designs. I did not redesign the artist page, but only the player page. Try to focus on alignment in your designs, using guides/rulers along with grids will help you a lot, these tools are available in the design tools. To start, the down icon and ‘No Playing’ header are not aligned and the font size for the header can be reduced as it is the second largest font size in the design and it doesn’t need much attention. The album art looks nice, nice touch with the vinyl player illustration on it. The like and download icons don’t seem to be the same in terms of size, the download icon looks bigger. Even when using circles around icons, try to keep the icon sizes similar. The track name needs to be the highlight of the page and hence can have the largest font size. Good job with the hierarchy in the track name and artist names. The seek bar looks nice, but it’d be helpful to add the current and total time of the track along with it. To highlight the play pause icon, you can use a filled icon to distinguish it as well as provide highlight. Both the icons below the controls are usually used for repeat, try to use traditional icons or make them distinguishable enough so that the users are not confused. The lyrics title is too big, and can be eliminated completely.
Changes
- Changed the primary color to match the color in the album art, I’m guessing you matched it as well
- Aligned the icons and reduced the font size for the header text
- Changed the album art to include a shadow with the same colors as the album art rather than black shadow
- Changed all the icons to improve consistency and changed the play/pause icon to a solid circle with the icon cutout
- Added timestamps to the seek bar
Conclusion
This post was worked on across weeks but it also covers a lot of different projects ranging from app icon to signup page, an event listing app, landing/share page and a music player.
