Ontworpen door ingenieur

We leven in een vreemde wereld vol stereotypen. Zoals :

Softwareontwikkelaars hebben geen 'visuele smaak'

Wat een gekke veronderstelling. Er zijn heel veel ontwikkelaars die hun eigen apps hebben ontworpen en erin zijn geslaagd om het echt aantrekkelijk te maken. Ik heb nog nooit UI gedaan, geen designcursussen gevolgd of zoiets. Bijna een jaar geleden zag ik deze Daily UI-uitdaging (heel cool idee, het was toen zo viraal). Ik dacht dat het interessant zou zijn om mezelf te proberen, zelfs als ik geen ervaring had. Wat ik echt heb: jaren bouwen van mobiele applicaties, gezond verstand en Sketch-app.

Kort over de dagelijkse gebruikersinterface als u er nog niets van heeft gehoord: u hebt 100 dagen en elke dag behalve in het weekend ontvangt u een ontwerptaak ​​via e-mail. U moet deze taak visualiseren en delen met de wereld om feedback te krijgen en een betere ontwerper te worden. Dat is het idee.

Ik heb besloten elk ontwerp te splitsen op basis van volgende criteria:

  • Doel - taakgebruiker moet volbrengen.
  • Persoonlijke beoordeling - naar mijn mening hoe goed het er eigenlijk uitziet.
  • Opmerkingen - enkele gedachten over design.

Dag 001: Aanmelden

Meld je aan en zing binnen in de iOS-app voor de bezorgservice voor Chinees eten.

Doel: inloggen en registreren via e-mail. Mogelijkheid om tussen deze staten te schakelen als de gebruiker dat nodig heeft. Valideer gebruikersgegevens en toon het resultaat van deze validatie. Wachtwoord vergeten.

Persoonlijke beoordeling:

Opmerkingen: Het was de eerste opname en ik moet toegeven dat het niet was wat ik had verwacht te maken. Echt vreemde gebruikersinterface. Ik koos voor een potentieel productconcept (Chinese app voor voedselbezorging) en probeerde er iets mee te maken. Belangrijkste problemen met dit ontwerp: verkeerde kleuren, tekstvelden van Android, logo en veel onnodige lege ruimte.

Dag 002: Afrekenen met creditcard

Creadit Card-kassa - app voor Chinees eten bezorgen

Doel: creditcardgegevens aan de gebruiker tonen.

Persoonlijke beoordeling:

Opmerkingen: Verloop ziet er raar uit. Ik wist niet hoe ik ze goed moest doen. MasterCard-pictogram en creditcardchip ziet er mal uit. Hele lay-out is verbroken.

Dag 003: bestemmingspagina

Landingspagina voor Terminal - realtime update van de applicatie in App Store of Google Play

Doel: mogelijkheid om video van het product te bekijken. Product screenshot. Oproep tot actie - "Aan de slag"

Persoonlijke beoordeling: (hou van deze foto)

Opmerkingen: dit is een goede. Juiste kleuren, juiste lettertypen, juiste lay-out en mooi productconcept. Maar toch - de hoofdactie 'Aan de slag' is ergens op de pagina verborgen, het ziet er niet zo 'hoofd' uit.

Dag 004: Calculator

macOS Calculator-app voor Terminal-service

Doel: eenvoudige rekenmachine zonder extra acties. Toon resultaat in verschillende numerieke systemen.

Persoonlijke beoordeling:

Opmerkingen: Besloten zich te houden aan het gekozen kleurenpalet van de vorige opname en hetzelfde productconcept te gebruiken. Probeer het eerst in de gebruikersinterface van de native macOS-app.

Dag 005: App-pictogram

iOS-app-pictogram voor Terminal-service

Doel: mooi pictogram.

Persoonlijke beoordeling:

Opmerkingen: normaal 'code'-logo in afgeronde rechthoek. Niets bijzonders hier.

Dag 006: Gebruikersprofiel

Doel: gebruikersfoto tonen. Gebruikersnaam en bijnaam weergeven. Toon meldingen en statussen van de gebruiker. Toon dynamische berichten van serverzijde (zoals upgrade prijsplan). Mogelijkheid om profiel te bewerken.

