2010. február 14.
Ebben a blogban, weboldalam design és arculat tervezésének folyamata követhető végig. A logótervezés, a színrendszer és a tipográfia rendszer valamint a különböző kommunikációs felületek kialakításáról kaphat áttekintést. Amennyiben egy weblap készítés során az arculat tervezését is én végzem, a programozás mellett, az oldal kialakulásának folyamata hasonlóan történik, mint ahogy a saját weboldalam esetében zajlott.
Weboldalam a Budapesti Kommunikációs és Üzleti Főiskola új média grafikus képzésen szakdolgozatként is szolgált. A szakdolgozat kategóriába sorolt bejegyzések alkották a vizsgamunkát.
Beküldve a(z) információ kategóriába
2009. november 24.
Ugyanaz a téma, a kép innen van.
Toronto Luminato 2009
Beküldve a(z) fénykép kategóriába
2009. november 24.
A fénykép ami az oldal tervezéshez ötletet adott.
Toronto Luminato 2009
A [daily dose of imagery] blogra mindennap felkerül egy friss fotó, a blog rendszeres olvasója vagyok, ezt a képet innen töltöttem le.
Beküldve a(z) fénykép, szakdolgozat kategóriába
2009. november 24.
A logótervezés folyamata papíron kezdődik.
Logótervezés
A fotómon utómunkaként világosítást és lighting effektet használtam hogy élettel telibb legyen.
Beküldve a(z) fénykép, szakdolgozat kategóriába
2009. november 24.
2.1. Fejléc
Az oldal tetején látható a fejléc kép, mely tartalmazza a logót, és a hullám grafikai elemet.
A logó mögé mindenképp világos színre volt szükség, a hullámot viszont sötét háttérbe akartam elhelyezni, ezért színátmenettel oldottam meg azt a hatást, mintha a sötétből, a háttérből törne elő a hullámforma. A hullám úgy készült, hogy az Illustratorban 6 db téglalapot egymás mellé raktam, majd az Object/Envelope Distort/Make with mash funkciót kiválasztva kialakítottam a hullámformát. Az elkészült objektumot letükröztem a Reflect Tool segítségével. Az alulra került hullámforma áttetszőségét 30%-ra állítottam, hogy élethű legyen a tükröződés. Az alsó és felső hullámokat egy csoportba foglaltam, majd az effektek közül a 3D Extrude & Bevel funkcióval 3D formára alakítottam.
A logóra rákerült egy image map, az ingyenesen használható Handy Image Mapper nevű program segítségével. Ezzel a logóra kattintva mindig a kezdő oldalra juthatunk, ami jelenleg a Webfejlesztés menüpont.
Beküldve a(z) munkanapló, szakdolgozat kategóriába
2009. november 24.
Levélpapír helyett készült ez a CD terv. A CD mint kommunikációs eszköz használható, a megrendelőknek átadandó fejlesztési anyagok ilyen nyomtatott CD-re kerülhetnek.
Beküldve a(z) CD kommunikációs felület, szakdolgozat kategóriába
2009. november 24.
Logó
A logó emblémában megjelenő W betűhöz nem találtam megfelelő, szép vonalú betűtípust, ezért én rajzoltam egy íves vonalat, melyet megdupláztam.
A logóban használt Liberation Serif betűtípus egy talpas betűtípus, melyet leginkább a Times New Roman betűtípushoz hasonlíthatunk. Átlós tengely, mérsékelten váltakozó vonalvastagság, ferde serif jellemzi.
Felhasználhatóságát tekintve a Public domain / GNU GPL licence csoportba tartozik, mely alapján ingyenesen felhasználható.
A font az internetről letölthető: https://fedorahosted.org/liberation-fonts/
Az Alte Haas Grotesk font egy ingyenes használható talp nélküli font, melyet Yann Le Coroller készített.
A font az internetről letölthető: http://www.dafont.com/Alte-Haas-Grotesk.Font
A logóban megvalósul a betűkeverés egyik alapelve, mégpedig az hogy eltérő betűtípusokat használjunk egymást mellett. A kontrasztot nem csak az eltérő betűtípusok, de az eltérő méretek is erősítik.
Weboldal és blog
A weboldalon mindenhol Verdana betűtípust használok, mely jól olvasható talp nélküli sans-serif betűtípus. Nagy középmagasság, széles méretek, laza betűtáv jellemzi. A Verdanát 1996-ban a Microsoft hozta létre, kifejezetten számítógépes használatra szánt betűkép.
Beküldve a(z) szakdolgozat, tipográfia kategóriába
2009. november 23.
A logótervezés során, különböző változatok készültek, ezekből állt össze az animáció.
A megtekintéshez közvetlen link: http://weigel.hu/webfejlesztes/internetesarculattervezes/?p=64#more-64
Érdemes továbbolvasni a bejegyzés folytatását »
Beküldve a(z) mozgókép, szakdolgozat kategóriába
2009. november 20.
Elkészült a weboldalhoz tartozó favicon.ico nevű ikon, melyet a böngészők a címsorban és a könyvjelzők között is megjelenítenek. Alapjául a logó embléma része szolgált.
Beküldve a(z) információ kategóriába
2009. november 18.
A névjegykártyán használt betűtípus megegyezik a logóban használt egyik betűtípussal:
A névjegykártya mérete 90 × 50 mm. A feliratok a betűtípus normál és bold változatával készültek. A logó és a feliratok egy képzeletbeli vonalhoz igazodnak, az összetartozó információk csoportosítva szerepelnek. A lényegesebb információk vastagabb betűváltozattal illetve nagyobb betűmérettel is kiemelésre kerültek.
Beküldve a(z) névjegykártya kommunikációs felület, szakdolgozat kategóriába
2009. november 17.
A legtöbbet használt színeket az alábbi táblázat mutatja be. A szürke és a halvány rózsaszín árnyalatai az oldalon használt színátmenetek miatt nincsenek külön felsorolva. A tervezés során RGB színeket használtam, a vállalkozás elsődleges felhasználási területét szem előtt tartva. A CMYK színek esetében néhol kerekítésre volt szükség, így az esetleges nyomdai munkálatok során minimális eltérés lehet a monitoron megjelenő színekhez képest.
|
Szín
|
RGB
|
CMYK
|
Web
|
Információ
|
|
|
245-241-241
|
3-4-3-0
|
#F5F1F1
|
alap tartalom háttér
|
|
|
244-240-240
|
3-4-3-0
|
#F4F0F0
|
logó alatti színátmenet egyikszíne
|
|
|
241-235-235
|
4-6-4-0
|
#F1EBEB
|
menüpont felső rész –színátmenet egyik vége
|
|
|
237-228-228
|
6-9-6-0
|
#EDE4E4
|
jobb oldali panel háttér
|
|
|
227-208-208
|
9-17-12-0
|
#E3D0D0
|
képkeret
|
|
|
255-34-39
|
0-96-89-0
|
#FF2227
|
hivatkozás
|
|
|
191-36-36
|
18-99-100-8
|
#BF2424
|
menüpont alja
|
|
|
195-9-9
|
16-100-100-7
|
#C30909
|
menüpont felső rész –színátmenet egyik vége
|
|
|
234-230-230
|
7-7-6-0
|
#EAE6E6
|
logó alatti színátmenet egyikszíne
|
|
|
214-210-210
|
15-13-13-0
|
#D6D2D2
|
menüpont felső rész –színátmenet 2. sarok
|
|
|
188-185-185
|
27-23-22-0
|
#BCB9B9
|
menüpont felső rész –színátmenet 1. sarok
|
|
|
132-132-132
|
51-42-42-6
|
#848484
|
lábléc cím
|
|
|
100-100-100
|
60-52-51-21
|
#646464
|
lábléc szöveg
|
|
|
119-119-119
|
55-46-46-11
|
#777777
|
blog dátum, kategória
|
|
|
41-41-41
|
71-65-64-67
|
#292929
|
oldal háttér
|
|
|
43-43-43
|
70-64-63-65
|
#2B2B2B
|
fejléc-lábléc háttér
|
|
|
0-0-0
|
75-68-67-90
|
#000000
|
szöveg
|
Beküldve a(z) szakdolgozat, színrendszer kategóriába
2009. november 12.
A logó tervezésekor fontos szempont volt hogy az kis méretben is felismerhető legyen. A dupla w utal mind a weigel.hu mind a webfejlesztés kifejezésekre. Ugyanakkor a három dupla w-s megjelenés, az interneten elterjedt weboldal cím kezdő karaktereire (www) is emlékeztethet.
A logó felirataiban két féle betűtípust használtam:
- weigel.hu – Liberation Serif
- webfejlesztés – Alte Haas Grotesk
Beküldve a(z) logó, szakdolgozat kategóriába
2009. november 8.
8 féle bejegyzés típusnak kötelezően szerepelni kell a blogban. Minden bejegyzéstípusnak legalább egyszer meg kell jelenni. A 8 kötelező típuson kívül a szakdolgozat kategóriában szereplő bejegyzések adják a blog formában leadott szakdolgozatot.
A 8 kötelező bejegyzés típus:
- logó
- tipográfia
- színrendszer
- fénykép
- mozgó kép
- munkanapló részlet
- névjegykártya vagy más kommunikációs felület
- levélpapír vagy más kommunikációs felület
A kötelező post típuson kívül használom még a következőket:
Beküldve a(z) információ kategóriába
2009. november 8.
A szakdolgozat címe: Internetes arculattervezés - weigel.hu
Webfejlesztéssel foglalkozom, a weboldal célja a vállalkozás bemutatása.
Beküldve a(z) információ, munkanapló, szakdolgozat kategóriába
Bemutatkozás
