53 lines
5.1 KiB
JavaScript
53 lines
5.1 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
};
|
|
var __copyProps = (to, from, except, desc) => {
|
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
for (let key of __getOwnPropNames(from))
|
|
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
}
|
|
return to;
|
|
};
|
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
var stdin_exports = {};
|
|
__export(stdin_exports, {
|
|
default: () => _2020_08_07_where_i_go_for_ui_inspiration,
|
|
metadata: () => metadata
|
|
});
|
|
module.exports = __toCommonJS(stdin_exports);
|
|
var import_index_10ac95e2 = require("./index-10ac95e2.js");
|
|
const metadata = {
|
|
"title": "Where I go for UI inspiration",
|
|
"author": "Thomas Wilson",
|
|
"date": "2020-08-07T12:00:00.000Z",
|
|
"draft": false,
|
|
"slug": "2020-08-07-where-i-go-for-ui-inspiration",
|
|
"tags": ["design-resources", "design", "links"]
|
|
};
|
|
const _2020_08_07_where_i_go_for_ui_inspiration = (0, import_index_10ac95e2.c)(($$result, $$props, $$bindings, slots) => {
|
|
return `<p>Like anybody who makes interfaces for apps/websites, I spent a lot of time looking at <em>Design Inspiration</em> (read: UIs, real or imaginary, made by other people). This is a really good way to look at visual conventions that other people made, and have used in their UIs and UX.</p>
|
|
<p>If I were to examine the time I spent \u201Cdesigning\u201D more closely, and divided it between <em>actually pushing pixels around in Figma</em>, and <em>looking at other people\u2019s work on Dribbble</em> I would be shocked and ashamed.</p>
|
|
<p>Allow me to justify this though: unless you are one of two-three social media giants, literally nobody spends the majority of screen time in your app. It would be incredibly arrogant to assume your app is good enough that people are willing to learn a whole new style of interaction, navigation, and visual metaphors for it.
|
|
In this teeny blog post, I just want to list some of the places I go when I want to find good UI to look at</p>
|
|
<p><strong>A quick caveat though.</strong> These sites are good in the same way that a buffet is good. But they\u2019re also bad in the way that a buffet is bad. If you\u2019re not consciously selective in how you expand your UIs, it can feel like a collection of disparate widgets. Would you trust a website that could go from crunchy spring role to full-bodied bolognese, <em>just because a designer fancied it</em>? As a designer it is your responsibility to understand the types of data, interactions, and journeys that your app is trying to promote or facilitate. Sometimes \u201Cbecause it looks cool\u201D <em>is</em> enough of a reason - but this might not fly so well on a village GP surgery.</p>
|
|
<p>Anyway, this post isn\u2019t about that, it\u2019s about some sweet sweet list of cool sites for design inspiration. Well have I got a twist for you, I actually made two lists (<em>Inception Horn</em>).</p>
|
|
<p><strong>Here are some sites that put words to visual design patterns</strong>:</p>
|
|
<ul><li><a href="${"https://www.uiguideline.com/"}" rel="${"nofollow"}">UI Guideline</a> : Web-focused, component-level naming.</li>
|
|
<li><a href="${"https://ui-patterns.com/patterns"}" rel="${"nofollow"}">ui-patterns</a> : Mobile-focused, pattern and component-level naming.</li>
|
|
<li><a href="${"https://lookup.design"}" rel="${"nofollow"}">lookup.design</a> : Another great free library of examples of components used in the wild. Clean UI and tags, with a nice variety.</li></ul>
|
|
<p><strong>Here are almost endless numbers of mockups from people far more talented than I</strong>:</p>
|
|
<ul><li><a href="${"https://www.uisources.com/"}" rel="${"nofollow"}">UI Sources</a> (\u{1F4B8} paid) : A well-curated collection of app design patterns.</li>
|
|
<li><a href="${"https://mobbin.design/"}" rel="${"nofollow"}">mobbin.design</a> : Another nicely curated list of mobile app designs</li>
|
|
<li><a href="${"https://uimovement.com/"}" rel="${"nofollow"}">UI Movement</a> : Primarily mobile and animated interactions.</li>
|
|
<li><a href="${"https://search.muz.li/"}" rel="${"nofollow"}">Muzli search</a> : Find designs by searching words or colours, a cool little tool run by Adobe.</li>
|
|
<li><a href="${"https://dribbble.com/"}" rel="${"nofollow"}">Dribbble</a> : I\u2019m putting these guys on the list, but they don\u2019t need the recommendation.</li></ul>
|
|
<p><strong>And for Colour Palettes</strong>:</p>
|
|
<ul><li><a href="${"https://colors.muz.li/"}" rel="${"nofollow"}">Muzli Colors</a> : A really nice little tool that shows you a selection of colours in some standard UI mockups (pie charts, chats, cards, etc.)</li>
|
|
<li><a href="${"https://coolors.co/"}" rel="${"nofollow"}">Coolors</a> : A classic tool I use <em>very</em> frequently to help me find complementary colours.</li></ul>`;
|
|
});
|