Persoonlijke beoordeling:

Opmerkingen: Probeerde iets moedigs en ongewoons te maken met de navigatiebalk als een cirkel. Veel vreemde lege ruimte hier. Ontbrekende instellingen / profielbewerking.

Dag 007: Instellingen

Instellingenscherm voor Terminal iOS-app

Doel: algemeen app-gedrag instellen. Gebruikersprofiel bewerken. Bewerk andere server side data. Mogelijkheid om het meldingsvolume te regelen

Persoonlijke beoordeling:

Opmerkingen: wat een kleine tekstgrootte ... Op een echt apparaat moet je vergrootglas gebruiken om iets te zien. Pictogrammen zijn hier zeker zwakte. Logische blokscheiders zien eruit alsof ze zijn ontleend aan Android Holo-ontwerp in ~ 2012. Aangepaste tabbalk zou er beter uitzien als het een standaardbalk met aangepaste pictogrammen zou zijn.

Dag 008: 404 pagina

404-pagina voor Terminal-service

Doel: op basis van gebruikerskeuze omleiden hem op andere pagina (rood - koop het product, blauw - pagina met grappige gifs, bijvoorbeeld)

Persoonlijke beoordeling:

Opmerkingen: Ik heb gekozen voor het thema "Opkomst van machines" voor het productconcept, dus ik verwijs soms naar Matrix. Probeerde iets slims te maken met een 404-pagina en Matrix-thema. Die pillen - een van de eerste illustraties die ik met behulp van deze tutorial heb gemaakt. Vond ook nieuwe blauwe en lees kleuren.

Dag 010: Social Share

Pop-up delen voor Terminal iOS-app

Doel: oproep tot actie om iets te delen met de sociale netwerken.

Persoonlijke beoordeling:

Opmerkingen: nam het scherm van iOS 7 van http://www.sketchappsources.com. Probeerde een pop-up te maken met de knop Delen, maar aan het einde ziet deze opname er echt raar uit. Maakt me verdrietig.

Dag 011: Flash-bericht

Meldingsberichten in de Terminal web-app

Doel: de gebruiker op de hoogte stellen van alles in de webapplicatie. Markeer de titel van het bericht. Plaats berichten bovenop alles op het scherm, maar verander de gebruikersfocus niet. Mogelijkheid om te communiceren met berichten met links erin.

Persoonlijke beoordeling:

Opmerkingen: verkeerde opvulling linksboven en echt kleine tekstgrootte voor pop-upbericht op de webpagina. De grootte van het berichtenvak is ongewoon groot.

Dag 012: E-commerce shop (één artikel)

Aardappel-app (e-commerce shop) voor Terminal-service

Doel: Productbeschrijving lezen. Zie productprijs. Mogelijkheid om het product aan te passen. Mogelijkheid om de hoeveelheid te kiezen. Bekijk de auteur / maker van producten. Zie beoordeling en opmerkingen. Mogelijkheid om product te kopen.

Persoonlijke beoordeling:

Opmerkingen: Besloten om een ​​mac OS-toepassing voor deze taak te maken. Met hetzelfde 'Terminal'-logo en dezelfde kleurstijl. Ziet er naar mijn mening mooi maar moeilijk uit.

Dag 013: Direct Messaging

Chat met assistan in de Terminal iOS-app

Doel: berichten verzenden / lezen. Zie berichtengeschiedenis. Verwijder bericht. Voeg een afbeelding toe aan het bericht. Interactie met links. Mogelijkheid om te zien of assistent nu online of offline is.

Persoonlijke beoordeling:

Opmerkingen: Probeerde iets te doen met chatbots voordat het een mainstream werd. Het is niet mogelijk om de datum en tijd van het bericht te zien. Afbeeldingbijlage ziet er om de een of andere reden raar uit.

Dag 014: Countdown Timer

Countdown timer met inschrijvingsformulier op de terminal app landing

Doel: hoeveel tijd resteert. Mogelijkheid om u te abonneren op de nieuwsbrief.

Persoonlijke beoordeling:

Opmerkingen: Gecombineerde countdown-timer met inschrijfformulier onderaan. Het zou op de bestemmingspagina moeten staan ​​vanaf dag 003.

