Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 19 2012

08:01

Design on the Go: Designer Apps for Android


  

As smartphones have advanced, and the display and photo capture technologies have improved, many have desired the ability to design and to edit images on their mobile phones. In fact, today hundreds of design applications exist on Google Play (previously known as Android Market). So in order to help you sift through the noise to find the ideal one for your needs, we decided to take a look at our top twenty designer apps for Android.

1. Adobe Photoshop Express

Photoshop express is an application based around the hugely successful computer program of the same name, but now adapted to mobile phone use. Though the app doesn’t have all the functions available on the PC version, it remains extremely popular for a wide range of photo editing functions.

2. WordPress Mobile

WordPress Mobile is a simplified version of the popular website blog managing software, which enables users to update, edit and create new websites straight from their smartphones. Ideal for any person who requires round the clock updates for their websites.

3. Color Dictionary

This useful application enables users to search and discover a variety of colors that can then be used in different design purposes. The Color Dictionary app can identify a color, or allow the user to select a color on a slider, and it will then apply a name to that color. Handy for all sorts of uses, whether choosing a website background or what color paint to buy for decorating your house!

4. ColorSnap

Similar to the Color Dictionary app, ColorSnap can capture colors from photos taken by your Android phone’s camera or pics from your library and identify them by matching to Sherwin-Williams‘ paint colors. The app is optimized for MDPI and HDPI phones and has never been tested on LDPI devices. It’s said to work well on old devices like the HTC Droid Incredible or the LG Ally, however, according to users’ reports, it doesn’t work well on Samsung’s Galaxy Nexus.

5. Color Mood Designer

In case you don’t like Color Dictionary and ColorSnap, Color Mood Designer is another app you can use to find the right color combination for your design project.

6. Finger Colors

The title of this app can make you think it’s another color-choosing app, but no, it’s actually used for painting and drawing with a user-friendly interface that won’t distract or interrupt you. The Finger Colors app enables you to set the width, transparency and color of your strokes, so you can draw or paint almost anything you want, including oil and watercolor paintings (well, digital ones).

7. Autodesk SketchBook Express

Similar to the previous apps, Autodesk SketchBook Express is a painting and drawing application with a huge range of useful tools. It works on smartphones that support multi-touch and run Android 2.1 or above; a powerful processor with a good amount of RAM will make the app run faster, but you can use it on mid-range devices like the Samsung Galaxy Ace, too.

8. Fotolab

Fotolab is an application that specializes in enabling users to alter the effects and colors of an already taken photo. Selective color draining, blurring and effect creating are all available, plus more. The app is easy to use, and even allows the user to set an initial effect and then add patches for alternative effects with just the press of a finger.

9. Photo Effects

Photo Effects provides the ability to apply numerous effects to your photos. Whether it be thermal, fisheye, hazed or pixelated, this application can provide the edit that you require. Normal edits can be made to improve photos, or they can be made entirely wacky! Easy to use and control.

10. Reduce Photo Size

Reduce Photo Size does exactly what it says on the tin. It can be used for editing image sizes, but its main use is to compress the actual file size. Many find that storing multiple images on their phone can deplete their memory rapidly, and so this app could be a useful solution to such a problem.

11. Photaf Panorama

This application enables easy arranging of panorama-style shots. While Android 4.0 is likely to provide this function itself, anyone who requires panorama creation without the new operating system will want to use this easily controlled app.

12. BeFunky Photo Editor

BeFunky is one of the most popular online photo editing programs, and now it’s available on Android, too. You can use the app to edit photos, apply different effects or add frames from the big collection it offers.

13. PicsArt – Photo Studio

PicsArt is one of the best and most complete photo editing apps that can be found on Google Play for free. You can use it not only for editing pics and applying effects to them, but also for drawing and sharing the works and the edited pics via Facebook, Flickr, Tumblr and a number of other social networking sites. It also adds new features to your smartphone’s camera and gives you the opportunity to take photos with effects the standard features don’t include.

14. Photo Enhance

Photo Enhance is another good photo editor to easily adjust brightness, contrast, balance and colors of your photos and make them look more detailed, as if they were taken with a very cool camera.

15. Dash of Color

Many users look for apps that turn usual pics into black-and-white ones. But if you’re looking for just the opposite, Dash of Color will help you add colors to any kind of black-and-white photo. You can also use this app to convert any image to a black-and-white one and then add some selective colors of your own choosing.

16. Fontroid

Most designers have to deal with fonts, and Fontroid is an app that can be useful in that arena. It enables you to draw and create your own fonts, upload them and share with your friends/colleagues. The best fonts become available for download from the official website in TrueType format.

17. Photo Grid

