Wybrane elementy wzornictwa

Leoneq · Grudzień 31, 2025

Jak można projektować estetyczne urządzenia? Projekty hobbystów często są robione z tego co jest pod ręką, na zasadzie że "ma działać", a rozwiązania tymczasowe stają się trwałe. To, co zauważyłem, to że z pomocą niewielkiej wiedzy spoza zupełnie innej dziedziny niż elektronika, można projektować urządzenia tak aby wyglądały one wręcz profesjonalne.

Pomysł na artykuł wziął się stąd że nie znalazłem do tej pory poradnika który by pokazywał jak się "powinno" projektować obudowy, pisać dokumentację itp. Oczywiście - o gustach się nie dyskutuje - lecz zwykle dąży się do uzyskania produktu takiego, jaki by można kupić ze sklepu. W tym artykule postaram się przybliżyć pewne ogólne zasady i wskazówki, dzięki którym produkt najczęściej wygląda automatycznie "lepiej". Konkretnie, postaram się przybliżyć jak powinno się projektować obudowy urządzeń elektronicznych, a artykuł ten kieruję szczególnie użytkownikom początkującym.

Przy odrobinie chęci można stworzyć produkt faktycznie porównywalny z tym sklepowym!

Materiały

Najpopularniejsze materiały wśród hobbystów to plastik, metal, oraz drewno. Wybór materiału jest ważny i powinien być dokonany we wczesnym etapie projektowania, ponieważ ma to wpływ na samą konstrukcję (ograniczenia technologiczne, założenia samego projektu itp).

Drewno

Drewno jest chyba teraz najrzadszym wyborem, po wkroczeniu na rynek drukarek 3D. Do odpowiedniej obróbki drewna potrzebne są konkretne narzędzia, oraz miejsce gdzie można to drewno obrobić. Nie każdy sobie na to może pozwolić. Ogólnie, wyróżniłbym dwie metody produkcji: obróbkę manualną surowca, oraz cięcie laserowe sklejki. Pierwsza metoda pozwoli uzyskać czasem bardzo ciekawy wygląd (np. steampunk, stare radia, dzisiejsze wyroby luksusowe). Niestety elementy z laserowo wycinanej sklejki najczęściej są spotykane w tanich zestawach, zabawkach itp. - stąd nie należy się spodziewać bardzo dobrego wyglądu produktu. Drewno powinno się też pokryć warstwą ochronną. Jednak jeżeli ktoś ma laser to warto pokusić się o grawerkę!
Zalety: łatwość obróbki (najczęściej), łatwa grawerka, tani materiał
Wady: łatwopalność, potrzebne narzędzia i miejsce do obróbki

Przykładowy projekt w drewnianej obudowie

Metal

Myślę że dość wielu hobbystów lekceważy opcję wykonania elementów z metalu, a szczególnie z aluminium. Obudowy wykonane z metalu będą wyglądały "najbliżej" tym ze sklepu, będą wytrzymałe a sposobów na obróbkę jest wiele. Blaszkę aluminiową łatwo można obrobić tzw. dremelem i wygiąć, a jeżeli jest grubsza - można ją nawet nagwintować. Ponadto można pokusić się o sprawdzenie usług obróbki metalu w okolicy, bo wówczas opcji do obróbki jest znacznie więcej: wyginanie prasą, frezowanie, toczenie... Do tego metal można pokryć na wiele sposobów. Pomijając farby i lakiery, warto pomyśleć o usłudze anodowania aluminium jeżeli bardzo nam zależy na wyglądzie. Warstwa anody jest nie tylko ładna i przyjemna w dotyku, ale również twarda (a zatem odporna na ścieranie). Jeżeli do dyspozycji jest laser to już można bawić się na całego, i wykonywać "nadruki" które wyglądają niczym sitodruk. Napisy można jednak wykonać innymi sposobami! Jedną z nich jest dość popularny termotransfer napisów na płytę czołową, i lakierowanie; jeszcze inni wolą nakleić cały kawałek zalaminowanego wydruku. Jeżeli chodzi o dostępność materiału, jest różnie; blacha może pochodzić z recyklingu, można kupić kawałek na popularnym serwisie aukcyjnym, lub może ktoś z rodziny ma jakieś odpadki. Oczywiście można również kupić gotowe obudowy w internecie i dokonać przeróbek pod własną konstrukcję; przykład poniżej.
Zalety: łatwa dostępność, wiele sposobów obróbki, wytrzymałość względem rozmiaru/wagi
Wady: koszta, potrzebne narzędzia i miejsce, korekta błędów jest utrudniona po wykonaniu obudowy

