Dribbble Shot Größe: 1600×1200 und wie du Arbeiten rahmst

Die Dribbble Shot Größe ist 1600×1200 Pixel, ein 4:3-Querformat. Dribbble zeigt jeden Shot als 4:3-Kachel im Raster, gestalte also das erste Bild so, dass es in dieser kleinen Größe lesbar ist: eine Idee, eng angeschnitten, mit Raum drumherum und einem Hintergrund, der die Arbeit schmückt, statt mit ihr zu kämpfen. Weitere Bilder in einem Shot können Details zeigen. Halte Rahmung und Hintergrund von Shot zu Shot einheitlich, und dein Profil wirkt wie ein Portfolio statt wie ein Haufen Uploads.

Dribbble Shot: Maße

Lade in exakt 4:3 hoch. Eine andere Form wird im Raster zugeschnitten oder aufgefüllt, und Dribbble entscheidet, wo, was selten dort ist, wo du es wählen würdest. PNG hält Interface-Kanten und Schrift scharf; JPG passt zu fotografischer Arbeit.

So rahmst du Arbeiten in einem Dribbble-Shot

Ein klassisch schwacher Shot ist eine ganze Webseite, ins Bild geschrumpft. In Thumbnailgröße wird sie zu einem grauen Rechteck mit Pünktchen. Wähle einen sehenswerten Teil, schneide darauf an und gib ihm Raum.

1. 1

   Wähle eine Idee

   Ein einzelner Screen, eine Komponente, ein Logo-Lockup oder ein Icon-Set. Braucht es einen Absatz zur Erklärung, sind es zwei Shots.

2. 2

   Schneide enger an, als es sich natürlich anfühlt

   Zeige die Checkout-Karte, nicht die ganze Checkout-Seite. Wichtige Details sollten groß genug sein, um im Raster zu erkennen zu sein.

3. 3

   Lass einen Rand

   Etwa 10 bis 15 Prozent des Bildes an jeder Seite, bei einem Shot in 1600 Pixeln etwa 160 bis 240 Pixel, lassen die Arbeit atmen.

4. 4

   Wähle einen stützenden Hintergrund

   Schlicht oder sanft verlaufend, aus der Palette der Arbeit gewählt oder im Kontrast dazu. Der Hintergrund sollte die Arbeit besser aussehen lassen und dann verschwinden.

5. 5

   Füge Detailbilder danach hinzu

   Nutze das zweite und dritte Bild für Nahaufnahmen, Zustände und den ganzen Ablauf. Das erste Bild ist die Einladung.

Hintergründe für Dribbble-Shots

Der Hintergrund ist die Bühne. Ein helles Interface wirkt oft am besten auf einem sanft getönten Grund, etwas dunkler als sein eigenes Weiß, damit die Kartenkanten zu sehen sind. Ein dunkles Interface will einen tiefen Grund mit sanftem Farbschimmer in der Nähe. Helle Brand-Arbeit kann auf einem Fast-Neutralton sitzen, damit die Markenfarbe das Einzige Laute im Bild ist.

Geräte-Mockups können helfen, wenn Kontext zählt, etwa eine mobile App in einer Hand oder ein Zifferblatt am Handgelenk. Bei jedem Shot eingesetzt, verkleinern sie die Arbeit und wirken schnell veraltet. Ein sauberer flacher Screen auf gutem Hintergrund ist meist stärker. Verlaufshintergründe und dunkle Verlaufshintergründe zeigen, wie du Gründe machst, die nicht wie Presets aussehen.

Lass dein Dribbble-Profil wie ein Portfolio wirken

Besucher beurteilen ein Profil nach seinem Raster. Teilen alle Shots eine Hintergrundfamilie, einen Rand und eine Art des Anschnitts, wirkt das Raster kuratiert, und was sich von Kachel zu Kachel ändert, ist deine Arbeit, nicht deine Rahmung. Tipps für Design-Portfolios und Case-Study-Design tragen denselben Gedanken in ein ganzes Portfolio.

Gib jedem Shot einen schlichten Titel, der sagt, was er ist, „Onboarding einer Banking-App“ statt „Frische Vibes“, und eine kurze Beschreibung von Problem und Entscheidung. Leute finden Shots über Suche und Tags, und Kunden lesen die Beschreibung, um zu beurteilen, wie du denkst, nicht nur, wie du zeichnest.

Ein Hintergrund, den sonst niemand nutzt, ist eine leise Signatur. In Gradiently ist Dribbble Shot eine eingebaute Größe, und einen Mark, den du gesichert hast, kannst nur du exportieren, die Bühne hinter deinen Shots taucht also nicht im Profil eines anderen Designers auf. Mit Pro exportierst du Standbilder bis 4K oder ein kurzes MP4, wenn die langsame Bewegung des Mark zu einem animierten Shot passt. Für Motion-Shots allgemein gilt: Halte Loops kurz und sanft; animierte Verlaufshintergründe nennt die Prinzipien.