With Photo Grid by RoidApp you can turn your photo galleries into collages and easily add thumbnail photos for them. This is one of the most popular apps on Google Play with a huge number of positive user reviews, so you might find it worth trying.

18. Gallery+

Gallery+ is an application that provides greater flexibility for gallery organization for the images on your phone. Android has been criticized in the past for not enabling this on the operating system supplied gallery, and so Gallery+ has attempted to rectify this in order to make the organization of photos more convenient. Features that brighten up the backgrounds and style of the albums also exist.

19. PicWorld

PicWorld is a highly rated application that enables easy search of images across the Internet, using a variety of filters. Whatever photo you’re searching for on your mobile, PicWorld is likely to produce great results compared to manually searching through an Internet browser search engine.

20. HP e-print

This app, brought to you by the computing giant Hewlett Packard, enables easy printing of documents that are stored on your Android phone. Rather than needing to transfer the file from phone to computer and then to printer, the app enables the user to print straight from the mobile. Saving time and headaches.

That’s a Wrap

So what are your favorite design related and image editing apps for Android, either ones that made the list or those that didn’t? Feel free to leave us your thoughts in the comment section below. We look forward to hearing your two cents.

(rb)

September 17 2011

10:00

Best Approach to Mobile Website Design

We’ve heard 2011 being many times named as the year of the mobile web, although the last couple of years we heard this association many times. As technology advanced, so did the mobile phones, which we call smartphones today. The internet usage increases every month and the tablets and smartphones start being adopted by every family. 53.6 million people in Japan access the internet from a mobile phone per month, which is almost as much as the users who access the internet from a PC. In the United States around 20 million users use Facebook to check-in every month, so the number of people who access the internet has to be somewhat bigger. According to different sources, the number tends to get past 100 million users monthly. Nobody expected this to happen 10 years ago, but here it is. Therefore the developers have more work to do now with so many companies asking for their own mobile website.

In this article we will focus on a user-centered approach of the mobile webdesign which became popular in the last couple of years. With smartphones having a narrow screen, limited space and less keys, the mobile webdesign is quite different compared to the classic one, for computer screens.

On-going cycle

There are many steps from the idea of a mobile website to actually having one. The user-centered mobile design cycle has five different phases, which we will take a look at soon. The phases are: Analyze the situation, Understand the users and their needs, Prioritize the features, Design the website, Review, testing and refining. This cycle is ongoing on a long-term basis and never ends. Several months after the official launch you might find yourself in the situation that you need to start the process again. As a matter of fact, this happens in web design as well, with companies redesigning their websites/portfolios very often due to analyzing the situation again and realizing things need to be improved.

Let’s take a more in-depth look at each phase and see why each one of them is important in its own way.

1. Analyze the situation

Analyzing the situation starts with the following question: “Do I really need a mobile website now?“. It sounds silly and for most of you might not be relevant, but companies have to ask themselves this question. Not only is a mobile website going to cost several hundreds of dollars, but it requires research and, as we mentioned earlier, a lot of ongoing work. If the company does not have a design department to maintain it, a mobile website might become useless or ineffective in a few months. What you have to do is to find out if your website is accessed from many mobile platforms. You can simply do this by checking your stats in Google Analytics or any other tracker.

Do you need a mobile website?

Image Source: mobilewebsite.com.sg

It is not a bad idea to see how the competition is doing in the field. Don’t forget you are not alone in the market and these small details might make the difference at some point in time.

When you created a desktop website, you had some clear ideas in mind: you wanted to raise awareness, to increase the sales and get your company beyond the borders of your town, region or country. Think about whether the mobile website would do good for you and your company. Otherwise why bother to design one if you don’t get anything in return?

If you don’t see any reason for creating a separate mobile site, then just optimize your site for mobile devices (e.g. images size) or install a plugin if you run WordPress. Banks and online shops need a mobile website, there is no doubt about this, but I doubt you need a mobile website if you own a clothing manufacturing company. Big companies like IKEA, Burger King or Mercedes do not have mobile websites, because they consider there’s no need for one right now. So think twice about it, if these huge companies do not have a mobile website (and it’s not because they have money issues), would one bring you some advantages?

Now if you still think you want to go through with this, then let’s go to the second phase and get closer to the user and how should we please him.

2. Understand the users and their needs

The whole web design process is user-centered, because the user is the one whom we create a website for. Mobile web design is the same. To achieve the best results you have to understand the needs of your users. This is one of the difficult parts, because everything starts from here. If you get this wrong, the whole solution will fail. The research can be concluded through observation (how the user interacts with your page, what are the main things he is interested in), interviews (quizzes) and focus groups (form of research in which the interviewed is represented by a group).