Dag 015: Aan / uit-schakelaar

Switchers voor Terminal iOS-app

Doel: weergeven of in- of uitschakelen.

Persoonlijke beoordeling:

Opmerkingen: nam standaard switchers van iOS en veranderde kleuren een beetje.

Dag 016: Pop-Up / Overlay

Doel: mogelijkheid om pop-up te sluiten. Accent op de actie (knop "Update").

Persoonlijke beoordeling:

Opmerkingen: deze was absoluut beter dan pop-up op dag 010.

Dag 017: e-mailontvangst

E-mail voor Terminal-service

Doel: de totale prijs weergeven en markeren. Datum en tijd van ontvangst weergeven. Naam van betaler weergeven. Mogelijkheid om direct te betalen via e-mail. Details van huidige betaling weergeven.

Persoonlijke beoordeling:

Opmerkingen: probeer het eerst in de gebruikersinterface van de e-mail. Heeft hier ook hetzelfde productconcept gebruikt. Om de een of andere reden heb ik de ontvangstdatum twee keer per post toegevoegd. Probeerde de knop "Betalen" te markeren met een andere achtergrondkleur. Ook gemarkeerd betalingsbedrag met vetgedrukt lettertype en nu zie ik dat het een vergissing was.

Dag 018: Analytics-grafiek

Doel: mogelijkheid om tijdsperiode te kiezen (dag / maand / jaar). Toon exacte gegevenswaarde in gekozen tijd. Toon huidige datum op de kaart. Markeer de momenteel geselecteerde grafiek.

Persoonlijke beoordeling:

Opmerkingen: Verknald met verloop onderaan de rode lijn. De hele kaart lijkt me serieus en onrealistisch. Tekstgrootte is vrij klein.

Dag 019: Leaderboard

Doel: toon top twee in de beoordeling. Toon de rating en positie van de huidige gebruiker. Toon hoeveel hierboven van de huidige gebruiker en hoeveel hieronder.

Persoonlijke beoordeling:

Opmerkingen: besloten om afgeronde avatars met een kleine rand te gebruiken. Lijn als scheidingsteken was een moeilijke beslissing. Ik weet het nog steeds niet zeker.

Dag 020: Locatietracker

Doel: de locatie van de huidige gebruiker weergeven. Mogelijkheid om te zoeken. Mogelijkheid om in / uit te zoomen op de kaart.

Persoonlijke beoordeling:

Opmerkingen: de kaart ziet er raar uit. Een kaart tekenen was moeilijker dan ik had verwacht. Het enige dat er hier mooi uitziet - kleine zoekbalk in de rechterbovenhoek.
Het is trouwens het Onafhankelijkheidsplein in Kiev. Ik zou zeggen een zeer vereenvoudigde versie.

Dag 021: Home Monitoring Dashboard

Doel: huidige tijd en datum weergeven. Meldingen weergeven. Toon huis met alle slimme apparaten op de kaart. Maak interactie efficiënt zoals voor on-wall apparaten.

Persoonlijke beoordeling:

Opmerkingen: Probeerde iets realistisch te maken om bijvoorbeeld aan de muur te hangen.

Dag 022: Zoeken

Doel: nieuwe gebruikers zoeken. Suggesties weergeven “wie te volgen”. Mogelijkheid om te volgen / ontvolgen van zoekscherm. Toon online / offline status van de gebruiker. Duidelijke zoek. Zoekopdracht automatisch aanvullen, stel het volgende teken in het zoekveld voor. Realtime zoeken.

Persoonlijke beoordeling:

Opmerkingen: Vast gebruikerspictogram van dag 007 "Gebruikersprofiel", nu ziet het er beter uit.

Dag 023: Onboarding

Doel: ontdek de belangrijkste app-mogelijkheden. Mogelijkheid om het instapproces over te slaan. Schuif van links naar rechts. Toon voortgang, hoeveel gebruiker moet zien voordat hij door kan gaan met inloggen.

Persoonlijke beoordeling:

Opmerkingen: Beslist vasthouden aan de overzichtspictogrammen voor dit productconcept. Inloggen is heel eenvoudig, het was niet het hoofddoel van deze opname. Nogmaals, tekst is erg klein voor echt apparaat.

Dag 024: instapkaart

Doel: twee verschillende versies van dezelfde inhoud weergeven (linker- en rechtergedeelte van het ticket). QR code. Vertrekt van / komt aan naar. Het bedrijfslogo van luchtvaartmaatschappijen. Flight / Gate / Seat.

Persoonlijke beoordeling:

Opmerkingen: Nu zie ik, ik zou in plaats daarvan waarschijnlijk de zwarte QR-code grijs moeten maken.

Dag 025: TV-app

Doel: filmbeschrijving, beoordeling, timing, tags (genres). Acteurs met foto's. Rol voor elke acteur. Soortgelijke films.

Persoonlijke beoordeling:

Opmerkingen: tv-app - wat een vreemd formaat. Probeerde elementen groot genoeg te maken zodat de gebruiker ermee kan communiceren. In plaats van een normale achtergrondkleur plaatste ik hier een wazige opname uit de film. Rol van gemiste acteur.

Dag 026: Abonnement

Doel: e-mailveld om in te schrijven. Abonneer knop. Beschrijving van de inhoud die u krijgt.

Persoonlijke beoordeling:

Opmerkingen: Vliegtuigpictogram was echt moeilijk om te tekenen. Synchroniseer al die vectorlijnen en zet een grijze achtergrond erin. Aan het einde vind ik het er leuk uitzien. 1/0 op de achtergrond is echter een beetje verwarrend. Mail-pictogram heeft zeer nauwe hoeken.

Dag 027: Dropdown

Doel: selecteer een item in de vervolgkeuzelijst of verberg de vervolgkeuzelijst.

Persoonlijke beoordeling:

Opmerkingen: Meer oefenen op de iconografie in deze opname. Dropdown-verbergen ontbreekt hier.

Dag 028: Neem contact met ons op

Doel: tekstvelden voor het onderwerp en de inhoud van e-mails op de site.

Persoonlijke beoordeling:

Opmerkingen: Eerste stappen in illustraties. De maan ziet er volkomen vreemd uit (ik zou zeggen dat hij "te plat" is), tekstvelden en knoppen - zijn vrij standaard. Maar de hele lay-out voelt gebroken.

Dag 030: Prijzen

Doel: Toon verschil tussen prijsplannen. Toon het handigste prijsplan. Mogelijkheid om nu een tariefplan te starten.

Persoonlijke beoordeling:

Opmerkingen: Vreemde gele rand rond een 'gemiddeld' prijsplan. Ook is het moeilijk om verschillende prijsplannen van elkaar te onderscheiden door functielijst.

Dag 031: Bestand uploaden

Doel: slepen en neerzetten of bestand kiezen om te uploaden. Uploadvoortgang weergeven. Upload op elk gewenst moment afsluiten. Toon bestandsdetails (aangemaakte datum, grootte, naam, versie). Toon succes / fout. Probeer het opnieuw als er een fout optreedt.

Persoonlijke beoordeling:

Opmerkingen: Ik wist niet hoe ik een animatie moest maken, dus ik heb een reeks afbeeldingen gemaakt voor verschillende staten. Pop-up driehoek is erg smal.

Dag 032: Crowdfunding-campagne

Doel: tijd tot einde. Huidig ​​geldbedrag. Knop "Terug naar dit project". Hoeveel mensen steunden het project. Beschrijving. Video. Schepper.

Persoonlijke beoordeling:

Opmerkingen: Het enige leuke hier - het kleine pictogram dat nog over is voor het robotica-label.

Dag 033: Product aanpassen

Doel: kleuren van het product kiezen. Kies materialen. Hardcover. Productomschrijving. Schrijver. Productnaam.

Persoonlijke beoordeling:

Opmerkingen: auteur ontbreekt hier. Hardcover-switcher is misplaatst. Aardappel uit dag 12 ziet er beter uit.

Dag 034: Auto-interface

Doel: Big UI-bedieningselementen voor gebruik in de auto. Huidige tijd weergeven. Toon huidige albumhoes. Muziekbediening.

Persoonlijke beoordeling:

