What are /r/UI_Design's favorite Products & Services?

From 3.5 billion Reddit comments

I think I am one of the Jr. Designer, with an experience of 2 years, that fall within the inexperience bracket as you mentioned (1-2 yrs). Being the only designer, I do sometimes struggle with organisation and a lack of guidance is frustrating. My only source of knowledge is the web and a few Slack communities.

Often times, as a Jr. Designer, I don't know what I am doing wrong unless someone of your experience corrects me. So I think you could act as a mentor and guide her as to what needs to be done, share a few resource she could look into to learn etc instead of revising her work, which can be devastating so early in her carrier.

Most of my last 2 years were spent in learning how to patiently accept criticism without being defensive and aggressive.

Ours is not a billion dollar company, so I hope this still counts.

​

Also, I would love it if you could share a few tips on how to grow as a designer in the next 3-4 years. Here my Dribbble account for your reference as to where I stand currently design wise - https://dribbble.com/_aloksharma

• The Design of Everyday Things - Don Norman
• Don't Make Me Think - Steve Krug
• Universal Principles of Design — William Lidwell and Kritina Holden

I've tried to make the elements that we need while working on a product.

The buttons, inputs, paragraphs, etc can be customized and you can continue your design process.

Here's the link: https://www.figma.com/community/file/1020642186098908700

Thank you!

