Mobile Web Design Application: Embrace or Limit Creativity

If you have any questions about anything graphics and media related then please ask in here.
3 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

I've been building an experimental web design application called Mirrored Mockup Design.

The goal is not just to have it write clean semantic html and css for you, but also to have the application be available for smart phones, tablets, and desktops.

I've experimented with various ways of handling elements and styles and built a variety of prototypes and interface designs to see what would be the best way about making this application. I had friends, family, and even strangers give these prototypes a try and had them tell me what they liked, disliked, what they'd want, etc: etc:

Sometimes I find drag and drop to be more convenient. Especially when I'm incorporating a component (ex. photo gallery) Other times I just want to draw an element and manipulate it, like you would in Photoshop or Macaw.

I'm not happy with how elements are handled let alone styled in the current version being v1.2 of MMD. So I've been reconstructing the entire application from top to bottom.

Interactions are what most people want, something easy to use that doesn't require a lot of time to learn and that's powerful, but also people want complete creative freedom to design whatever they really want. Which is why Edge Animate, Edge Reflow, Photoshop, GIMP, Blender, Macaw, Dreamweaver, and many other applications have become successful and achieving their goal, making new ones, and achieving them as well.

Now if this application was made specifically for tablets and desktops I would not be here. Why? The major troublesome problem I continue to run into is how the application will run on small scaled smart phones.

Being able to handle interactive dialogs for something like a color picker, or border, let alone being able to add multiple drop shadows, inner shadows, and/or background gradients, among other css properties is one problem I've ran into consistently.

Most web design apps I've tried on Android and on my iPod make me choose from predesigned layouts and I can only manipulate a miniscule amount like change text, background color, and background image for example.

I don't like this because creativity is infinite and a web design application should embrace creativity. Not restrict it!

For smart phones color dialogs are usually displayed inside a lightbox. That take up a lot of space for the mobile user. It makes since why they do this, but it also limits your view of how the colors are changing the element in real time.

I don't want to limit creativity, but with how small these devices are (My iPod being at 320x480) It seems as if this would have to be done with such a small device.

Image

I'd like to hear some other people's input on this topic, because I'm really not sure where to go for smart phone users. Therefore your input will be very helpful.
User avatar
CodenStuff
Site Admin
Site Admin
Posts: 4389
Joined: Tue Aug 04, 2009 1:47 am

Mobile design is a "touchy" subject, apps can be fantastic on mobiles and reach a massive audience and be convenient for the user...but from a programmers point of view its a b*tch to work with in terms of how to come up with the best layout and design interface to make it user friendly and the best user experience.

I'm not really qualified to give you advise on this subject as I haven't dipped my foot in to the mobile market yet.

You did mention not being sure whether or not to have drag-drop or manipulation in your app, I say have both. Drag-drop for quick on the go editing but with the added option of a power mode for advanced manipulation and editing.

As for the color picker obscuring the users view, why not try designing some smaller interfaces that take up less screen space for example you could have a color picker slider that appears at the top of the screen like:

Image

*Sorry about my drawing skills lol*

You could also add pinch-zoom so the user can focus in on a specific area and object for editing.
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

CodenStuff wrote:
You did mention not being sure whether or not to have drag-drop or manipulation in your app, I say have both. Drag-drop for quick on the go editing but with the added option of a power mode for advanced manipulation and editing.

As for the color picker obscuring the users view, why not try designing some smaller interfaces that take up less screen space for example you could have a color picker slider that appears at the top of the screen like:

Image

*Sorry about my drawing skills lol*

You could also add pinch-zoom so the user can focus in on a specific area and object for editing.
Integrate both drag & drop as well as draw? I don't think I've came across a web designer that integrates both (besides GWD which is terrible). I'm definitely going down that route. Good suggestion!

After designing several ui mockups recently I've decided the best way to handle some of the most advanced features are incorporating them as a tool for smart phones. That way it'll be a lot easier to handle background gradients.

Which "should" work well with my color picker.
hsla-color-picker.png
You do not have the required permissions to view the files attached to this post.
3 posts Page 1 of 1
Return to “Help & Support”