Aluminiowa obudowa z Ali za 40zł, frezowanie, grawerka laserowa, szybka z pleksi.
Jedyne co "zdradza" projekt to tanie/standardowe pokrętło oraz elementy z drukarki 3D.

Plastik

W przypadku plastiku temat jest dość uproszczony dzięki drukarkom 3D. Wcześniej popularne było kupienie gotowej obudowy np. firmy Kradex, wykonanie w niej otworów, przytwierdzeniu naszej elektroniki i ewentualnie zrobienie frontu wedle uznania. Teraz jednak znacznie lepiej jest kupić drukarkę 3D i zaprojektować obudowę konkretnie pod dane urządzenie. Wiąże się to jednak z ograniczeniami - bo podczas modelowania trzeba pamiętać o ograniczeniach technologicznych - oraz tym że wydruk będzie wyglądać z bliska jak... wydruk. Jednak podczas druku np. z ABSu możliwość dalszej obróbki jest duża; tworzywo to można wygładzać mechanicznie, chemicznie, dobrze nadaje się na grawerkę laserową. Co jednak gdy potrzebny jest element przezroczysty? Lub obudowa powinna być duża, i wydruk przestaje się opłacać? Również na popularnym serwisie aukcyjnym są usługi taniego cięcia pleksi, którą można albo wkomponować do wydruku, albo z niej samej zrobić obudowę (bardzo podobnie jak ze sklejki). Połączenia oczywiście najlepiej stosować rozłączne: śruby z insertami, wkręty do plastiku, połączenia kształtowe, a w ostateczności pozostaje zawsze klejenie. Druk 3D jest również świetny do prototypowania, nawet jeżeli docelowo obudowa będzie wykonana z innego materiału.
Zalety: niska cena, różnorodność materiałów i kolorów, możliwość dalszej obróbki
Wady: pewne ograniczenia technologiczne, charakterystyczny wygląd

Dopiero zbliżenie, lub wzięcie produktu do ręki, pokazuje defekty druku 3D

Pozostałe opcje
Oczywiście powyższe materiały to nie wszystko co jest do dyspozycji; w zasięgu hobbysty są również kompozyty, gięty plastik, spawanie, a nawet glina - jednak myślę że są to już tak specyficzne przypadki że jeżeli Czytelnik wie że takiego materiału potrzebuje, to jest świadomy tego wyboru. Trzeba jeszcze powiedzieć że powoli w Polsce rozwijają się Hackerspace'y, warto sprawdzić czy w pobliżu nie ma jakiegoś!

Elementy wzornictwa

Samo wykonanie obudowy to jedno, i prawdopodobnie poprzedni akapit był tylko powtórzeniem dla Czytelnika. Jeżeli została podjęta decyzja z czego obudowa będzie wykonana, to trzeba ją teraz zaprojektować. Zastanówmy się zatem nad przykładową obudową. Chyba najprościej jest wyobrazić sobie prostopadłościan. Trzeba zatem określić wymiary tego prostopadłościanu, tak aby montaż był komfortowy ale też aby nie marnowało się za dużo miejsca. Proporcje również odgrywają ważną rolę! Proporcjonalna obudowa powinna być nie tylko funkcjonalna ale i przyjemna dla wzroku; przykładami mogą być telefony które są płaskie i cienkie (smartfony), wąskie i grube (starsze telefony), tablety (charakterystyczne proporcje ekranu względem smartfonów). Widok telefonu nienaturalnie wąskiego, grubego bądź szerokiego jest cóż, nienaturalny. Jak te proporcje można dobrać? Pomijając intuicję, są ogólne zasady które zaraz będą przedstawione.