I wouldn't use Dribbble to find a mentor. Look into some Slack groups, UX Mastery has a peer mentoring program (disclaimer - I haven't participated) and there are other design centric channels. Also check out meetup.com for design meetups in your area (if you're in a large enough center). You can also post messages within groups I believe, that would be an appropriate place to ask about mentorship opportunities within local design communities.

lol materialistic fonts

Damn capitalists

Anyway, I get what you mean. Roboto would be the obvious one, made by Google. I recently use Raleway a bit. https://fonts.google.com is a good place for free fonts that you are actually allowed to use. Also pretty easy to use and integrate into stuff

Yeah your job is to anticipate their questions. But you should set up a meeting with them where you walk through it and let them ask you questions. I guarantee they will bring up things that are blindspots for you. That's okay! You want to bring them in some the collaboration process makes their lives easier and they don't have to figure out design shit for you.

Make sure they know how it responsively works. Ask them if they want more than three breakpoints—Desktop, Tablet, Mobile. Figure out what happens on extra large screens by maybe setting up a max width before margins appear. Make sure your assets are exportable and they know what type of asset (ie. SVG vs PNG vs JPEG) should go where. If you're using PNGs and JPGs, use imageOptim (free) to crunch down the file size. Somewhere around 80% of users who abandon sites do so because of slow loading.

As far as the sequence of the user journey, ask yourself, "Where am I coming from? Why am I here? And where do I want to go next?" That's a good way to start annotating your designs. Try to think of not just the happy paths, but the recovery paths.

Read up on this developer guide. Figma to react.

Good luck.

To be honest, since it's new, it's lacking a lot of stuff. Simple stuff. Like gradients and what not, but the future for XD looks promising.

I've been using Sketch + Invision/Craft and it's hands down a near perfect combo! Try it out!

UXtraining.com

Ideou.com

Things to google:

Human Centered design

User Stories

Lean Startup Machine

Nngroup

First principles of interaction design

Books:

Norman Doors (The Design of Everyday Things)

Lean UX

Sprint (from Google)

Don't make me think

About Face

Designing Together

Edit: formatting on mobile is hard

>But fuck me will figma hurry up and add a good spellcheck help a brother out.

There are a few spell check plugins you can use until spell check functionality (finally!) gets built into the program. https://www.figma.com/community/search?model_type=public_plugins&q=Spell%20check

None of these are perfect, but here are some that stand out because they impressed me in some way and are at least "good" overall.

• Google (the search engine; it used to only get used as an example of how minimalism can be good, but they've maintained that degree of simplicity while continuing to do a ridiculous amount of incredibly useful innovation, and they've done it so well that it's practically invisible and nobody really talks about it)
• Google Maps
• Google Calendar (specifically the web app)
• Facebook Messenger (specifically the chat bubbles)
• Monument Valley
• The Hit List (mac only)
• Pomotodo
• Accomplish (the time management app on android)
• Pocket Casts
• Momondo (particularly the website)
• Rome2Rio
• NordVPN
• Uber Eats
• Startactics XW
• Newsmap.jp (no longer works, but it was my favorite for a long time)
• The Wirecutter (before their last design overhaul; the current design is fine, but it's nothing to write home about)
• Gecko (a usefully unique text processor web app)
• Manjaro Linux
• If This Then That (especially the web app)
• Carcassone (android and iphone app version of the board game)
• Weather (android app that used to be called Weather Timeline)
• Decision Crafting (android app)
• Mini Metro (particularly delightful example of how intuitiveness can intersect with progressive disclosure; also, I'm impressed by just about any game or anything else remotely complicated that's designed well enough to not require a tutorial, instructions, or in this case, even labels)

I've listed them in no particular order. (Hence the unordered list.)

Enjoy.

Good start. My biggest pro tip, I noticed on the Miss Cellophane page (Android 2) is that your social icons have been stretched and don't have their original proportions. Make sure you're keeping the proportions when you resize images and graphics. You want to keep things looking how they were intended by the original designer.

​

Overall make sure elements are positioned where you want them to be. I noticed some text blocks not centered in containers. (Such as the "Get Started Button")

​

Preview your designs on a mobile device as often as possible. Some of your text may be too small when viewed on mobile. Conversely make sure your elements aren't too big. "The Difference" logo feels huge and like it's a waste of space.

If you haven't already, go check out dribbble.com. There's a lot of really good UI/UX designs there and it's worth using as inspiration on how to solve problems you may face.

As u/j1ggl pointed out, Rubik seems to have several variants. In case you're not familiar, the font-weight css property accepts numeric values: 100 - 900 (in increments of 100 so not sure why they didn't just go with 1-9 :P) so if you're ever in this situation, you can try something like 800 or 900 which should give a heavier bold if the font supports it. In this case, Rubik does, so give it a shot and see if that works out for you!

HTH, Matt

It's definitely a good starting point, so very well done. Personally I think it's missing some depth and contrast in the UI. You need to define a more rigid visual heirarchy to differentiate between section/panels.

Your icons introduce too steep a learning curve - they aren't very familiar patterns, so it would be laborious and prone to errors when training users on the system and expecting them to get used to it.

I would introduce some interactions on the modals when they popup - because they appear onclick right away, it can be easy to miss (especially when coupled with the lack of visual heirarchy) - some intro animation could help with this, but also consider a background overlay, and box shadow on the modal itself to focus on the highlighted content.

Overall the colour palette does nothing for me. It's RGB, full red, green, blue etc. with some neutral tints and shades. I think you need to define a proper brand colour palette with a little more subtletly than shown here. Possibly consider consulting some like Kuler, or another palette generator?

Unfortunately, you won't be able to get legal, free access to helvetica on a windows PC. You will probably also run into other roadblocks by using a Windows PC for design.

If you are subscribed to Adobe CC, you have access to Typekit, which includes Nimbus Sans, which is based on helvetica.

But, to get the real deal on Windows, you will have to either buy it, or acquire it.

I think it's cool! Now no need to convert into GIF's some of time-lapses and post only after. Actually, new hype around posting Dribbble videoshots may happen. And the challenge is to show an idea within 24 seconds. For easy interactions, it's more than enough, but for something more complicated... Will see)

Just quick video shot I made for testing

Made with Hypercam > Windows Movie Maker (7x boost) > Dribbble :))

Check this out

https://www.figma.com/proto/o8rapDFocDxWJjrucLjPnN/Fara-Project-1.0?page-id=0%3A1&node-id=123%3A7137&viewport=242%2C48%2C0.14&scaling=min-zoom&starting-point-node-id=2%3A7072&show-proto-sidebar=1

You can apply a grid to any frame. So, frame your section and you're able to apply grids, constraints, auto layout, etc.

https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/nested-grids/

Not really, it's like alcohol. It's cool when you do it with moderation the problem is everybody does it anywhere anytime. Personally I favor Icons8, especially when you can get the client to buy a year subscription as "a vital component of the project" 😁 😁

It helps, but depends on the requirements of the client. I try create custom-made icons, but usually stick to one I can find on Flaticon. If the client has a big budget, I'd spend some time (or money) creating custom icons that can be shared on social media, presentations, the website, and other brand identity usage.

Just my 2 cents and could be wrong though.