Understand user's needs

Image source: BBC UK

Some of the main questions you need an answer to are:

  • Why do they (want to) access your webpage from a mobile phone?
  • What features are they mainly using?
  • What is important for them when browsing on the go?
  • What is it they do not like when browsing from mobile?
  • What devices, browsers or applications they use to access the web from a mobile device?

After having the answer to these questions, what you still have to do is to research the market. Now you have a good understanding of your users, but you need to know how to design in order to maintain your solution within the popular trends. Opera’s State of the Mobile Web, comScore, Forrester, eMarketer and others are good places to do your research.

3. Prioritize the features

After you conclude the research, you’ll probably have found out what features your users are accessing the most. This and the other answers gave you an insight of what is it you have to feature in your mobile solution. The reason why you can’t just insert all the features from launch is because you might not be able to handle maintaining all of them. Don’t forget, it all requires effort, money and time. Try not to build everything from the beginning and stick to the most important features, then if everything works well there’s always more place on the web for the rest of your ideas.

Prioritize features

Image Source: paperthin.com

While we have this figured it out, let’s move to the most interesting part.

4. Design the website

This next phase can be considered a short guide to mobile web design. When you design a site for the desktop, you use some basic rules you’ve learned when you first arrived in this business. Well, it is exactly the same with the mobile websites, only there are some other rules. There are lots of mobile design considerations you need to think of and we take a look at the most important right now.

One of the most important differences is the context the user is accessing a website from. When he uses the desktop version, a user most probably sits in his own chair at home, with maybe a cup of coffee, listening to music and chatting at the same time. This is comfort. When a user browses from a mobile phone, the context is different. He is probably on a bus or train, maybe even at work in a meeting or on their lunch break, probably trying to multitask while viewing your site on a small device that has a narrow screen with a small font. Now that’s a big difference.

After using different considerations, we can come up with three main reasons why people browse with smartphones: microtasking (Twitter, Facebook, LinkedIn), boredom (playing games, listening to radio) and activities related to the social, offline life (finding shops or restaurants nearby, checking reviews). Besides these, the basic things that need to be taken into consideration are the following:

Design for smaller screen

Remember that the mobile web design is designed on a big screen. It is definitely not easy to make everything perfect when working like this. There are so many screen sizes out there for computers, but there are even more for mobile phones. Almost every smartphone manufacturer has its own preferred screen sizes or resolutions. Even the iPhone 4, one of the smartphones with a big screen, is tiny in comparison with a default setting of 1024 x 768 for a desktop screen. Moreover, some phones are able to change orientation and the website has to change accordingly. No computer screen changes orientation, so this is actually something new for developers.

Image Source: techwench.com

The best solution is to opt for flexible layouts that will adapt for smaller and larger screens. The easiest way of doing this is having a wrapper with sizes given in percents, not in pixels. Furthermore, every little detail in the HTML has to be given in percentages and not in pixels to make sure the layout is flexible. This way the website will look the same on screens of 150px width or 200px width. Also, depending on the mobile platform, there are different groups of users sorted by the browser they have. It can be Safari, Opera Mini, Nokia WebKit (only for Europe), Android WebKit or BlackBerry WebKit. All these browsers have their own problems and do not support different kind of languages, although all of them support CSS 2 and soon CSS 3 as well.

Simplify the navigation

There is no mouse on phones, therefore the developers have to focus on the navigation a bit more. Upon the small screen, users also rely on touch, trackballs and keypads to click and navigate, so the experience is very different compared to the one on a PC. Information and main features are usually presented on several lines (as you will be able to see at the end of this article), because most of the mobile screens have a larger height than width, therefore it is also more vertical space to work with. The most important features usually come first, because the user might have to scroll down to see the last ones. The numbers of categories, links and levels of navigation have to be reduced as much as possible.

Although not many websites do this, providing key shortcuts (0-9) to access different links might be very useful as well. CNN did this a while ago, although we do not know how well it worked out. Because people have to navigate by touching most of the time, make sure the height and width of the buttons are proper. If you have three buttons in row with a width and height of 15px it might be difficult to tap the one in the middle. Do not use pixels, but percentages! There is a big difference between a button with a width of 30px on a 250px wide screen and one with the same width on a 150px wide screen.

Your mobile website needs to make an immediate impact, therefore try to make the links as visible as possible (see CBS News’ website). Always offer a link to the full-sized webpage, because if a user is on a wireless connection he should be able to visit the main website if he wants. I usually use the footer for this link. Because navigation isn’t as deep and difficult, there is no need for breadcrumbs to use space.

CBS News Mobile Website
CBS News Mobile Website