Po dobraniu gabarytów obudowy można zastanowić się nad płytą czołową. Jest to miejsce gdzie prawdopodobnie będą osadzone kontrolki, przyciski, złącza, cokolwiek nasz projekt potrzebuje. Te również trzeba rozmieścić z pewnym porządkiem, tak aby korzystanie ze sprzętu było możliwie komfortowe, a sprzęt wyglądał tak abyśmy sami chcieli zaprosić sąsiada i się pochwalić.
Dobrym sposobem tutaj jest podzielenie powierzchni siatką na równe części - a kontrolki rozmieścić w punkty przecięcia tej siatki. Nie musi być ona globalna (na całą powierzchnię), ważne jest aby zachować marginesy a konkretne kontrolki pogrupować (np. przyciski z jednej strony, złącza z drugiej). Warto pomyśleć czy korzystanie z wymyślonego przez nas projektu będzie dobre - np. umieszczenie ekranu na dole a przycisków na górze, powodowałoby że ręką zasłonięta będzie treść ekranu podczas klikania. Przykład: miernik 34410A ma elementy pogrupowane zgodnie z ich funkcją: już na pierwszy rzut oka można wizualnie rozróżnić trzy sekcje. Poszczególne elementy są rozmiszczone w siatce, z czego klawiatura jest mniej-więcej wyśrodkowana względem wyświetlacza. Sam wyświetlacz również nie zajmuje ani za dużo, ani za mało miejsca względem przycisków; sprawia to wrażenie urządzenia kompaktowego, a jednak nie miniaturowego. Niektórzy również są fanami wklejania spirali Fibonacciego tam gdzie tylko można, więc uznałem że i tutaj można się doszukać pewnego wzoru.

A już szczególnie jest ona obecna w iPodzie:

Co jednak gdyby się takiego "klasycznego" podejścia nie trzymać? Bardzo interesujący jest design produktów firmy Rigol:

W porównaniu do poprzedniego urządzenia, tutaj można zadać bardzo wiele pytań. Co się stało z klawiaturą, czy to jest telefon? Dlaczego wyświetlacz jest taki czerwony? Czy to moda na retro? Dlaczego jeden przycisk jest poza główną sekcją a na siłę włączony do sekcji wyświetlacza, dlaczego po lewej stronie złącz jest celowa nieregularność w nadruku? Myślę że odpowiedzenie sobie samemu na takie pytania jest dobrym ćwiczeniem, czy jak kto woli, gimnastyką umysłową.

Zanim jednak przejdziemy dalej, warto poświęcić chwilę czasu na przemyślenie jak obrobione mają zostać krawędzie. Opcji ponownie jest wiele, jednak najczęściej się je pozostawia ostre, sfazowane (ścięte pod kątem 45 stopni) lub zaokrąglone. Nie warto pozostawiać ostrych krawędzi jako że te niszczą się bardzo szybko i są nieprzyjemne w dotyku. Jeżeli mamy do czynienia z drukiem 3D, polecam zastosować minimalne promienie na krawędzie zewnętrzne (R1-R3) a na wewnętrzne takie jak ramki wyświetlaczy, przycisków itd - fazki.

Najczęstszy błąd, i to taki że zasługuje na osobny paragraf, to zostawianie odsłoniętych ramek wyświetlacza. Dość wielu hobbystów lubi je pokazywać, podczas kiedy wszystkie urządzenia jakie można kupić komercyjnie pokazują tylko sam ekran!

Ogólnie, jeżeli już mowa o estetyce, można zainspirować się sztuką i fotografią. W końcu wzornictwo przemysłowe to osobna dziedzina sztuki! Tak też można próbować zastosować zasadę trójpodziału (rule of thirds) i sugerować się taką uproszczoną siatką. Marginesy od krawędzi może z kolei zastosować ze złotą proporcją? Zasady te można stosować również przy pisaniu dokumentacji (do czego gorąco zachęcam) czy nawet materiałów "promocyjnych"! Całkiem dobrym wprowadzaniem do tematu jest ten krótki artykuł.

A co jeżeli potrzebne są również kolory? Z pomocą przychodzi teoria kolorów; i te najprostsze zasady dobrze jest zapamiętać wizualnie. Kolor jaki widzimy można dzielić na wiele różnych sposobów (RGB, CMYK, HSL itp) jednak pewne zależności dobrze będzie przedstawić modelem HSV, czyli Hue, Saturation i Value. Po polsku powiemy że składowe światła to odcień, nasycenie i jasność. Na palecie kolorów tak będzie się to prezentować:

Odcień (kolor) wybieramy wprost z koła kolorów. Nasycenie przechodzi od najbardziej nasyconego, do najmniej nasyconego (wówczas operujemy na przeciwległej krawędzi, w skali szarości). Podobnie jest z jasnością. Prowadzi to do bardzo ciekawych wniosków.

Po lewej obrazek jest w skali szarości, a zatem wycinamy barwę (hue) oraz nasycenie (saturation). Obrazek po prawej co prawda ma już barwy, jednak wszystkie piksele są jednakowo jasne. Oznacza to, że w grafice najważniejsza jest jasność! Inny przykład wzięty z życia:

Specjalnie zdjęcie to najpierw pokazałem w skali szarości. Okazuje się że zdjęcie jest "płaskie" pod względem jasności, i wizualnie wszystkie segmenty, nawet zapalone, są jednakowo "jasne". Zatem nawet pokolorowane, dalej trudno jest odczytać cyfry, choć odrobinę łatwiej (i jest to zdjęcie źródłowe):

Aby uniknąć czegoś takiego nie tylko podczas projektowania ale i wykonywania dokumentacji (czyli po prostu zdjęć), polecam poniższy poradnik:

Nawet jeżeli zdjęcia nie wyjdą idealne, z wiedzą z powyższego filmu spokojnie można spróbować samodzielnie skorygować kolory w zdjęciu tak aby wszystko było wyraźne i ładne:

A jak samemu dobierać kolory, np. do projektu? Zasad jest kilka. Produkt może mieć stylistykę monochromatyczną - to jest, jeden kolor motywu, a pozostałe to jego odcienie. Przykładem mogą być laptopy serii ThinkPad - całe czarne, ale z czerwonymi akcentami.

Następnie możemy dobierać kolory w pary. Patrząc się ponownie na koło, możemy je wybierać na dwa sposoby:

Pierwszym sposobem jest dobranie kolorów komplementarnych. Są to kolory "naprzeciw siebie" na kole odcieni. Tak też czerwony się komponuje z niebieskim, fioletowy z zielonym, itd. Logo Firefoxa ma niebieskie i pomarańczowe kolory. Drugim sposobem jest wzięcie sąsiedniego koloru - dla czerwonego będzie to albo żółty (np. logo Shell) bądź różowego. Kolejnym krokiem jest wzięcie trzech kolorów:

Są to tzw. triady, i wybiera się je łącząc poprzednie metody - wybieramy parę komplementarną, i sąsiada jednego z wybranych kolorów. Najpopularniejsze kombinacje to błękitny-czerwony-żółty (Burger King) bądź fioletowy-niebieski-zielony (Fanta). Jeden z kolorów powinien być głównym, drugi pomocniczy, a trzeci robić akcenty. Mimo że najczęściej urządzenia nie są tak kolorowe, warto mieć taką wiedzę z tyłu głowy.

Kolejną ważną rzeczą są czcionki. Przez wielu projektantów jest to sprawa bagatelizowana, bądź robiona "na czuja" i przez to wychodzą takie rzeczy jak Comic Sans MS w sprzęcie medycznym, czy Times New Roman w zabawkach dla dzieci. Czcionka potrafi przekazać pewne emocje sobą. Oczywiście czcionkę należy zatem dobrać do projektu, więc i tutaj są pewne metody i sztuczki. Przede wszystkim należy unikać domyślnej czcionki - Arial (czasem Calibri) - aby pozbyć się efektu "ktoś zapomniał zmienić czcionki". Arial to czcionka która została stworzona jako klon czcionki Helvetica. Ta ostatnia była była często łączona z Paneuropą; szczególnie wiele starych polskich urządzeń używało tych czcionek. Wciąż przynoszą one neutralny, jednak porządny, elegancki wygląd. Helvetica dalej jest domyślna na urządzeniach firmy Apple. Bardzo dobrą czcionką która obecnie jest dołączana do systemu Windows jest Bahnschrift (stworzona na podstawie DIN1451), czcionka używana m. in. w znakach drogowych, grach studia Valve, i jak nazwa wskazuje - w kolejnictwie. Co jednak gdy potrzebna jest czcionka o bardzo konkretnym wyglądzie? Jest wiele stron oferujących darmowe czcionki jak Google Fonts czy Adobe Fonts, gdzie wiele czcionek można przetestować i następnie pobrać.