Depends on company/team size. As u/tildesigndouspart said, bigger companies will have design systems (libraries) established that contain just about every type of UI element you'd use in the app/website. It includes color, icons, layouts/spacing, typography, buttons, inputs, forms, etc - literally everything. So when it comes to designing the product, you have building blocks to choose from and it's like piecing together a puzzle. Take a look around at Uber's Design System on Figma for a good idea of what these design systems contain.

Now with startups or smaller companies that don't have established products, yes there will be more Googling of how to design specific elements or flows. Overtime the Googling will settle down as the design system becomes established, and I assume devs will follow the same route as they improve their knowledge of code. But devs do experience a lot of technical issues that UI designers won't run into as much, so yeah they'll be doing more Googling than us in general.

Apple can afford to put that much time and money into TINY features, and it's probably worth it with how many users they reach around the world. Rather than Googling what to use, Apple studies these things in depth then builds them out from scratch which leads to innovation. LOTS of work goes into the tiny details at those companies while most smaller ones can't afford it.

If you need any help trying to figure out accessibility ratings you should try Stark. Also available for Sketch. Only drawback is that it doesn't work with gradients.

I've taken a glance at your design, I think you can improve your design by considering these suggestions:

- Using a combination of typefaces include Serif for Page / Section titles and a minimum one for paragraphs and other UI elements.

- using Cream color just for special sections.

- Avoid using neu-morphism, Just use high contrast colors for buttons.

​

- Your design subject is amazing, so You can use video for your homepage cover, Also, you can show a 3d model of some products that users can spin them

​

https://www.figma.com/file/HLVjvzoDuN8z2GwG7QrzLz/Untitled?node-id=0%3A1

I posted something similar a while ago. I did some research for job ads and could only find results for "Audio plug-ins developers". Couldn't find a differentiation between GUI Designers and programmers.

I made a plug-in myself and can tell you Photoshop might be more suitable for this as you need advance image manipulation features.

Take a look at the case study

Yes.

There is a reason a lot of people have switched to Sketch for UI. It is built from the start to be much, much simpler than photoshop, and is made specifically for UI. It is far better for designing UI than photoshop. I've used sketch professionally for almost 3 years.

Since you aren't on mac, there are also a few promising alternatives that will work on windows. They don't have the same level of adoption as sketch, as they are newer or not officially released yet, but check out Figma, which is browser based and Adobe XD, which is in beta

Sketch has incredibly robust exporting built in. You can specify relative sizes (@2x, @3x), or absolute sizes (320w, 90h) as well as a suffix ( _xxxhdpi), and multiple formats (jpg, png, svg, etc).

I've even been using Sketch to batch resize jpg images with 20 export sizes per image (product photos and thumbnails for web, iOS and Android). It is the only thing I've found that can do what I need without having to resort to scripting.

And I haven't used Photoshop for UI work in probably 4 years, but Slicy was a pretty great tool back when I did: http://macrabbit.com/slicy/

Since you've already done the work to create a design system, I would encourage the client to allocate engineering resources towards implementing your design system in a generalized way as a component library, even going so far as to create some component documentation like storybook. This way, the redesign of each flow will be quick, painless, and without need for pixel perfect designs. This should make some redesigns so obvious they won't need your intervention. Others might only need wireframes, and only a few should require a full design. It will also enforce good design with code, even after you move on, by making it hard to break rules and easy for lazy engineers to use good design rather than inventing their own "creations".

They have a very comprehensive step-by-step starting documentation, what is complex about it ?

This course looks like a good alternative though.

Kind of an old standard, but The Design of Everyday Things by Don Norman changed the way I look at everything I interact with on a daily basis. It's a little dense at times, but it's still a solid text.

I do but it's bad stuff for reference. Initially applied with my Behance but somehow they found my dribbble lol.

Also I'm saying bad for reference because it's mostly just for design, not any relevant problem-solving in UX. Still surprised they called but hopefully I'll prove 'em right with the test.

https://dribbble.com/shots/6428265-Music-Player-UI

Hello, it appears you tried to put a link in a title, since most users cant click these I have placed it here for you

^I ^am ^a ^bot ^if ^you ^have ^any ^suggestions ^dm ^me

I'm interested in this as well since I'm currently building an app that heavily involves searching via an API an designing the UI is the most challenging part for me.