Opmerkingen: geslaagd voor 6 volledige iteraties totdat ik dit concept vond. De auto met bovenaanzicht was moeilijk te tekenen.

Dag 035: Blogbericht

Doel: auteur van het bericht. Code markeren. Titel. Omslagfoto.

Persoonlijke beoordeling:

Dag 036: Speciale aanbieding

Doel: aantrekkelijke illustratie. Kortingsbedrag weergeven. Bedrijfslogo weergeven.

Persoonlijke beoordeling:

Opmerkingen: Dat was mijn hoogtepunt van illustratie. Die robots waren de beste illustratie die ik tot nu toe heb gemaakt. (Het zou een promo-afbeelding in Facebook-feed moeten zijn).

Dag 037: Weer

Doel: de temperatuur van vandaag. Toon huidige locatie. Weeraanbieder. Illustratie van het weer.

Persoonlijke beoordeling:

Opmerkingen: nam enkele concepten van Authentic Weather (ik ben dol op deze app. Het is zo eenvoudig en nuttig). Dus eindigde ik met de 'Hot-or-not'-weer-app. Pictogrammen zijn nog steeds zwak, vooral cloudpictogram.

Dag 038: Kalender

Doel: huidige datum. Takenlijst voor vandaag. Belangrijke data. Relatie tussen taken.

Persoonlijke beoordeling:

Opmerkingen: het is een dramatisch eenvoudige agenda-app voor macOS. Taken waren een beetje raar. Hoe verander je de kalenderweergave in Dag / Maand / Jaar? Hoe de maand te veranderen? Veel dingen gemist.

Dag 039: Getuigenissen

Doel: foto tonen. Toon positie en het bedrijf.

Persoonlijke beoordeling:

Dag 040: Recept

Doel: ingrediëntenlijst tonen. Toon en selecteer portiegrootte. Laat stappen zien hoe je het huidige recept kunt bereiden.

Persoonlijke beoordeling:

Opmerkingen: deze hamburgerillustratie is op het niveau van de robots vanaf dag 36. Ik wist nog steeds niet hoe ik een animatie moest maken, maar deze hamburger zou een beetje boven de oppervlakte moeten vliegen. Het is ook handig om de portiegrootte te kiezen (het verwart me echt in de meeste kook-apps die ik niet kan kiezen).

Dag 041: Training Tracker

Doel: nieuwe sets toevoegen. Start / stop timer. Toon tijd voor oefening. Ga naar de volgende oefening. Toon trainingsstatistieken.

Persoonlijke beoordeling:

Opmerkingen: Illustratie van Pebble van http://sketchappsources.com/. Ik zou deze app graag willen bouwen. Het zou handig zijn om de oefeningen alleen met uw horloge bij te houden. Nog steeds zonder animatie.

Dag 042: Takenlijst

Doel: nieuwe taak toevoegen. Markeer taak als voltooid. Taak verwijderen. Taken opnieuw ordenen. Voltooide taken verbergen / weergeven. Voeg mensen toe aan de lijst. Toon globale meldingen.

Persoonlijke beoordeling:

Opmerkingen: nam enkele concepten van Google Keep. "Waves" in de navigatiebalk is een controversiële oplossing.

Dag 044: Favorieten

Doel: zoeken naar het codefragment. Tag codefragment. Favoriete codefragment.

Persoonlijke beoordeling:

Opmerkingen: alles ziet er een beetje vet uit. Waarschijnlijk komt dat omdat het lettertype voor codefragmenten en een te grijze achtergrond.

Dag 045: Infokaart

Doel: verschillende kaart voor verschillend machtigingsniveau. Vermogen om mensen met een ander belang te onderscheiden.

Persoonlijke beoordeling:

Opmerkingen: het was een WWDC voor de dag dat ik deze opname maakte, dus besloot ik het bij iets realistischs te houden. Nam het Apple-logo van http://sketchappsources.com/, omdat het buitengewoon moeilijk was om het zelf goed te doen :)

Dag 046: Factuur

Doel: uitgiftedatum weergeven. Ordernummer. Toon totale prijs. Toon prijzen van alle artikelen. "Uitgegeven door" en "uitgegeven aan" met adressen en andere informatie.

