// Urbanflow’s video try to look at a new way to use signage and mobile devices.
// Inspiration / Hand drawn website
// Xixi No Banho wants to bring people attention about water with cool hand drawing interface.
// Documentary: The Works German Design in Hong Kong
Inspiration / Logos Design
// Those 4 logos were my inspiration for my last creations.
Advertising / Facebook Fan Page
// Website for some Facebook inspiration fan pages: Facebook Showcase
Mobile interface / Inspiration Sport App
// 3 different approach for a coaching app from Nike, Reebok and Adidas.
Freebies / Resume Icons
// I designed those icons for the headlines of my new resume. Feel free to download them if you like them! In the .psd file, you will find each icons as a shape layer. So, it will be easy to stretch them out.
Design skills / Reading
// Essential reading to master Fireworks: Adobe Fireworks CS5 Classroom in a Book
// Tips & insights from ThisWeekInDesign about designing mobile projects.
Mobile interface / UI Android Guidelines
When designing an app for Android, here is a good start point to begin with:
UI Android Guidelines
Mobile interface / Reading
Good way to learn more about designing and building mobile experiences: Mobile Design and Development by Brian Fling
Luke Wroblewski – Designing for Mobile
listening to the podcast
// New JCST tshirt design for the upcoming Eastern tournament.
Mobile interface / icon design
Designers can build a mobile website with an unique personality when they focus their efforts on details. The users will feel it within the whole website later on.
Icons are one of the first design element users will notice. For apps or mobile websites, shortcuts icons will be asked. Depending of the devices, you will need to consider different sizes for your set of icons. For the most popular devices, here are the size specifications:
- 57x57px: Android + Iphone 3
- 114x114px: Iphone 4
Ressources :
- iOS icons inspirations: iOS Icon Gallery
- Article listing different free icons available in .psd: 1stwebdesigner
Mobile interface / Fireworks vs Photoshop
When designing a mobile website, different people - with not the same background - may have a word about the design (UX Designer, Project Manager, …). If so, the process will requires more production steps. As a designer, this can easily become an annoying task to handle if you don’t use the appropriate tool.
Photoshop interface has the most expandable toolbox in therms of design editing. So, it was a natural choice for me to use it when I started any new projects. But later on, with my involvement in more mobile interface design, I found different limits to it. Fireworks was more appropriate for those tasks such as:
- managing different common design elements in a library
- designing clean vector pixel and bitmap shape
- setting page states
Ressources:
- Many good tutorials and articles on Fireworks: Fireworkszone
- Fireworks extensions: JohnDunning