Prioritize information

Because there is not much space, you have to be concise and only type in the important information. The reason behind you linking to the master webpage is for users who are interested in finding more information about you and your company. There is no reason for you to fill paragraphs with useless information, because the mobile webpage is for presentation only. You don’t sell from there and the main reason behind it is to bring in more clients. You gave them a “teaser”, a chance for finding more (the full-sized webpage), now it is their move.

Minimize user input

Because the user is not in front of his keyboard, it is also a good idea to help him a bit. Keep the URL as everybody else does (mobile.site.com or m.site.com). If the user requires registration, narrow the fields as much as possible. Instead of asking for city and state, ask for the ZIP and there you go, one field less to type in! Also, make use of the geolocation if you can feature it. Use smart features, such as remembering the latest data input. Applications related to transport usually remember the last stations the users typed in. It is a bit different with the websites, but try it. Moreover, offer the possibility to stay signed in.

Keep the usage low

Even if today we have 3G speeds and wireless connections, users in some countries still pay for each bit of data they use. Therefore don’t insert too many images (or at least not high-quality ones), keep the page small, cut unnecessary code, comments and optional tags.

Furthermore, you can use a script to detect if users visit your homepage from a mobile device. If this is the case, simply redirect them to the mobile website. Flash, JavaScript, cookies, HTML5, frames and pop-ups do not work on mobile phones yet, so do not rely on them. You will probably need to make your users scroll, but only do it one way. Most websites scroll vertically, do not make the users scroll in both ways.

5. Review, testing and refining

After you are done with these four phases, you still have a small step until the official launch: you need to test your solution. This does not take too much time, but it is another important step, because releasing a product with bugs might make you lose clients or visitors, in our case. Double check the code (it would be a good idea to do it by W3C’s standards) and try to use your mobile website on a smartphone, because mobile phone emulators are good, but not entirely precise. Ask your friends to offer you their smartphones for short 10 minutes tests and make sure everything is in place. Otherwise go back to phase 4 and refine the website until it works perfectly.

Improvements

As discussed earlier, this is an ongoing cycle, so you will have to make improvements all the time. They can be updates, new features or a whole, from scratch, redesign, but always try to offer something new to the users. Try to track your mobile website visitors and observe their behavior. If they spend way too much time on your site, it is probably because it is too heavy and it loads slow. If they spend next to no time, it is because you can’t catch their attention immediately. Track your users and determine your website’s strong and weak points and refine them.

Conclusion and examples

There are so many things to talk about on this topic, but we will stop here. I think we’ve covered enough for one day and, as all the basic information has been given out, I am sure now you know more about how to approach the design process of a mobile website. Here you can see a showcase of several mobile websites designed very intelligently and featured the way they should be.

1. Yellow Pages

Yellow Pages

2. Walmart

Walmart

3. Vimeo

Vimeo

4. Trip Advisor

Trip Advisor

5. Flickr

Flickr

6. Digg

Digg

7. DeviantART

DeviantART

8. CW TV

CW TV

9. Amazon

Amazon

Further sources on this topic

Tips to design iPhone apps and webpages

Mobile webdesign trends of year 2009 (this may be a bit old, but many elements still apply today)

Tips and best practices for mobile webdesign

Is there something else you would like to add? Do you have other opinions about this process or is it maybe something you do not agree with?

June 07 2010

11:15

Free Image Editing Application “Picsay” For Android SmartPhones

If you are an Android smartphone owner, you must spend a lot of time capturing moments through the lens of your phone’s camera. While the pictures you take are often good enough to remind you of good times, sometimes the moment is made more memorable if you add funny effects to the pictures.

To add such effects to the pictures you shoot from your camera, you first need to transfer them on your computer, then use a computer software to edit the transferred picture. With PicSay however, you can complete the entire process within your cellphone.

PicSay is a free picture editing application for Android smartphones; it lets you add wonderful funny effects to the picture stored on your phone. This application enables you to be a lot more creative with your pictures: you can improve the images by color correction, or make them more fun by word balloons, paint, stickers, special effects, and more.

Sample

Picture personalization is one of PicSay’s aims and users are able to do it with ease.

sample2

One of PicSay’s prominent features is selective desaturation through which you can select only a specific area of a picture to be shown in color, and the rest in black and white.

sample3

“Watch Your Head” is another fun tool of PicSay that facilitates changing the heads of two people (or even animals) in a picture.

sample4

The basic features can be found in PicSay’s free version whereas the best features are in PicSay Pro, the paid version. Both the applications can be found through in the Marketplace through your Android phone.

(* Note: PicSay Pro will not show in Marketplace unless paid Android apps are supported in your country.)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...