I've been adapting this design I came across on Dribble for desktop apps. https://dribbble.com/shots/4005929-Droplr-UI-Style-Guide-dark-version

UI design is complex in a very different way from traditional graphic design. You must balance making an interface look good with making sure the user knows not just that some element is tappable, but also what to expect when they tap on it.

There are a ton of examples of UI on dribble that look nice in a static screenshot, but wouldn't make any sense as an actual interface.

For example, this set of screenshots for a 'hotel management app' look nice at first glance, but are totally nonsensical if you think about actually trying to manage a hotel with this UI.

Designing a UI that looks nice AND is useable is a deceptively difficult thing to do.

Watch sample vids from app launch screen

Download a sample file and play around. This one is great

https://dribbble.com/shots/3066583-Adobe-Xd-Onshore-App-Design

XD is missing that fear of missing out on functions ever present in photoshop. It's all right there.

What a great app idea!
There's a lot of imagery with the app, it might help keep the user engaged to see more about why they should use the app. Help the user see your story.

Photos of people doing makeup might be especially helpful.
Stacks and stacks of unorganized shadows could be a cool background.
https://www.pexels.com/search/makeup/

I think you will like it, it really covers all the basis of what you need as a modern web designer.

One heads up though, I just had this issue when I loaded a bunch of large image files into a project, but if you all of sudden notice all your HD space is gone, I found that Sketch keeps a hidden folder only visible from root user that stores your autosaves & revisions that can fill up super quick. I had to go in the other night and clear out a 350gb folder. Just follow this article if you run into that issue:

https://dribbble.com/shots/2184593-Sketch-users-Free-up-some-space

It does look good but there's a few things I would change before this was published.

As another commenter pointed out, almost half of the map is being blocked by the scooter and there's also the text below that says "Scanning Rides Nearby" if this was on in iPhone then half of the text would be blocked by the home indicator.

I'd highly suggest using a UI kit. Here's one for iOS 14: https://www.figma.com/community/file/971272266272903929

I noticed the font on the clock at top left isn't the iOS system font as well, not a big deal but using UI kits helps with aesthetics.

Wow, great tip, it looks waaay better like this(putting the scrollbar on the other side seemed to bring some symmetry). I think I had drawn my inspiration from the generic sidebar (like the one on youtube) and didn't even consider not putting it on the side.

I've also struggled alot with the font size for the sidebar. I wanted to make the font on it bigger than the one on the content (to emphasize the titles being more important / on a higher level than the content), but just couldn't in any way. I guess proportionality (relative to the container) plays a big role here.

>it's always fascinating to see what someone who just a designer comes up with

Yes, I feel the same way. I've seen projects on Behance and Dribbble that look nice but awful to build. I too design and always put usability, simplicity, and consistency above flashy graphics.

​

>As for grid, I meant like CSS grid. Idk if Bootstrap has started using it yet

The Bootstrap grid is built using Flexbox, not CSS Grid. I must admit, my knowledge of CSS Grid is very limited as I've only used it once. At my company, Internet Explorer support is a requirement so I can't ever use CSS Grid since it's not supported on IE. But I get what you mean. Nevertheless, the Bootstrap grid system is fantastic and is excellent for responsive web design. It has not let me down so far since we've adopted it at my company.

the noun project is a great place for icons, if you didn't already know of it.

You can edit their color in figma as well. Just gotta included the author in your alt attribute.

Pixate is great free tool that leverages the iOS simulator and creates lush animations. Pretty sure it will get you what you want. Low to medium learning curve with nice documentation. http://www.pixate.com grab the native app for best performance and results. Here are the demos http://www.pixate.com/education/demos/

You could try a version without and compare. Check https://color.adobe.com/create/color-wheel/?base=2&rule=Analogous&selected=0&name=My%20Color%20Theme&mode=rgb&rgbvalues=1,0.8235294117647058,0.050000000000000044,0.91,0.4420377042487701,0.04550000000000004,1,0,0,0.6399684491978... for nice combinations.

or explore existing

https://color.adobe.com/explore/?filter=most-popular&time=month

Hey dude use Adobe Media Encoder CC for rendering, there you can render your After Effects file into a high quality .gif file.

Here's a video that helped me out: https://youtu.be/p9GjnSWCs3k

Otherwise you can simply use an online gif converter, simply upload your .mov file and convert it.

https://ezgif.com/video-to-gif