Podczas projektowania urządzeń proponuję sprawdzić czy czcionka Helvetica Bold się nada (lub Bahnschrift), ze zmniejszonym odstępem między literami. Traci się niewiele na czytelności, a zyskuje wiele miejsca.

Oczywiście zaproponowane czcionki też nie sprawdzą się w każdym przypadku, powiedziałbym nawet że Segoe UI może być przyjemniejsze w czytaniu długiego tekstu niż Helvetica. Jeżeli ktoś kiedyś próbował rozróżnić czcionkę Arial od Helvetici, prawdopodobnie 2 czy 3 logotypy wyglądają lepiej napisane Arialem. Co więcej, można się kłócić że Comic Sans MS może być używany w sprzęcie medycznym jako że jest to czcionka dobra dla dyslektyków. Niestety w medycynie częściej są używane czcionki pokroju Calibri czy Frutiger (to właśnie od nazwy tej czcionki wzięło się pojęcie Frutiger Aero).

image.png.9eb0607d012a013854fc9b9fe3033e55.png

Inspiracje

Żyjemy w takich czasach że już bardzo dużo wymyślono, i wymyślić coś nowego jest trudno. Stąd też inspirowanie się - czyli nie kopiowanie, a parafrazowanie - jest nie tylko złe, ale nawet wskazane! Jako ludzie bez doświadczenia w projektowaniu należy posiłkować się wzorem. Zatem jeżeli np. podoba mi się wygląd wzmacniacza w pokoju, nie ma problemu abym zrobił coś w podobnym stylu. Jeszcze raz powtórzę: jeżeli chcemy zrobić dobry produkt, najlepiej jest się wzorować na czymś co jest udane.

Skoro wiadomo już z czego i jak wykonać nasz projekt, pozostało omówić jakich narzędzi użyć. To już zależy czysto od preferencji Czytelnika, i czasem budżetu, jednak do popularnych programów należą:

- Fusion 360 od autodeska, ewentualnie OnShape do modelowania, ostatecznie FreeCAD

- Inkscape (otwartoźródłowy) i CorelDraw do grafiki

- GIMP (^), Krita (^), Photoshop do obróbki grafiki

- Scribus (^) i InDesign od Adobe do broszurek

- być może LaTeX, Word do pisania krótkiej dokumentacji?

Jednak zalecam aby te pierwsze kroki, kiedy trzeba sobie wyobrazić najogólniejszy zarys przedmiotu, zrealizować na kartce. Wbrew pozorom daje to największą swobodę myślenia. I oczywiście sam ekspertem w tej dziedzinie jestem żadnym, chciałem jednak przybliżyć chociaż odrobinę tego tematu osobom które mają zapał i chęci na tworzenie własnych wynalazków. Stąd też ten artykuł jest luźnym zestawieniem uniwersalnych porad i sztuczek jakie można stosować w projektach. Powodzenia!

Chciałbym szczególnie podziękować panu Salamonowi za ten artykuł, który mnie samego zainspirował lata temu do zgłębienia tego tematu.

Źródła:

Zdjęcia:

Wybrane elementy wzornictwa

Pomocna odpowiedź

Leoneq

Bądź aktywny - zaloguj się lub utwórz konto!

Utwórz konto w ~20 sekund!

Zaloguj się

Quizy

Najnowsze posty w innych tematach

Przetwornica 12-230 V. Ogólne uwagi co do poprawności schematu 1 2 3 4 11

Sztuczne obciazenie DIY 1 2 3 4 6

Kurs Arduino - #8 - Sterowanie silnikami DC, pętla for 1 2 3 4 19

protokol onewire...kto slucha, kto nadaje? 1 2 3

Kurs STM32L4 – #18 – podsumowanie kursu, quiz 1 2

Inne