Design Diary Knowledge Sharing on Localized Platform

September 19, 2013

Responsive typography

Filed under: Uncategorized — U. Shafiq @ 8:54 am

FlowType

After responsive website layout, there is a new invention introduced for the typography. FlowType is a small javascript library. Which will facilitate you to use the typography on your website design and scale it down or up by the screen width or height. It will comes in handy mostly when you have dynamic content in a fixed size container or if you want to keep the same layout of the site on smaller screens. So by using FlowType javascript library you can easily readjusted font size to fit the available content on the fly.

It is similar to the feature I saw in iOS SDK ‘sizeToFit‘ or ‘Adjust to Fit‘ in Xcode Interface Builder. Which is available on all text labels and text input fields by default.

I bet this will give designer a new way to portray typographic expression via design.

Source: FlowType

August 13, 2013

Web development made easy for novice users

Filed under: Research — Tags: , , , , — U. Shafiq @ 10:17 am

Recently I have come across a new app for creating web applications in easy, simple and understandable way for normal novice designers. The application lets the user to drag and drop content, such as images / media, text and colors to the canvas in most known ways ( like Adobe Photoshop ).

It is very interesting to see new applications are coming these days for novice users, and empowering them to make new websites in very easy, understandable, and maintainable manner.

Don’t miss to see their sneak peak about some of the features.

Macaw Sneak Peek from Macaw on Vimeo.

Source: http://macaw.co/

January 14, 2010

Project Thesis (Supportive Narrative Document)

Filed under: Uncategorized — U. Shafiq @ 5:53 am

Supportive Narrative

July 28, 2009

iPhone SDK update

Filed under: Prototypes — U. Shafiq @ 9:23 am

Get the Flash Player to see this content.

1. Auto orientation is implemented on each screen.
2. Image view is now in full screen mode. (hidden tab bar)
3. Image detail view for information and more posts from same user.
4. Painting view in Full screen when you press post tab.

Painting view has simple drawing implementations, but I am working on it to implement accelerometer, and more drawing options, such as different graffiti spray caps with different textures, and colors.

July 3, 2009

iPhone SDK progress

Filed under: Prototypes — U. Shafiq @ 6:02 pm

Get the Flash Player to see this content.

This is to show you the progress I made so far with the iPhone SDK. It took so much time to understand the objective-C and getting started with the SDK itself.

UPDATES
As you can see in the video, first tab is for viewing graffiti updates you get from selected city via preference. You can see a list of images with its title, description and thumbnail. Once you tap on any one of them, it will zoom into the fullscreen and you can play with scrolling and zooming.

NEARBY
Next tab is for nearby, as it speaks itself. You will find the graffiti around you on the map, there are two different types of pin colors. Purple color represent digital graffiti and red color represent real world graffiti. You can see the thumbnail, title, and description of each by tapping.

May 23, 2009

Prototype Version 2

Filed under: Prototypes — Tags: , , , , , , , — U. Shafiq @ 4:27 pm

prototype02After few iteration of the concepts, I made this prototype in flash to simulate mobile experience, because I know iPhone development is gonna take some time.

So once you launch it, the first screen (UPDATES) you will see is the updated feed screen, where you will find all the new posts around the world or your selected/favorite areas. These settings yet to be implemented, but I believe in the prototype it is understandable.

You can scroll via scrollbar (see top right). By clicking on any thumbnail it will display it in fullscreen mode. In first image there is a info icon implementation, which will show you additional information about image, such as real posting geo location on map, reviews/comments, and/or similar images by same poster. (Yet to be implemented, probably in iPhone version).

“NEARBY” will display you google map with temporary three markers in the HKU street Hilversum(NL). You will notice variations in colors, orange color indicates digital graffiti art posting, green color is for real world graffiti art. You can double click to zoom the map.

“POST” will allow you to post your own graffiti, you have option to capture camera image and post it with out any change, and it will appear as real world graffiti on map, or you can take a camera picture of any real world structure and draw graffiti on it (or you can draw graffiti prior to the image capturing as well). After posting it will appear as digital graffiti on the map. Right now camera icon is for the simulation only, it will place a wall image in background so you can draw on it. Once you finished drawing you can save it as jpeg file in your iPhone photo libraries and at the same time it will appear on the google map along with your geo position. More option yet to be implemented (in iPhone version), such as graffiti title, description, and user profile.

