#uidesign
The first version of the user account settings layout. #kbin #ui #uidesign #fediverse
How quickly meanings accumulate around an image like this.
What does it mean to you?
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
Wundervoll ist auch einfach das. Macht mich jedes Mal irre. #iOS #UIDesign #ItJustWorks
“Professionalism is caring more than is reasonable to get it right.” — Dan Saffer
_____
#Design #Business #Design #ProductDesign #UxDesign #UiDesign #WebDesign #Development #WebDevelopment #WebDev #Quote
Sometimes an icon is just a label...but think how much it means.
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
What we've learned about designing for accessibility from our users - Slack design https://slack.design/articles/what-weve-learned-about-designing-for-accessibility-from-our-users/ #a11y #slack #UIDesign
Is this a blusher, or a software tool?
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
#Design #Outlooks
Decoding the Future: the evolution of intelligent interfaces · How we interact with technology is about to change significantly https://ilo.im/134u0j
_____
#IntelligentInterface #ProductDesign #UxDesign #IxDesign #UiDesign #DigitalDesign #WebDesign #AI #AR #VR #Ubiquity #ContextAwareness #Multimodality #Collaboration
#Design #Reviews
Arc’s new Boosts feature lets you change the way any website looks · The Arc browser now turns its users into web designers https://ilo.im/135i7v
_____
#ArcBrowser #Browser #UxDesign #UiDesign #WebDesign #LookAndFeel #Layout #Color #Font #CSS #JavaScript
#Business #Launches
Generative AI: what you need to know · A guide to learn the basics of generative AI and to spot AI bullshit https://ilo.im/135281
“It’s a crash course in AI snake oil.” — Baldur Bjarnason
_____
#AI #ML #LanguageModel #Pitfalls #Dangers #Design #ProductDesign #UxDesign #UiDesign #WebDesign #Development #WebDevelopment #WebDev #Code #Safety #Privacy #Copyright #Plagiarism #Poisoning #Fraud #Abuse #Bias
Pacman meets the clock.
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
#Design #Launches
BentoGrids · An inspiring collection of tile layouts for branding and product features https://ilo.im/133mbf
_____
#BentoGrids #Business #Marketing #ProductDesign #UiDesign #DigitalDesign #WebDesign #GraphicDesign #Layout #Takeaways #Brand #Product #Showcase
Wypadałoby jeszcze dostosować kontenery, copy i dostosować pod mobile, ale na start wystarczy https://bit.ly/3OGpVN8 Teraz wypadałoby zebrać się za dokumentację #astro
#Design #Projects
CSS Pattern · A collection of more than 100 unique CSS patterns coded from scratch https://ilo.im/134xza
Insights into this incredible project: https://dev.to/afif/i-created-100-unique-css-patterns-the-best-collection-31cl
_____
#UiDesign #DigitalDesign #WebDesign #WebDevelopment #WebDev #Frontend #CSS #Background #Pattern
When an icon re-enforces illusions about controlling time.
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
@apple #apple #appletv
Feature Request:
Let me pin my favorite shows to the top of the #AppleTV UI and deep link me into that app when I want to watch the the latest episode.
Additionally, give me notifications when my show has a new episode or tell me when it's available to watch.
#ux #uxdesign #ui #uidesign #visualdesign #userexperiencedesign #userexperience
“‘Pick the right tool for the job’ is always the right answer, especially when someone’s trying to debate you on why their tool is better than ‘your tool.’” — Tierney Coren
_____
#Development #Tools #UxDesign #UiDesign #WebDesign #WebDevelopment #WebDev #Debates
When an icon re-enforces illusions about content.
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
The importance of adding accessibility design reviews to the design process
https://adhoc.team/2023/02/22/the-importance-of-adding-accessibility-design-reviews-to-the-design-process/
#a11y #uidesign #webdesign
The #USPTO is seeking volunteers to provide feedback "to improve the USPTO website experience."
This is welcome news because the USPTO website designs are...not great.
Even the new & redesigned ones.
Here's more info: https://content.govdelivery.com/accounts/USPTO/bulletins/35be098
#UI #UX #UIUX #UIDesign #UXDesign #WebsiteDesign #PatentFedi
Accessibility info from the Washington Post design system: https://build.washingtonpost.com/resources/accessibility #a11y #UIDesign #webdesign
#Design #Cheatsheets
Be careful using ‘menu’ · There is a term that more accurately describes the control you want https://ilo.im/132dh7
_____
#Menu #Concept #Terminology #Business #Communication #Stakeholder #Project #ProductDesign #UiDesign #UxDesign #WebDesign #DesignTeam #Accessibility #A11y #ARIA
#Design #Approaches
High-contrast: when you think dark mode is enough · The importance of a high-contrast theme in interfaces https://ilo.im/12r9pi
_____
#Design #UxDesign #UiDesign #WebDesign #Theme #ContrastTheme #DarkMode #Accessibility #A11y #WCAG
Recommendations please for a good example of a #multilingual website. I mean "good" in the sense of its user experience. Many thanks.
One of my pet projects from 2014-2015 was a simple iPad calendar app where I experimented with various animations and interactions. It consisted of an endless scroll view with rows representing the days. Notice how the Today button appears on scrolling.
It was my first project written entirely in Swift. Many ideas from that concept then become part of Taskheat and then Subjects.
Sound waves? Radar beams? What exactly does this remind you of?
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
Float labels may put you in the cool club, but they’re terrible UX.
It’s much better if your input’s label:
1) is legible
2) is above the input
3) doesn’t move about
4) is not mistaken for an answer
Simple > clever
-Adam Silver via Twitter
#Design #Launches
Visual Frameworks · A collection of pictorial mental models to clarify your thoughts https://ilo.im/131x14
_____
#Thinking #Imagination #Reframing #Mindset #MentalModel #VisualThinking #Visualization #Framework #Business #Design #UxDesign #UiDesign #DigitalDesign #WebDesign #WebDevelopment #WebDev
“As designers, we’re not just creating products. We’re creating a language, a dialogue with users that transcends the screen. A conversation that starts with a user’s first click and evolves with every interaction.” — Dylan Field
_____
#Design #Language #ProductDesign #UxDesign #IxDesign #UiDesign #DigitalDesign #WebDesign #Communication #Interaction #User #Quote
Who needs an icon to remind them of the old way to program?
#materialdesign #poeticicons #meaningoficons #artmemes #meme #contemporaryart #fineart #icon #digitalart #UI #UX #visualpoem #visualtrends #UXDesign #UIDesign #conceptualart #graphicdesign a 24"x24" poster www.museumzero.art
#Design #Suggestions
Expanding conversational user interfaces · Options for increasing the usefulness of chat interfaces https://ilo.im/1300y2
_____
#AI #Chatbot #DesignPattern #ProductDesign #UxDesign #UiDesign #WebDesign #ConversationalUI #ChatUI
I just got early access to Autodesigner, a new generative AI by @uizard for UI/UX design. Looks incredible! https://uizard.io/autodesigner/invite/9e2c2275 #GenerativeAI #Autodesigner #UIdesign #UXdesign
Starting from the smalles content and using your design system wisely enables you to assemble your new components really fast. 🚀
#Design #Launches
Accessible Numbers · Guidance on designing services for people who need help with numbers https://ilo.im/1309ux
_____
#Inclusion #Accessibility #A11y #LowNumeracy #Dyscalculia #MathsAnxiety #UxDesign #UiDesign #WebDesign #ContentDesign #WebDevelopment #WebDev #Frontend #Content #Form
Our #UI contains blue and white, but will be unlike any other #NMR software (that we know of).
@bioinformatics @biophysics @chemistry @compchem @nmrchat @physics @strucbio
#biochemistry #bioinformatics #biology #biophysics #chemistry #CompChem #metabolomics #NMRChat #NMROnline #physics #SoftwareDevelopment #SoftwareEngineering #StructuralBiology #UIDesign #WebDev
#Development #Tools
Animated Background Headers · Easily configure and generate an animated header for your website https://ilo.im/12yxfl
_____
#Design #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #Generator #Animation #Header #Background #HTML #CSS #JavaScript
Live form validation hurts UX. Here’s why. (From Adam Silver on Twitter) https://twitter.com/adambsilver/status/1658718296835862530 #ux #UXDesign #UIDesign #webdesign #forms
#Design #Approaches
Visually accessible data visualization · Options to improve data visualizations for people with color blindness https://ilo.im/12j9ig
_____
#Inclusion #Accessibility #ColorBlindness #DataViz #DataVisualization #UiDesign #WebDesign #DesignSystems #PatternLibrary #Patterns #Shapes #Contrast
#Design #Guidances
The problem with disabled buttons and what to do instead · Live form validations can frustrate users or even cause them to give up https://ilo.im/12xivh
_____
#Form #FormValidation #DisabledButton #UxDesign #UiDesign #WebDesign #WebDevelopment #WebDev #Usability #Accessibility #A11y #Button
“Research without insights and insights without action don’t count.” — Pavel A. Samsonov
_____
#Design #ProductDesign #UxDesign #UiDesign #WebDesign #UserResearch #Usability #Accessibility #Insight #Action #Quote
"6 reasons tooltips are a bad idea and what to do instead": https://adamsilver.io/blog/6-reasons-tooltips-are-a-bad-idea-and-what-to-do-instead/ And generally, tooltips have poor accessibility. #webdev #webdesign #tooltips #a11y #UIDesign
#Design #Tools
The Contrast Triangle · A tool that helps to create accessible text links without underlines https://ilo.im/12w20j
_____
#Links #Contrast #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #Accessibility #A11y #Techniques
#Development #Reviews
New TLDs: not bad, actually · Why the debut of .zip and .mov as top-level domains has caused a stir https://ilo.im/12x3fe
“The level of fear-mongering about .zip and .mov is just comical.” — Eric Lawrence
_____
#ZIP #MOV #TopLevelDomain #TLD #Domain #DNS #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #URL #Link #FileName #Collisions
latest UI fail when buying groceries - go to pay (using Tap).
Tap with Card, and it doesn't work - with the very useful message "Error"
Tap again in a different place on the terminal (because there is no consistency between terminals) - another very useful message "Error"
The issue was the total was over $100 and if you are spending more than $100, you have to insert the card and use pin - tap isn't allowed.
"Error" maybe needs to be changed to reflect that issue.
🤣🤣🤣 Made my day! schlimmstmögliche User Interface als Wettbewerb... #ROFLMAO!
#uidesign ⬇️ 🤣🤣🤣
RT @volodarik: Sunday read.
This is hilarious. Engineers are competing who creates the worst UI on Reddit.
I think the winners are:
1/ Enter your phone number https://t.co/944duji1Im
@rolle yes, but open source #UIDesign people are all busy writing more of those #CSSFrameworks...
“It is still impressive how far ahead Macromedia Flash was in terms of interactivity and design on the web. To this day, we’re still trying to do the same things we did 20 years ago with Flash.” — Tobias Schneider
_____
#Design #FlashTechnology #ProductDesign #UxDesign #IxDesign #UiDesign #WebDesign #WebDevelopment #WebDev #HTML #CSS #JavaScript #Flash #Interaction #Animation #Evolution #Quote
Here are some of the most prominent features of #MastodonBirdUI 1.5.6rc3 advanced web interface. #UI #UIDesign #CSS #Mastodon #MastoAdmin
It turned out pretty cool! #MastodonBirdUI #CSS #Mastodon #MastoAdmin #WebDesign #UI #UIDesign
The redesigned Advanced web interface is ready soon. #MastodonBirdUI #UI #CSS #UIDesign #MastoAdmin #Mastodon
Very excited about the beta release of #WebStudio! It’s an open-source alternative to #Webflow, a visual UI builder for designers. One of the engineers working on it even used to work at Webflow!
They claim that it’s less resource-heavy, sites run faster, and there’s no vendor lock-in.
As soon as they release custom code components I’ll be trying it out!
#Development #Techniques
How to style links that don’t look ugly · Some ways to make underlined links look more attractive https://ilo.im/12ub0e
_____
#UnderlinedLinks #LinkDesign #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #HTML #CSS #Accessibility #A11y
You might be familiar with #Disney's 12 principles of #animation, which set out a kind of rule book for creating moving images, whether it's for #films and #cartoons, #CSS animations or #UIdesign. The wonder cheatsheet (check the link) takes the concept but updates it for the scientific requirements of #UX, providing 12 principles for UX design in motion. https://www.creativebloq.com/news/principles-of-ux-motion #MotionDesign via #creativebloq
#Design #Opportunities
The intentional impact of images · Every image that’s put out has the opportunity to make a difference https://ilo.im/11m22k
_____
#Images #Visuals #ProductDesign #UxDesign #UiDesign #WebDesign #GraphicDesign #ImageDesign #Emotions #Actions #CallToAction
#Design #Explorations
How companies use dark patterns to keep you subscribed · Let’s try to unsubscribe from 16 well-known digital services! https://ilo.im/12q49w
“A person shouldn’t have to be a UX designer to navigate the web just to avoid dark patterns, confusion and manipulation. That isn’t a fair web.” — Caroline Sinders
_____
#Business #ProductDesign #UxDesign #UiDesign #WebDesign #DeceptiveDesign #DarkPatterns #DesignPatterns #Services #Subscriptions #Regulations #Ethics
“Don’t take your work too serious. Your designs will fail and you will make mistakes. That’s okay. As far as you learn from them you just can win.” — Marina Kraus
_____
#Design #LearningByDoing #LearnFromMistakes #DesignProcess #ProductDesign #UxDesign #UiDesign #WebDesign #CreativeLearning #Quote
How do you handle designing for multi-lingual apps? Words in different languages can have extremely different length which influences design a lot.
I am curious. What’s your way of doing this?
#Development #Launches
Proportio · A tool to create proportional scales for UI elements in design systems https://ilo.im/12t7td
_____
#Tool #DesignSystem #Design #UiDesign #WebDesign #WebDevelopment #WebDev #Frontend #Typography #Iconograpy #Shapes #Components
Usability Pitfalls of Disabled Buttons, and How To Avoid Them
https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/
#webdesign #forms #UIDesign
#Design #Guidances
Designing for (realistic) attention · Structuring content for people who only scan it is critical https://ilo.im/12qzqi
_____
#UxDesign #UiDesign #WebDesign #Website #Blog #VisualLanguage #Content #Hierarchy #Outline #CopyWriting #Scanning #Reading #AttentionSpan #Audience
The UX spidey-sense is a blessing and a curse. I'm happy I can make software a little less awful for people, but it means I'm the one who has to pay attention to the crud in the corners.
Like, in this dataviz tool, you can mouse over a segment of a stacked bar chart and get a popover with tabular data...but that popover scrolls...and it vanishes before you can mouse over it to scroll through said table...
How many font families do you use in one single app or website? I would say a maximum of three, better just one or two.
What’s your opinion?
The thing that's been bothering me in the default Mastodon UI is that I see too much information that is not needed. It's noisy.
For example, favorites and boosts don't need to have my own avatar or the action bar (why would I boost or fav my own post based on someone else's fav action, it makes no sense) and so on. Too much clutter.
The point there is to see who has favorited your post NOW and that's it.
On the left you see the original Mastodon UI, on the right #MastodonBirdUI. Less is more. #UIDesign #Design #WebDesign
Interesting how many Apple-platform UI design, wireframing, prototyping, animation and/or code generation tools that exists these days:
- Sketch
- PaintCode
- DetailsPro
- Drama
- Principle
- Origami Studio
- Judo
- Kolibri
- Flinto
- OmniGraffle
- Keynote
- Tumult Hype
- Play
Would be interesting to try them out and see how they compare (I’ve only properly used a few of these.)
#iosdev #macos #SwiftUI #uiDesign
EDIT: Added ‘Play’
Designing for People with Cognitive Disabilities and Everyone Else https://www.youtube.com/watch?v=9Ae8bUlSSXU #coga #a11y #UIDesign #webdesign
Great new article on hover, color contrast, and WCAG: "A Whole Lot of Bovver Over Hover" https://www.tpgi.com/a-whole-lot-of-bovver-over-hover/ by @lloydi #a11y #webdesign #UIDesign #color #wcag
#Development #Pitfalls
Don’t use custom CSS scrollbars · Just because you can style browser scrollbars doesn’t mean you should https://ilo.im/12p4w4
_____
#Webdesign #UiDesign #WebDevelopment #WebDev #Browser #Frontend #Scrollbar #CSS #JavaScript #Inclusion #Accessibility #A11y #WCAG #Contrast
Smashing Mag article on "Practical guidelines to prevent rage taps and rage clicks with accessible tap targets for icons, links and buttons — on desktop and on mobile. With useful techniques and guidelines." https://www.smashingmagazine.com/2023/04/accessible-tap-target-sizes-rage-taps-clicks/ #a11y #webdesign #UIDesign
“The best way for you to become a better designer is not looking at Dribbble or Behance. It’s looking and playing with real products and seeing how they handle certain scenarios and flows.” — Denislav Jeliazkov
_____
#Design #Skills #ProductDesign #UxDesign #UiDesign #WebDesign #Dribbble #Behance #Quote
"The people who develop [pop-ups] have no idea about design and user experience" https://www.theverge.com/tech/23653544/pop-up-website-ad-ui-design #UIDesign #webdesign #UX #usability
Attention #recruiters: I’m looking for a new #uidesign #uiuxdesign #productdesign job. #freelance or #fulltime. #remotework or #relocation. Let's build #designsystems in #figma . Get in touch for portfolio access. Codywalton.com
I've been always attracted to beautiful things. I always list pros and cons in the things I use. I go through dozens of options.
The user interface has HUGE value for me and it can weigh so much it can even top some of the downsides. But even if ALL of the other features are fine and the UI is bad, I have no desire in using the software. It's just the way it is and I'm pretty sure bad UI is a big turn-off for most of the people. Who doesn't love nice looking things?
I would like to endorse other minor web apps in the #Fediverse, but most of them are full of UI glitches, are incomplete and downright buggy looking odd things.
From my designer point of view #Mastodon and #Pixelfed are the only effective ones, because they speak to people who are used to proper visual design language (read: Non-nerds, non-engineers, the regular people and design oriented people).
Things like #BookWyrm, #Lemmy, #Friendica and newer niche apps cause reactions like: "What is this?", they look like back end is fine but nobody is in charge of the design and the UI has no direction whatsoever. It's the general culprit in the programming world: A back end developer thinks everything is fine when we add a CSS framework and that's that.
If we just get the UI right everywhere, we get more people to the #Fediverse. I just wish there was more #CSS/design people willing to contribute. #UI #UIDesign
Designing and Coding for Voice: https://www.briandeconinck.com/designing-coding-voice/ "make sure each interactive element has on-screen text that is visually and programmatically associated with the element" ⭐️ #a11y #UIDesign
Feels like a lot more people should know about https://apple.com/feedback
I've had the best success rate by writing in a friendly tone and emphasizing what I like, before criticizing or describing a problem. It seems this is being read by real humans with real feelings, and if you respect that, they'll care about your feedback.
—
#Apple #macOS #iOS #iPadOS #tvOS #AppleTV #AppleWatch #UIdesign #UXdesign
I keep getting quite a lot of positive feedback about my #MastodonBirdUI. Even @Gargron liked my post where I explained the design choices made. Thank you everyone so much about the input. I'm kinda surprised so many prefer mine over the default. I lost count in how many instances enabled it for all their users.
I've been thinking about rewriting the Mastodon base SCSS. I'm a CSS/SCSS guy after all. The new base framework would have
- CSS variables instead of SCSS variables with SCSS function modifications: Easier to manage
- Simpler style base: Less nesting, less hacks, less everything: Cleaner code
- Better and more efficient modularization
- Accessible and flexible SVG graphics instead of icon fonts like Font Awesome
However, it would be a lot of work. I created my version of the UI in a couple of weeks, then been improving it daily.
Worth noting is that not everyone prefers this choice of design as it's way too close to a site we all hate. That's why I'm afraid if I do all the work and send a PR, it would go in vain. It could still be a good start though.
I have high hopes for #Mastodon to improve the UI themselves and look forward to it to get better over time. I just have ideas. Will keep the choices open here.