Persoonlijke beoordeling:

Opmerkingen: Probeerde hier de totale prijs te markeren (bijna in elke factuur verstuurt de totale prijs om de een of andere reden onderaan de post).

Dag 047: Activiteitenfeed

Doel: datumscheidingsteken. Feed bijwerken. Toon nieuwe activiteiten.

Persoonlijke beoordeling:

Opmerkingen: scheiders lijken nu meer op iOS-scheiders. Gebruikt "skelet" patroon. Het rode tellerpictogram in de navigatiebalk ziet er raar uit. Ook het gedeelte 'vandaag' staat onder 'gisteren' ... wat een vreemde beslissing, ik zou ze nu echt ruilen.

Dag 048: binnenkort beschikbaar

Doel: abonneren op nieuwsbrief.

Persoonlijke beoordeling:

Opmerkingen: probeerde iets ongewoons te doen met die taken in de rechterbovenhoek. Hier is een idee: wanneer de gebruiker echt alle taken voltooit (abonneren, delen en Twitter volgen), krijgt hij bijvoorbeeld 10% korting voor toekomstige producten. Ook hier is mijn eerste poging in achtergrondpatronen, mislukte poging.

Dag 049: Kennisgeving

Doel: nieuwe meldingen weergeven. Toon notificatie tijd.

Persoonlijke beoordeling:

Opmerkingen: Opnieuw scheiders van Android Holo Design. Vernieuwingspictogram is te groot voor navigatiebalk. Ook de hele lay-out is behoorlijk overbelast.

Dag 050: vacature

Doel: beschikbare vacatures. Beschikbare locaties. Mogelijkheid om te zoeken.

Persoonlijke beoordeling:

Opmerkingen: Blijf bij het productconcept van de vorige opname. Probeerde eerst kantoorlocaties te benadrukken. Lijst met locaties kan beter zijn, vooral voor brede schermen.

Dag 051: Druk op Pagina

Doel: mogelijkheid om HD-persbronnen te downloaden. Lees een korte productbeschrijving.

Persoonlijke beoordeling:

Opmerkingen: Het was een mooie combinatie van een rode kleur en een blauwe downloadknop. Het sterpictogram is hier echt overbodig.

Dag 052: Dagelijks UI-logo

Doel: D als een logo.

Persoonlijke beoordeling:

Opmerkingen: ik moet echt tweede achtergrondpapier van het algemene logo verwijderen.

Dag 053: Kopnavigatie

Doel: mogelijkheid om tekst in te voeren. Taak opslaan / negeren. Taak toewijzen. Stel tags in.

Persoonlijke beoordeling:

Opmerkingen: Mijn eerste animatie ooit gemaakt met Principles. Ik zou de TODO-app graag willen gebruiken met interactie zoals deze, echt handig. Ik moet ook de mogelijkheid overwegen om nieuwe tags te maken en mensen te zoeken die niet in de lijst staan. (maar het kan te ingewikkeld zijn, dus ik blijf bij de huidige versie). Het is niet bepaald "Header Navigation", maar wat dan ook, lijkt me leuk.

Dag 054: reservering bevestigen

Doel: reserveringslocatie, tijd & datum en aantal personen.

Persoonlijke beoordeling:

Opmerkingen: gebrek aan verbeeldingskracht hier. Pictogrammen en kalenderweergave zijn raar en de lay-out is verbroken. Onderste navigatie ziet er echter goed uit.

Dag 055: Icons Set

Doel: verschillende pictogrammen voor TODO-toepassing.

Persoonlijke beoordeling:

Opmerkingen: ik heb sinds dag 27 een grote vooruitgang geboekt met pictogrammen. Nog steeds veel ruimte voor verbeteringen. Het oogpictogram kan bijvoorbeeld beter zijn.

Dag 056: Paneermeel

Doel: hiërarchische navigatie naar één item.

Persoonlijke beoordeling:

Opmerkingen: maakte twee versies van hetzelfde UI-element. De bovenste versie is realistischer en de onderste versie is de manier waarop ik dit soort navigatie zou willen zien. Nog steeds zien ze er ongemakkelijk uit.