It was for a uni project - we had to pick a topic and design an app for it. The concept app I made is called Checkboxes. It would serve as a front-end to the tosdr.org database. And it would let users sandbox other apps. I wanted to make it as easy as possible to use - I designed it to be used by my mum, heh.

I second the point about existing design systems. Once you've settled on a library look at what components you have access to and how they can be configured. If you're stretched because you're new to front-end, it will draw things out more if you have to build components from scratch, so the best thing to do is design within the constraints of what those libraries have to offer, and only step out of it to build something yourself if you absolutely need to.

I'm not in entirely the same position as you but definitely similar. I used to be a developer and am now a designer. The devs on my team are more back-end focused, so I centre my designs around what can easily be delivered with existing libraries.And it's usually really easy to tell from demos on the website E.g. https://material.angular.io/components/chips/examples

I think Adobe kinda missed the ship and came out with XD a little too late but, there's always room and time for improvements. Variety doesn't hurt and the more options of tools there are, the better.

I did enjoy the prototyping in XD and how I was able to export it out as a movie, it was super easy but it's nothing new. Principle has had that feature for a while.

Personally, I think it comes down to choosing the software that works best for you and the one that you're most efficient with.

Here's their website where you can request Early Access and here's a video in case people are interested. I've tried signing up for that early access but haven't heard anything back so far.

Don't Make Me Think - Steve Krug

The Design of Everyday Things - Don Norman

This is an Android app my company uses internally to help our designers wireframe & prototype UI on Android, and we got permission to release it to the public for free. I'm the Android dev who created it so feel free to ask any questions or request features and I'll see what I can do :) If we get a good enough response we might be able to get permission to do the iOS version, too. This is capable of exporting SVGs that import well into Sketch, btw.

Google play link: https://play.google.com/store/apps/details?id=com.ludomade.blueprint

I redesigned the Medium User Profile for the Daily UI challenge. I didn't like how the User Profile of Medium only can show 1 article at a time.

• I also added a draft / make new article button at the top right.
• Use op the whole horizontal space of the page, just like every other page on Medium.
• I've added the handle underneath the User Name.

​

I would love to hear you thoughts, any feedback is welcome. You can also find the dark themed design on Dribbble. I've also made a white themed version on Dribbble.

>https://dribbble.com/sa\_arteaga

PAHAHA The guy is selling this, what I can only assume is an image, on Gumroad for $3... I hope you purchased before posting on here. Images rights and all that.

Ty for the idea, will rethink more on next project.

1.2 the time and date is there, under the city name on top left

1. Its at the botom there are weather forecast

2. Notifs placed on the shortcuts, shortcuts are hidden under, will need to swipe

https://youtu.be/5JCoXCo5F9I

https://dribbble.com/shots/6575579-Wayside-Animated-KLWP-Wallpaper

Hello everyone! Thank you again for the feedback!

I've made some changes and posted this file on dribbble.

Check it out Plant Baby

It looks a bit too fast in gif, but I could'nt figure out how to post a video update in this thread.

​

Thanks again everyone!

Thank you so much for your feedback. I really appreciate what you said but actually it was a responsive version of my another landing page. if you see the design <strong>Here</strong> I hope you will understand the concept of this design. :)

Hey there, thank you if clicked here! If you want to have more info about it, and the studio file, you can find it on my Dribbble: https://dribbble.com/shots/6085702-To-Do-List-App

Hey there! I believe IKEA should do an app that replaces paper instructions and that's something I've been thinking about for a while, hence why I've made this prototype - IKEA Assemble. It would make it easier for people to assemble their furniture while also saving paper, all by scanning the product barcode. And for those few people who don't own a smartphone, all IKEA guides are available on their website. :)

Made with Sketch and InVision Studio

Find me on Dribbble: https://dribbble.com/calindoditoiu

Main concern is that it looks very much like this popular post on Dribbble.

Like another user pointed out, there’s a lot of images on the page and I think the smaller ones kind of get washed out. Might try making those into cards of some sort to clearly delineate that those are separate pieces of content to interact with.

