3 Replies - 399 Views - Last Post: 04 June 2011 - 09:55 PM

#1 NotarySojac  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 53
  • View blog
  • Posts: 428
  • Joined: 30-September 10

How do you develop sweet interfaces?

Posted 04 June 2011 - 04:01 PM

Let's say I have this idea for an interface. It's a time table that's a beautifully colored matrix:

x 1 2 3 4 5 6 7 8 9 
1 1 2 3
2 2 4
3 3 6
4 4...
5 5
6 6
7 7
8 8
9 9...


(Imagine something similar to this, but more beautiful:
Posted Image

And what if I wanted tons of fancy features to go along with it:
* answers are behind blocks, until mouse over
* On mouse over, block "disolve" presenting the answer
* The multiplier rows are specially color coded
* All numbers have pleasant borders around them
* Matrix has a dark background
* Each individual cell can act as a button for a function independant of the other buttons

Now, my questions are:
1) How long would it take you to build this sort of web experience?
2) What technologies would you use?
3) What tools would you use?
4) What about browser compatibility?

This post has been edited by NotarySojac: 04 June 2011 - 04:24 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How do you develop sweet interfaces?

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,149
  • Joined: 07-September 06

Re: How do you develop sweet interfaces?

Posted 04 June 2011 - 08:19 PM

Well, there are some parts of this which would prove more difficult than others (such as the dissolve effect for instance).

I would actually do this all by hand (mainly because I have been building a library of useful functions for a few years now and don't really have a need for one of the larger frameworks), but jQuery would likely be a popular choice here.

Now, because of technologies like CSS and Javascript you could do most if not all of this with the two and have it run fine in most browsers. Certainly some versions of IE (maybe all) and almost all older browsers will not be able to support at minimum some of what you are trying to display (which is a downside). But it is up to you how you go. Flash would be able to do everything you are talking about and even be pretty simply to set it up in, but then i* devices wouldn't work (because of Apple's stupid hatred of flash).

I would basically just go for these browsers and make sure they work: IE8 and IE9, Chrome, FF 3.6, Opera, and Safari, all stated refer to desktop versions, not mobile versions of the browsers.

As for what you are wanting for the features here are the technologies (which I have talked about above) that are capable of getting the features to work easily (or at least should be able to with modern browser versions):
answers behind blocks until mouse over: CSS, Javascript, Flash
dissolve effect: Flash (perhaps CSS/ Javascript as well, but I am uncertain here)
Multiple special colored rows: Flash, Javascript, CSS
bordered numbers: FLash, Javascript, CSS
dark background: Flash, Javascript, CSS
cell button function: Flash, Javascript

Questions:
1) It wouldn't take long to get most of this done, but the dissolve effect may take a bit longer. Most of it is pretty straight forward.

2) I would go for Javascript and CSS personally

3) Hah, here I am a bit different, but I like being different in this regard. I would use a web browser and a text editor (Notepad, Notepad++, VIM, gedit, textbox, etc.)

4) I would make sure it works in the 5 major desktop browsers (IE, Chrome, FF, Opera and Safari).

Hopefully that makes sense and is of some use to you.
Was This Post Helpful? 1
  • +
  • -

#3 RandomlyKnighted  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 117
  • View blog
  • Posts: 1,365
  • Joined: 14-January 10

Re: How do you develop sweet interfaces?

Posted 04 June 2011 - 08:45 PM

What about using the CSS hover effect and just change the color to something else. Then (not sure how to do this) have it change the text in that box to the answer.
Was This Post Helpful? 0
  • +
  • -

#4 NotarySojac  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 53
  • View blog
  • Posts: 428
  • Joined: 30-September 10

Re: How do you develop sweet interfaces?

Posted 04 June 2011 - 09:55 PM

Gah, I hate designing this way, so much googling to figure out what comes next. So I've got a setup where I'm designing an html table now. It looks like this:

<html>
<head>
<style>

.MatrixTable {
background-color:#666666;

color: #222;
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-shadow: 0px 2px 3px #555;
}

</style>
</head>

<body>
<table class="MatrixTable">
	<tr>
	<th>x</th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	</tr>
	
	<tr>
	<th>1</th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	</tr>
	
	<tr>
	<th>2</th>
	<th>2</th>
	<th>4</th>
	<th>6</th>
	</tr>
	
</table>

</body>
</html>




And it's kind of occurring to me that once I figure out how to code everything, I should program a php script to generate the HTML MatrixTable for me, where I would then be able to view the source of the page and copy out the table for use in an app (that way I can vary the size easily if I ever need to, and I'm lazy about typing things out, lol).

How would I go about making the inner numbers buttons (ie not the column and row headers)?

Gah, I hate designing this way, so much googling to figure out what comes next, but now that you guys say so, it seems like this sort of control could be manageable. So I've got a setup where I'm designing an html table now. It looks like this:

<html>
<head>
<style>

.MatrixTable {
background-color:#666666;

color: #222;
font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
text-shadow: 0px 2px 3px #555;
}

</style>
</head>

<body>
<table class="MatrixTable">
	<tr>
	<th>x</th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	</tr>
	
	<tr>
	<th>1</th>
	<th>1</th>
	<th>2</th>
	<th>3</th>
	</tr>
	
	<tr>
	<th>2</th>
	<th>2</th>
	<th>4</th>
	<th>6</th>
	</tr>
	
</table>

</body>
</html>




And it's kind of occurring to me that once I figure out how to code everything, I should program a php script to generate the HTML MatrixTable for me, where I would then be able to view the source of the page and copy out the table for use in an app (that way I can vary the size easily if I ever need to, and I'm lazy about typing things out, lol).

How would I go about making the inner numbers buttons (ie not the column and row headers)?

View PostRandomlyKnighted, on 04 June 2011 - 08:45 PM, said:

What about using the CSS hover effect and just change the color to something else. Then (not sure how to do this) have it change the text in that box to the answer.


I have no css skills, but I'd need it so the outer cells (the column and row headers) don't behave the way the inner ones do.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1