Other options are dead at the moment, but “FAVORITE” will allow you to instant view your favorite graffiti, or add your favorite locations to receive update feed.

And I think “HELP” is gonna have a tutorial about application usage.

View Prototype:
LAUNCH

And feel free to place your comments.

May 13, 2009

Today’s Online Social Networks

Filed under: Concepts — U. Shafiq @ 3:03 pm

iPhone is been around since a while now, and I have seen several online social networks made their client application for iPhone. But in my opinion all of them are just providing mobile version of their existing website. And no network has yet expanded their functionality to utilize pure essence of mobile computing that iPhone has to offer.

Missing features of present Mobile Social Networks

The iPhone has proven to provide totally distinctive user experience in mobile computing as it was ever before. Each tech-development sector is utilizing maximum features in their application or game.

Some features may already exist in one form or another in some of the mobile social networks, but in my opinion these features lacking in today’s mobile social networks:

  • Simplicity – This goes without saying, but can often be overlooked.

  • Slick Interface Design – Some believes that design does not matter as being proved by Google, in some of its online applications. However, dealing with the iPhone, it is essential to match the standard of user interface design of the platform where application will going to reside.

  • Geo-location and Geo-tagging – These are the most popular and user voted features in present mobile computing.

  • Media Sharing – The ability to instantly record images and videos from the phone and share with its geo-tagging data.

  • Locate Friends – While on the move or on location, phone should be able to scan radius and show you a graph with available friend within surrounding. A security feature should allow toggling phone visibility on the network.

  • Find new Friends – While on location, set phone to discoverable and you will be able to meet people around you, while they have same security settings – Ability to browse their profile before introducing yourself – Instant messaging will allow you to invite them and they have choice to respond.

  • Organization of Contacts – Automatically organization of the contacts into different groups, such as family, business and friends.

  • Privacy settings – Online and Geo-location visibility settings of profile by user preferences.

  • Going out – While out for shopping, dinner – it would be great to be able to search your nearby locations for great deals from stores, hotels, and restaurants.

  • User Reviews – Ability to review any store, hotel or restaurant from user’s perspective, to get better understanding that what you can expect.

  • On Tour – Information search about foreign country, such as museum, historical place and other famous places with the help of Wikipedia. User reviews will be applicable here as well.

  • Favorites – Personal Opt-in search by keywords. So you can get push notifications according to your preference.

  • Events – Events finding and sharing by your geo-location. See the events your friends are attending, so you will never miss your favorite exhibition or music concert again.

  • Other services integration – It would be useful if you can to read your Twitter, Facebook, or any other online network feed, right from the single application.

April 27, 2009

Supportive Narrative (Outline)

Filed under: Documentation — U. Shafiq @ 11:31 am

KNOWLEDGE SHARING ON LOCALIZED PLATFORM

Outline of supportive narrative writing

1. PREFACE
Introduction summary of the project, inspirations, and reason explanation.

2. APPROACH
Summary of project approach, and narrow downing the focus into the specific direction.

3. RESEARCH
Project research description through Internet, Books, Literatures, and Interviews.

4. PROCESS
The process & development of the final product.

5. RESULT
Product description, and its usefulness.

6. CONCLUSION
Concluding explanation about project.

7. CITATION
Bibliography and URLs

April 23, 2009

Digital Graffiti Prototype

Filed under: Prototypes — U. Shafiq @ 9:12 am

Here is the first rough prototype I made after digging into the FLARToolkit. It requires a webcam and some prints of attached marks. The idea is to move these marks in front of camera and it will let you draw on the screen.

Each mark contains different color, and it can have different spray caps as well (I will implement it in future version). Once you have them printed on white paper, and enough light in your room, you can go ahead and click the link below.

A little bit buggy. Make sure you have selected the right webcam on your machine (Right click -> Settings).

April 19, 2009

Augmented Reality and FLARToolkit

Filed under: Research — U. Shafiq @ 7:42 am

Get the Flash Player to see this content.

Visit their website

I am inspired by this new capability of flash. There are some libraries available to use your live webcam feed in augmented reality. You can customized our own special marks as far as you meet some of its requirements, such as black surrounding thick border. So once flash translate these marks for you, you can augment different objects/animations on it.

There is a flash library available under GPL license on this URL: http://www.libspark.org/wiki/saqoosha/FLARToolKit/en

Older Posts »

Powered by WordPress