Dag 057: Videospeler

Doel: de huidige tijd van de video weergeven. Toon volledige videoduur. Mogelijkheid om te spelen / pauzeren. Regelt het video-geluidsvolume. Schakel over naar volledig scherm.

Persoonlijke beoordeling:

Opmerkingen: ik nam een ​​zeer controversiële aanpak en plaatste videotiming bovenaan en de werkelijke tijdlijn onderaan in plaats van het in het midden van de strip te plaatsen. Ook kleine huidige tijd popup is hier overbodig (ik heb de huidige tijd al getoond in de algemene timing sectie). Volumepictogram is verschrikkelijk.

Dag 058: Winkelwagen

Doel: prijs van het artikel weergeven. Beoordeling en foto weergeven.

Persoonlijke beoordeling:

Opmerkingen: Idee was leuk, maar implementatie is raar. Vooral oranje "beoordelingsstrip". Ik moet toegeven dat de lijstindeling om een ​​of andere reden moeilijk voor me is.

Dag 059: Achtergrondpatroon

Doel: verschillende pictogrammen als achtergrondpatroon

Persoonlijke beoordeling:

Opmerkingen: dit achtergrondpatroon is veel beter dan het patroon van dag 48. De juiste kleuren en juiste pictogrammen worden gekozen.

Dag 060: Kleurkiezer

Doel: kies verschillende kleuren. Kopieer en plak HEX- en RGB-waarde. Mix kleuren om een ​​nieuwe te krijgen.

Persoonlijke beoordeling:

Opmerkingen: er zijn veel kleurenplukkers, dus ik besloot om deze geen kleurenkiezer te maken, maar een kleurenmixer. Het is waarschijnlijk niet nuttig voor echt gebruik. Maar omdat een concept er absoluut goed uitziet.

conclusies

Nou, het zijn geen 100 UI's, maar toch was het toch een fantastische ervaring. Ik besteedde gemiddeld 1,5 uur aan elke opname en ik zie duidelijk mijn vooruitgang in de loop van de tijd in de samenstelling van de lay-out en het tekenen van basispictogrammen.

Dit zijn de tools en bronnen die ik voor dit experiment heb gebruikt:

  1. Schets app
  2. Principe - om een ​​animatie te doen.
  3. Lingo - om alle atomaire elementen en kleuren op één plek consistent te houden.
  4. SketchAppSources - kant-en-klare sjablonen (zoals Pebble frame)
  5. Craft - vul het ontwerp met echte gegevens.
  6. Koelers - ontdek nieuwe kleuren.
  7. Noun Project - pictogrammen inspiratie.
  8. Uplabs - algemene inspiratie.

Wat ik van dit experiment heb geleerd:

  1. Je moet je product begrijpen.
  2. Het gaat niet om 'mooie foto's', het gaat om hoe gebruikers hun doelen kunnen bereiken.
  3. Kleine details doen er echt toe. (kerning, lettertype, lijnhoogte, dekking etc.)
  4. Bouw een ontwerp met atomaire elementen, zodat u iets later in andere ontwerpen kunt hergebruiken of bestaande kunt uitbreiden.
  5. Ontwerp wordt beter als functie van de tijd die je eraan besteedt (+ inspiratiecoëfficiënt die ik niet echt kan uitleggen)
  6. Leren door te doen is de beste manier om iets te leren.
Softwareontwikkelaars hebben "visuele smaak"

UPD:

Wauw! Ik kreeg een paar echt gedetailleerde opmerkingen met een beschrijving van fouten in de bovenstaande ontwerpen. Dat is geweldig dat mensen bereid zijn hun persoonlijke tijd door te brengen om dat te laten zien. Ik ben ze echt dankbaar

Bovenstaande ontwerpen zijn in 2015 gemaakt en ik heb ze in 2016 gedeeld. Sindsdien heb ik veel geleerd. Dus ik zou heel graag de feedback horen over mijn nieuwste ontwerp van Reduce App. Het is een eenvoudig hulpmiddel om Sketch-bestanden te comprimeren. (hieronder staan ​​het ontwerp van de app zelf en de bestemmingspagina). Alvast bedankt!