I would also suggest adding more more contrast to the type (varying more heavily between large type and small type, specifically with the sub header.

Hi, it's great that you are offering your invites. Thanks!

Please take a look at my "draft" dribbble account https://dribbble.com/gueri

I have 18 years working in advertising. My career started as an art director and moved to creative director and digital marketing. I want to go back to make projects more design oriented.

I shared my SVG Editor app with you guys sometimes back and since then I have made some useful updates! The biggest one being a Component Library feature which lets you design and reuse components in different projects! Would love to listen to your feedback so I can improve the app further

Try it out here: Android iOS

Try it out here (Android)

(Register as beta tester for the latest features)

Check out the post before to see the progress

Suggest Features/Report Bugs on r/vector_editor

Hi there! I have been developing a graphic editor for Android/iOS devices. Would love some feedback from UI designers on what features are essential for you to have a good on-the-go designing experience!

Try it out here

Hey guys, I made an app for Android to create color palettes using AI and show color schemes (analogous, triadic, complementary, etc) for a specific color. I would like to receive some feedback. It’s completely free, btw.
Link

Yes look for iOS UI kits on the Figma community and use what they have there - status bars with all the icons you need, home indicator, etc..

For icons, I prefer to use Material Design icons from Google Fonts, and instead of the icons being a shape they act as a font/text. You can download the Material Icons ttf font, and then copy an icon from the Google Fonts page and paste it into Figma as text, and when you apply the Material Icons font to it it'll change from text to an icon.

For example, if you wanted a gear/settings icon, you'd go into Google fonts and find the settings icon -> copy it -> paste to Figma then change the font to Material. It'll change from 'settings' to a visual icon.

Think about Accessibility. Currently your contrast between text and background is very low!

This website helps you figure out color contrast https://color.adobe.com/create/color-contrast-analyzer

True! I think it was a good strategy, but I also feel--solely in Spotify's case--that they are trying to pivot and experiment with other directions. I think they did awesome in that respect when they had Van Schinder on the team as art director.

https://www.figma.com/file/2JCuqmsecz8w9WLnNqeXfZ/Liquidation?node-id=0%3A1

Here is the revision I did. It definitely looks cleaner to me, but that is not saying much :D.

I didn't get to answer a few of your questions regarding my product. As much as I would love to get product pictures, it just isn't feasible. A lot of these pallet buyers are buying these "blind". The reason is the goods come on a full truck unmanifested, which means the retailer threw a bunch of crap on a truck and sold it off as liquidation. The only way to actually figure out the item would bet to take every individual item, scan the UPC, find a quality database to check against that MAY have that product data to match the UPC, and then grab the product info. It's not only a lot of labor, but it has a lot of pitfalls in even finding the correct product data.

Now, the "manifested" pallet section will have a list of items, and hopefully, a stock image per item display to the user. I planned on showing all that information on the actual product page when they click on the image (or a button - don't know yet), since it's going to be a list of about 30+ items.

In either approach, having pictures of individual items would involve a lot of labor/time, and I am not sure I am up to that challenge yet.

Sorry for the word-vomit! Just wanted to explain the constraints on highlighting the product. IF you want to get back to me, take your time! If not, that's okay too - you've helped me a ton!

Color pallete could be improved. I use Material theme color pallete generator even for non material design ui.

https://goo.gle/material-theme-builder-web

https://www.figma.com/community/plugin/1034969338659738588

I know its too late but if anyone is still looking: https://www.figma.com/community/file/886999666531731323

Figma has a nice icon pack in SVG format, thanks to Vlad Lucha for creating the project!

I don't think AI is needed here, you can check out this Figma plugin:
https://www.figma.com/community/plugin/1049994768493726219/Inspect---Export-to-HTML%2C-React%2C-TailwindCSS

*disclaimer - I made it

Thank you again for the feedback! Just replaced the right hand side pic with white space, logo in the center and a vector design on the corners might try another design but you were right. It looks cleaner and feel like I'm able to breathe. Also fixed the spacing which was pointed out in the thread. Let me know what you think:

https://www.figma.com/file/6bolfy0uSOl2EpXTycYydb

Thrilled to launch our first Figma plugin.
A library of auto layout UI elements and blueprints.
https://www.figma.com/community/plugin/1060213973572396708/Figit---Auto-Layout-UI-Components

This is my app link:https://play.google.com/store/apps/details?id=com.eco.musicplayer.audioplayer.music

You can experience and give us comments. Thank you very much.

First, fix the "get srated" typo on the CTA button before you show it to the client. :)

I wouldn't say this comes across as childish at all. Adults like vivid colors, too. I'd say this adds a welcome bit of playfulness to a platform that exists in an industry that's legendary for being stodgy, bland, and dated visual design. Your design is something I like to look at. The star/space pattern feels subtle enough that it doesn't seem childish as well.

Stripe is a good example of a company that absolutely needs it's customers to think of them as serious and trustworthy professionals while having playful elements.

Try using Google Fonts (https://fonts.google.com) in your designs, developers will love you if you do that. They are very easy to implement and also they render on 99% of the devices. Because the way it works is that if you use a custom font like SF or any other font and for some reason there is a bug or the server or is a bit slower that font will be replaced with a back up which usually is set up to Arial or Times New Roman and you can imagine how your designs will look with those fonts. 😄

Yes. Discard the Didone for menus, it's unreadable, and if you really want to use one, use one with more weight and less strokes like Playfair Display. But as a rule of thumb, only use sans serifs or serifs if you can really balance your font in menus. It's designed to be read, clicked, and be the traffics signs within your website. Don't let them hinder your user's trip.

Reduce your interline for body text.

Never use full blacks in a font color scheme, but instead mix them with a slightly colored hue. Same goes for your greys, it's less strenuous on vision.

Your home needs work. If it's only typography, you need to finetune it to the death. I can immediately tell you two things : increase your lettering in the caption, and turn your subtext in a very light shade of grey.

Yeah, i will definitely work on chart readability.
Good idea about focusing on day quality instead of date, i'll give it a shot

For project i used Nunito font, here is the reference:
https://fonts.google.com/specimen/Nunito

You're going to want to look into isometric photoshop templates such as the one here. You just have to save your design out at the appropriate dimensions (usually as a png, tiff, whatever your preference is) and place it in the mockup in the labeled photoshop layer.

Get Adobe XD. Look at the quick tutorial videos and get started. No need for InVision just click over from design to prototype mode. Use the iOS, google material, or windows UI kits to help you get started if need be.

Sample files like this one show you most of what can be done with the product: https://dribbble.com/shots/3066583-Adobe-Xd-Onshore-App-Design

Once you have a clickable prototype in XD it's easy to share on the web, collaborate or user test.

All that first, then find a developer. That way you can show him/her what you want to build.

Hi lovely people:

Here's the download Figma link: https://www.figma.com/community/file/1058621888361921415

Here's the concept:

Imagine there are several topics.
Such as work, visa processing, application review, college assignments...
What if we create a sort of twitter thread like history app for them?
User --> topic --> latest updates
Use case: Student who skips class
Student --> App --> Class --> Latest updates
Visa review process
Person --> Visa Review --> Updates, notices about Required documents etc

Thank you so much for your feedback! I appreciate it a lot. I'm not going to sell this design or anything, so I hope I'm good. I took these apple faces from here: https://www.figma.com/community/file/1008771490694920129

You might be right about the background of the anxiety's card. I'll change it before posting it do Dribble.

So yeah, thank you once again for spending time to write your feedback!!!

No code? Can't think of anything. The closest to that might be a component library for a js framework, like Quasar for Vue. Still need to build functionality yourself, but it takes care of a lot of it.

The link to our launch or our plugin directly.

Happy designing 🎉

The link to the plugin or this one.

&#x200B;

Happy desigining!

Anything that stands out/contrasts from the purple. The actual color is just a design/art decision. I like Adobe's tool for getting ideas on color combinations: https://color.adobe.com/explore

Of course, keep in mind that some colors may imply meaning. For example, grey is often associated with disabled buttons. Red, can imply the button is a negative response or a "dangerous" operation. Those aren't rules, but you should think about how users will perceive things.

As others said it's basically a marketing thing. You want to think about how the colors will be perceived and whether they fit with brand.

There are other important concerns though. You want to make sure there enough contrast between text and background colors for both the average person to read and for those with accesibility requirements.

Contrast is also important in more design related ways, such as ensuring important elements like buttons are a color that stands out.

Adobe has a cool site full of color pallettes: https://color.adobe.com/explore

I like to use it for inspiration. I don't think I've ever used a pallette exactly as it is on there, but it's a nice starting point to see some color combinations.

From my experience, Figma Community is a great place to get a ton of free exposure, and Gumroad is a great place to sell UI kits & other design assets. Hope this helps!

help.gumroad.com/article/301-sell-ui-kits

I’m not aware of any game related UI challenge, but what I would suggest is if you can take screenshots of games you enjoy / like and replicate the UI. It’s a great way to learn the styles and techniques.

I would highly recommend using Figma as a design tool, and you could even build game related UI kits. Similar to this Zelda - Breath of the wild

It gets complicated quickly but this article explains it pretty well. Basically, fonts have leading and like heights associated with them (baked into the rendered font). These are used in dev work not things like baseline or vertical height of the font.

If you want visually 16px of spacing you should account for that in the way the font is digitally rendered (say shave 2px off).

So, no. Don’t shrink the bounding box/container around the text and communicate that only. Have a dialog with dev to ensure you’re speaking the same language and looking at the same thing.

Inkscape is free and probably one of the best Illustrator alternatives. SVG is its native format, so iteroperability with other programs tends to be very good. You should definitely see if it meets your needs before going to a proprietary program.

Thanks a lot for ur suggestions - in the production version I ve already changed the paperball design. One Test user also mentioned it - I know it’s stupid to post an older version of the ui. In case u want to see how I the production paperballs look like: https://play.google.com/store/apps/details?id=de.Appnetic.Papermade

Please don’t get me wrong - I am simply looking for feedback and improvement - no need to download

Totally agree. The experience is going to be very similar to one of my other apps, Swipe Business News. No setup, none of that. That I have already covered. I guess I was looking for a magic bullet of sorts...

I love it, great color palette! I think if you make the paper plane icon solid instead of an outline icon it would match the style of the faces more. But other than that, love it.

https://thenounproject.com/search/?q=Paper%20plane&amp;i=367827

LUV is also on ProductHunt: https://www.producthunt.com/posts/luv-design-inspiration

If you like the app, please share some love and upvote it, thank you!

here some article that would be helpful for you. https://www.intercom.com/blog/the-dribbblisation-of-design/

&#x200B;

in my opinion, design is about solving problem and doing daily ui is impractical.

if your design is lack of background, problem, goals and users description then it's only wasting your time. Unless, you only want to improve and increase design skill then doing daily ui is benefit for you.

I think you should have a look at Intercom's site (https://www.intercom.com/) for inspiration. They have one menu for products, which pops to reveal simultaneous products and solutions (applications in your case) menu, when the mouse hovers over it.

I understand it's not real, but even in an exercise it's good to understand and flesh out a problem before solving it. For example, check out Uber Eats or Wolt to see what problems they are tackling and how. Product descriptions / portion sizes / delivery options / allergens etc. can be very streamlined in food delivery and ordering apps, it's not just a text field but a whole UI.

That said, I don't know what exactly you were trying to solve in this exercise, so take this with a grain of salt :)

Hi! thank you for the response. Currently I'm looking at using Meteor, so I will be using JavaScript and then MongoDB for the database structure. I personally haven't done this part of the research much, my brother has.

Does leaflet actually not support a touch event? On the documentation page it has a section on touch events (http://leafletjs.com/reference.html, search "touch")

What kind of icons?

You would be wise to use a service like https://icomoon.io/

They have all the icon fonts you could want and you customize your own collection and download them as a font. They come with SVG versions so they will be crisp and with a tiny bit of CSS, you can use the <i class='myfont-telephone'></i> nomenclature to add an icon of a telephone.

Plus, I think they have thousands for free.

I feel your pain as I am a designer but lack the dev skills on most anything beyond CSS.

Check out https://fonts.google.com/specimen/Open+Sans

Scroll down to Popular Pairings with Open Sans and it gives you suggestions with visuals for each lockup.

Each font on the site has recommendations it's a great cheat sheet and place to start.

I would recommend http://colormind.io/ for color palettes.

A runner up would be https://color palettes.com/?utm_source=bypeople.com&utm_source=phplist865&utm_medium=email&utm_content=HTML&utm_campaign=Top+10+Handpicked+Freebies%3A+eBooks+Web+Developers%2C+Holographic+Textures%2C+CSS+Flexbox+Tools%2C+Fonts%2C+JS+Plugins+%26+More

Not sure if this is what you mean, but I found this site I bookmarked eons ago...

http://colormind.io/bootstrap/

Basically, input in the color combination and they show you how it looks on a Bootstrap site and on some sample UI components.