Hackathon 2019 - UX Goodies für alle

von Kathleen Demol

Erinnern Sie sich an diesen Beitrag über Learn to UX Design im Jahr 2019 - Teil 1? Nun, es enthielt soooo viele großartige Extras, Assets und Ressourcen, die alle nutzen konnten, und welchen besseren Zeitpunkt gab es als den AE Hackaton, um sie auszuprobieren und zu nutzen? Hier sind sie, eine Zusammenfassung und in einer kürzeren Version, also tauchen Sie sofort ein und starten Ihr großartiges Projekt ... Weil wir bei Seth und Dunn helfen wollen, wo wir können ... Jetzt gehen und großartige Dinge machen!

Werkzeuge für das Design

Hier ist eine Liste der nützlichen Tools (nicht alle sind kostenlos, aber die meisten haben eine Testversion):

  • Skizze - UI-Design, Prototyping (mehrere Plug-Ins und Online-Ressourcen verfügbar, mein persönlicher Favorit)
    • InVision - Designübergabe, Prototyping, Zusammenarbeit
    • Axure - Wireframing, Prototyping
    • Balsamiq - Wireframing, Prototyping, meistens Low-Fidelity
    • Flinto - Motion Design, Prototyping
    • Adobe Illustrator - Icon Design, Illustration, Grafik (svg)
    • Prinzip - Bewegungsdesign, interaktive Abläufe
    • Figma - browserbasiertes Interaktionsdesign
    • Denken Sie daran, es gibt nur ein Werkzeug, das alle anderen übertrumpft: Ihren Geist, Papier und Bleistift. Wenn Sie Ihre Ideen diskutieren möchten, sind diese Tools die meiste Zeit ausreichend.

      Beobachten Sie und lassen Sie sich inspirieren: einige großartige Ressourcen

      Wie können Sie die Qualität Ihres Designs wirklich verbessern? Indem Sie die Arbeit der Menschen beobachten, die Sie bewundern. Tauchen Sie mit mobilen und Online-Apps in die Designs anderer ein. Sie können sich auch von Portfolio-Websites inspirieren lassen:

      • www.dribbble.com Eine Menge Augenweide, die manchmal darauf aus ist, eine vorhandene App neu zu gestalten und den Aufwand zu demonstrieren, ohne den tatsächlichen Kontext zu berücksichtigen, in dem die App für ihre Endbenutzer existiert. Dies ist einer der Nachteile, aber es ist dennoch ein großartiger Ort, um nach Inspiration zu suchen und die Werke echter Grafiker zu bewundern.
      • www.behance.netPortfolio Website für Designer, auf der Sie Vitrinen ihres gesamten Schaffens finden und die Entwicklung ihrer Arbeit verfolgen können.
        • www.uplabs.com Bietet großartige Übungsmöglichkeiten, da sie häufig eine Herausforderung für die Design-Community darstellen, an der Sie frei teilnehmen können.
        • www.pttrns.com Hier finden Sie Screenshots von echten Apps mit gutem Design. Inspirierend zu sehen, wie Dinge entworfen werden, die tatsächlich gestartet und verwendet werden.
        • https://www.awwwards.com/Viele verschiedene Kategorien, also viel entdecken!
        • Bitte beachten Sie, dass das Lernen durch Beobachten nicht bedeutet, dass Sie passiv bleiben und „nur schauen“. Sie müssen sich die Mühe machen, selbst zu definieren, warum ein bestimmtes Design außergewöhnlich gut funktioniert, nicht nur aus ästhetischer Sicht, sondern weil es Ästhetik mit Funktion verbindet.

          Zum späteren Nachschlagen: Legen Sie inspirierende Beispiele in einen Ordner Ihres Computers und notieren Sie, warum Sie die Designs attraktiv finden und gut funktionieren. Sie können auch das Gegenteil tun und definieren, warum das Design fehlerhaft ist, denn aus den Fehlern anderer zu lernen ist auch ein guter Weg, um zu einer guten Designgeschwindigkeit zu gelangen. Der Punkt ist, dass Sie die kognitiven Anstrengungen unternehmen müssen, um über Design nachzudenken.

          Mit diesem Schritt in Ihrem Lernprozess können Sie jetzt wie in „heute“ beginnen. Verschieben Sie es nicht bis später, tun Sie es einfach.

          Online-UI-Assets

          Sie können sich einen Vorsprung verschaffen, indem Sie Online-UI-Assets verwenden:

          Icons

          • Flaticon
          • Iconfinder
            • Iconmonstr
            • Fontello
            • Icomoon
            • Freie Ressourcen

            • Webdesignerdepot - Werbegeschenke
          • Grafischer Burger
          • Stockfotos

          • Der Tod des Bestandsfotos
        • Pexels
          • Freepik
          • Typografie

          • Google Fonts
        • Typewolf
          • Freie Typografie
          • Creative Blog - Die besten kostenlosen Schriftarten für Designer
          • Fontsquirrel
          • Wireframes und Vorlagen

          • Skizzieren Sie App-Ressourcen
        • Balsamiq Wireframes to Go
          • Pixeden
          • Webdesign Dev - Freebies
          • Farbpaletten

          • Materialpalette
        • Kühler
          • Farbe Adobe
          • Designprinzipien und -systeme von (großen) Unternehmen sind auch ein guter Ort, um mehr zu erfahren.

          • Gegensprechanlage
        • IBM
          • Apfel
          • Android
          • AirBNB
          • Google (ab 2013 aber noch relevant)
          • Intuit
          • und viele, viele mehr.
          • Spickzettel und Rastersysteme

          • http://screensiz.es/phone
        • https://guideguide.me/
          • https://jonikorpi.com/golden-grid-system/
          • http://www.responsivegridsystem.com/
          • Beim Entwerfen von Benutzeroberflächen sollten Sie sich einige Überlegungen und Fragen stellen

            Sobald Sie Ihre eigene Auswahl an „guten“ Designs erstellt haben, die begründen, warum sie gut sind (oder schlecht, siehe weiter oben in diesem Text), können Sie an Ihren Fähigkeiten arbeiten. Nehmen Sie das Designtool Ihrer Wahl (siehe oben) und beginnen Sie mit der Neuerstellung eines dieser Designs. Erfahren Sie mehr über die Pixel-Perfektion und -Struktur des Designs, indem Sie versuchen, dasselbe zu erreichen, indem Sie es selbst tun. Nachahmung ist in Designer-Communities verpönt, aber jeder hat angefangen, alles zu lernen, was er oder sie weiß, indem er jemanden nachahmt, der es kann. Wie dem auch sei, das Nachbilden von Designs mag sehr einfach erscheinen, aber das ist nicht immer der Fall. Es ist eine großartige Möglichkeit, Ihre Werkzeuge zu erlernen.

            Nachdem Sie das Design neu gestaltet haben, erstellen Sie die Farbpalette des Designs. Schauen Sie, warum die Farben gut zusammenarbeiten. Dinge, die man beachten muss:

            • Überprüfen Sie den verwendeten Schrifttyp, die Schriftstärke, den Kerning und die Gliederung.
            • Sind die verwendeten Formen rundlich oder eher quadratisch?
            • Gibt es Konsistenz? Geht das Design überall hin?
              • Wie wäre es mit Leerzeichen?
              • Ist es minimalistisch?
              • Atmet es eine Vintage-Atmosphäre aus? Retro? Warum das?
              • Welche Verbindungen sehen Sie zwischen diesem Design und grafischen Elementen aus unserer Vergangenheit, wie der Stimmung der sechziger Jahre oder vielleicht der einer anderen Ära? Ist das Design in der Nachahmung dieser bestimmten Ära erfolgreich?
              • Nachdem Sie diese Fragen für sich selbst beantwortet haben, können Sie die folgenden Fragen und deren Antworten zur Kenntnis nehmen und mit der Optimierung des Designs beginnen:

              • Arbeite an den Farben. Was ist der Effekt? Verbessert es sich Oder verschlechtern
              • Schriftart ändern?
            • Versuchen Sie, das Design zu ändern, um den Geist einer völlig anderen Ära widerzuspiegeln. Bist du in der Lage?
            • Und nun viel Spaß beim Hackaton!