Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Monitoring app for work. You can roll over anything to get info, but if you are one of the people who is doing overview monitoring of our systems, you know what it all means, so thus the minimalism.

Only registered members can see post attachments!

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Zaasakokwaan posted:



In-house configuration file manager.

please please please align the left edge of the logo with the left edges of the input fields. It may not seem like a big deal, but it will drive a certain percentage of your users bat-poo poo insane if it's centered and nothing else is.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
/\/\ except now you have "Logging In..." centered when nothing else is. -10 points. :)


Adhemar posted:

Better to leave the image in the centre and move the inputs to the left to line up with it. Please.

Then the window has to get wider because there's no room for the labels if they inputs move over.

Lumpy fucked around with this message at 20:54 on Jul 8, 2008

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Zaasakokwaan posted:

Just a thought - what do you think about this:




Delete and pretend you never made it.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
I'll stop obsessing now.

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

leedo posted:

I am working on an open source one right now. It is pretty functional and is incredibly responsive. I am using the multipart/mixed content-type to stream JSON in an XHR. Here is the github URL. It only works in Safari and Firefox right now, and I don't think it will ever work in IE unless I switch to polling.

Right now it will display inline images and let you play inline audio as well. But it is incredibly easy to write new filters, I just can't think of any more.

edit: here is a screenshot


If you were trying to blur the channel names, you forgot the big one at the top of the browser there.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Id4ever posted:


I just launched fontcapture.com, which is a website that lets you create a custom handwriting font. Hardly unique, but the other sites like this cost money to use, and I plan to add a few unique features in the future, such as the ability to make small adjustments to your font (letter spacing, character alignment etc).


Beautiful. Thanks for the new font!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Lexical Unit posted:

NoDamage, awesome app. Looks like it's specifically for the iPad; are you planning on a iPhone version? Another nice feature would be to generate shopping lists from a set of selected recipes. If you could intelligently combine them into one list, that'd be perfect.

I like to plan what I'm going to be cooking for the week and get it all at once, so I'd use a feature like that pretty much every day I went out for groceries.

Observe the bottom right screenshot.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Parantumaton posted:

Monaco is monospaced Comic Sans.

Almost. The h, e, q, u, i, c, f, j, m, a and g are modified, but they are variants of the same face. Now I have a terrible urge to make a monospaced Market Felt. :cry:

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

yaoi prophet posted:

Hey this was my idea :mad:


Mine doesn't normalize, but it has exponential decay; I'm playing with the half-life, but 20 minutes seems reasonable. I'm also considering using a logarithmic scale so that stuff like numeric keys will actually show up, but I'm going to let it be user-customizeable as well.

What would be cool to add to that type of thing are "tails" towards the next key that was hit. With my typing skills, Backspace would be the most frequently hit key. :(

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
I spend far too much time tweaking my VIM colors, so I wrote this to make it easier. Need to tack on a back end for saving / loading, and it will be done.

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Shugyousha posted:

Ohh, this looks awesome and would come in very handy! I was just trying another colortheme, which always takes way too long for my taste. Is it browser/web based? If not, could you make it browser/web based for everyone to enjoy? :)

Yes, it is browser based, and it will be up in a public place as soon as it is done.

\/\/ cool, where is it up, I'd like to see how you did your UI

Lumpy fucked around with this message at 18:05 on Mar 6, 2011

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Other than play the MP3 I picked, it doesn't do anything. =(

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
So I finished my browser based VIM colorscheme editor a while ago, and there it sits, unused because I never think anything I make is good enough for other people to use. Well, time to stop being such a baby.

http://www.vimtax.com/vimtax

Pick a base theme, then hit Edit. Click on code to change it's color. Any suggestions on other languages to add?

EDIT: Bah, forgot attaching doesn't resize / timg things. Sorry for the table breaking :bang:

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

ClosedBSD posted:

This is amazing/awesome, you might just wanna upload some more of the most popular themes to it for people to use as starting points.


Also it might be worth noting that the CSS for the "VimTax was created by..." thing breaks on my work computer and shows up in the middle of the page, probably not a big deal though since I'm running Debian and whatever old-as-hell version of Firefox/Iceweasel they ship with it - it works on what Firefox is included with Linux Mint.

Good work!

Cool, thanks for the feedback. I have tested it under ubuntu, but not other distros, I'll see if I can figure that bug out. If you have suggestions on other themes to convert, PM me.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Shugyousha posted:

Thank you for this! I used it to tweak "desert" slightly just to my liking.

Maybe I missed it, but is there another way to export the edited version of your colorscheme other than previewing the file and copy & pasting the contents of it?

Save it, then you can download it directly. I will be adding a download link from the EDIT screen though.

\/\/ Yup, you guys are my beta testers :v:

Lumpy fucked around with this message at 05:07 on Jul 19, 2011

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

brian posted:

As opposed to just getting into poo poo with Nintendo for directly ripping the art assets and gameplay? I mean I dislike the name but I mean it's a fan game which is ridiculously shaky legal ground as is.

And seriously I need suggestions for a new name, Custom Wars, Commander Wars and AWOnline are already taken by other fan projects.

Doppelgänger Conflict!!!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

brian posted:



I just spent far too long doing that but the name made me laugh so I guess that's what it's called from now on!

Is it wrong that I feel like a proud parent? :banjo:

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Griffith86 posted:

working on a POS system for a company.

Login Screen

Main Window

Search View

(my hosting)

Hire a UI designer. Way, way, way too visually busy to be an effective UI. Lots of mixed visual metaphors (the use of red in particular) and there are lots of questionable positional choices. Make sure you user test the hell out of it (preferably done by a 3rd party), as a confusing POS system can cost a business lots of money.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Maluco Marinero posted:

I've grown kind of partial to it but that's fair. There's a version of Calluna Sans (thats he font) that has a more standard numeral set, no dropping below the baseline or anything. I'll probably change to that before release. What don't you like about it specifically? I ask because I'm not Particularly good at any one thing, I'm just good at keeping working, so feedback is always good.

It's written in Python with Django.

It's hard to read, as that typeface has a very ragged flow because of the numerals having a dropped baseline, the character shape / design not lending itself to body type, and it's kerning being really goofy on the web. You are inviting eye-strain, and that is not conducive to a great (or even good) user experience.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Steampunk Hitler posted:

Got bored and started working on a Chrome extension that uses Twitter's bootstrap to style the forums. So far I have the index page mostly there. http://imgur.com/a/Bo8OI

Course since it's a chrome extension the responsiveness doesn't actually help anybody, but hey boredom.

Very nice. I'll be installing this when you release it.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Maluco Marinero posted:

Just finished a redesign of the 'item' page for my web application. Not quite done yet, not pictured is the change log and major links which I still have to clean up, but I'm pretty happy with the amount of information I've managed to cram into this page without making it cluttered, at least to me anyway.

Most everything is in place edited with AJAX, and for anything heavier and unsuitable for that I use an inline form like on the second screenshot.




Just saw that typo too, ah well.

Hire / befriend a UI designer. As Suspicious Dish pointed out, there are a lot of usability issues in there. UI / UX is something everyone *thinks* they can do because great UI looks so "obvious" once you see it. Getting there is very hard, and takes training, experience, and some natural intuition (much like good programming.)

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Maluco Marinero posted:

Yeah, this isn't really an option. As I've said earlier, I don't have enough to pay for anyone to work for me,

That's why I added "befriend" =)

Post in the Web Design thread... myself and others do quick UI reviews / recommendations in there all the time.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Maluco Marinero posted:

This is all nice, but I'd rather keep things in CSS and fix my failings from there, which most of these frameworks don't seem to operate by. Either way, I'm just gonna keep mashing away at it and learn what I can from criticism. Anyhow, a few changes I did last night, bit busy with other things though:





I spent 5 mins layering stuff on your revisions....

The main gist of what I'd chage / did change is:

* Top-aligned form labels
* made inputs look like inputs
* underline links so it's clear they are links, not just different colored text
* "active" is denoted by color, easy to tell status at a glance
* maintenance tab has color so it doesn't look disabled (grey = disabled to users)
* whitespace between Addon links to prevent mis-click
* calendar picker icon for date field
* separator between components
* giant note pointing out red X confusion

As Gnack said, kudos to you for taking critique as a learning experience instead of hurf durfing away.

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Pseudo-God posted:


http://i.imgur.com/hoG9r.png
What do you guys think of this? Background color and pattern is nicer, the new king fits nicely, and I've added the borders on clicked figures.

The board needs to get rid of those "cut corners". The whole Metro interface paradigm is rectangular tiles, and you've violated it with the chopped corners. Plus, at different resolutions, you'll run into that "ghost dot" optical illusion (you border on it now in your screenshots) See: http://en.wikipedia.org/wiki/Grid_illusion to see what my words poorly describe =)

The tiled pattern you use to denote "selected" tiles is visually confusing - it's physically hard to look at; the eye "slides away" from that since the pattern is too small. Again, look to the Metro UI guidlines to see suggested "selected" tiles should be handled.

Ditto the background pattern. It induces eye strain and offers nothing of benefit to the user. Again, the Metro UI is based on "flat" colors, and you violate that here. Perhaps a very, very subtle top to bottom gradient (so subtle you can't tell it's there unless you really look) might help, but read the Meto UI guidelines and follow them.

The board colors compete with the color of the pieces a bit too much in certain cases; the contrast of dark piece on dark tile and light piece on light tile isn't as strong as it should be to my eye. You get a lot of contrast on the light piece / dark tile and dark piece light tile, so the board seemingly places visual importance on those squares, as the eye is drawn to them, while the others "fade back" because of the reduced contrast. Play around with different tile colors, or a contrast border on the pieces (black pieces get white border, and white pieces get black border.)

I won't get into the actual piece artwork / icons (i'm not a big chess player), but they need a bit more breathing room from the edges. They are "cramped" and I think some padding might help that.

Resources:
http://en.wikipedia.org/wiki/Metro_(design_language)
http://msdn.microsoft.com/en-us/library/hh202915%28v=VS.92%29.aspx
http://channel9.msdn.com/events/MIX/MIX10/CL14

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Pseudo-God posted:

So I took the suggestions you guys had and came up with this:

I changed the colors, the figures, and made the timers vertical bars that shrink as time goes on. What's left to be done is the initial interface, the list of moves, AI integration and some other stuff.

Look at this Google Image Search. The Metro UI *screams* chessboard. So rip it off!

I spent 10 minutes looking at screen schots of the Metro UI and a couple apps, then 10 minutes "designing"... this seems to be a more "Metroey" app to me. Why?

* Uses the Metro "tiles with gaps" paradigm to lay out the board.
* Uses "off tile" text in a similar style to Metro UI
* Leverages the grid of the board to lay out elements ('chess' baseline is centerline of first row, top of menu is top of 2nd row, row letters / numbers lay on grid lines, etc)

My Clocks suck, but just look at see how they are done elsewhere and let that inform your design.

Also, don't get discouraged. Design is *hard* (it just appears "obvious" when it's done right, so everyone thinks it isn't =), and with anything, you get better by failing early and often, and learning form your mistakes.

Only registered members can see post attachments!

Lumpy fucked around with this message at 17:14 on Oct 9, 2012

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Yeah, I posted that link back on the first go around :D

My post was not meant to be a "use this!" but a "how could you be more Metro instead of Windows 3.1" But go ahead and rip it up if you'd like. Or make a better one, which would be even more helpful for him.

EDIT
To be more helpful to our chessboard makers; to remove the grid illusion, you can space tiles out more (use the ratio that Metro does, I just plopped down some squares arbitrarily) and / or reduce the contrast between the BG and the tiles (I just stole two colors from a screenshot for the tiles in the example.)

Lumpy fucked around with this message at 17:28 on Oct 9, 2012

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

avidal posted:

i would like to have this?

I made one of these a couple years ago in HTML / js and forgot about it until I saw this. Demo at:

http://www.chmoddesign.com/testbed/wordClockDemo/wordClock.html

lovely source: http://www.chmoddesign.com/testbed/wordClock.zip (I think this zip is missing the AIR Ailiases js file, but you can delete it from the HTML and nothing will break)

Adobe AIR App (:smith:) of said clock: http://www.chmoddesign.com/testbed/WordClock.air


Having a screensaver of it would be quite awesome though.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Shalinor posted:

I could use some feedback on the app sore icon I'm working on. I realize it isn't precisely a screenshot, but - "game media"?

Note that the smaller icons lose the noisy detail, because the prototyping template I made this through does all of them via downscaling. For final art, I would by-hand export each one with appropriate noise resolution, meaning they should be more consistent with the top level. I think that will also help with how the lines get more distorted, the smaller it goes.



My biggest concern is the gradient border. Normally, I hate gradients, and avoid them in any layout work I do. But, it was already in the PSD as the flaming background, and snipped into a border, it adds that sense of "they're in a safe spot in the middle of a forest fire", eh... opinions?

Even though your icon is "blocky", you still have way too much detail to render well at the 57px and smaller icon sizes. I know you mentioned you'll tweak, but I generally have a second set of artwork for those. I'd tone down the gradient on all surfaces and up the contrast on the planes in everything non-retina and anything under 100px.

The border looks like a weird picture frame, and does not read to me as fire. It seems a bit out of place with your "looks flat but it's actually gradients" planes. I'd lose it or make it solid / subtle gradient to match rest.

That said, that artwork is phenomenal. Very, very well done.

In a strange coincidence, my 78 year old dad has recently become obsessed with me developing a fire-fighter themed game idea he had. He's rather shocked that I didn't take his rough idea and crank out a best selling app in my spare time over the last couple weeks...

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

tj9991 posted:

I wasn't satisfied with the meditation timers I found for Android, so I wrote my own. I call it Meditation Assistant Free. It has very basic support for sharing sessions with the community. I'm adding features as I learn Java to help motivate my users to meditate at least once a day.



Hey meditation Timer making buddy. I released one for iOS a few months ago (http://zazenapp.chmoddesign.com/) as another of my "Apps I want but couldn't find so I made it myself" series.

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

j4on posted:

What's up, waiting-for-review buddy!



I just saw this on one of the design blogs I read, and thought it looked familiar.... congrats!!!
http://www.swiss-miss.com/2013/02/petting-zoo.html

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

hendersa posted:

Thanks for pointing me towards the font. I pulled a TTF version of it from the web and re-did the logo.

I'll be the first to admit that I know hardly anything about fonts or font faces. So, I don't even know where to begin to "get a better grip" on such things. Do you have any specific suggestions that I should try to improve it? Is there anything obviously wrong with the fonts currently in use? Is it because I'm using a single font for the entire interface?

Suspicious Dish can be a bit.. uh... "short" sometimes.

As far as "getting a grip" on such things, there's nothing wrong with using the same typeface throughout, and the one you've chosen is fine. There are some things I would change as UX / Graphic Designer, but what you have is tons better than most programmer made interfaces.

I did a quick 10 minute mock up of what I would consider a modest improvement, and why:

1. Reduced the size of the logo. It doesn't help the user *do* anything, so it should be a non-prominent visual element.
2. Moved game list over to left side. Assuming an english user base, we read left to right, so the thing we do "first" goes on the left.
3. Reduced prominence of instructions. A user should be able to find this, but realistically will only need it once, so move it visually "back" while still being easy to see, and where it's relevant: near the list you need to navigate.
4. Changed the game display slightly: moved the info around a bit, and faded the labels back visually, as the content is what's important ("1991" is what I want to know, so it should be more prominent than it's label "release date")

The key to good UI design is being able to step into the shoes of somebody else and figure out what they want to do. Then, make that pretty =)

Also, your project is really awesome, thanks for sharing your progress.

Only registered members can see post attachments!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

hendersa posted:

This is very useful feedback, and I do really appreciate it. I'll spend some time reworking my interface to have a similar look and layout to what you have suggested. I'll have to make a few changes to it in order to accommodate the NTSC overscan, but that shouldn't be too difficult. I can shrink down my overscan safety margins a little bit (it can be as little as 3.5% - 5.0% overscan on the vertical axis), but I'll have to "squeeze" everything inward a bit on the horizontal axis to get everything inside the safety zone. The vertical overscan makes the upper gradient of the logo bar a problem, but the lower gradient on the same bar should be fine.

Thanks for all of your help! I'll be sure to mention you and Suspicious Dish in the documentation to credit you both for your assistance.

If you'd like some pro-bono design help, PM me, and I'll spend some quality time on it taking into account your technical requirements.

EDIT: designers spel gud.

Lumpy fucked around with this message at 01:33 on Mar 5, 2013

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

DrunkenAstronaut posted:

I've been cleaning up some older parts of a huge web-based system that's been in development for the past 5 years. Recently switched to using Bootstrap for more maintainable CSS and templates.

Here's one part I thought turned out especially well:

Before:


After:


Looks great. Now you get to deal with the joys hearing nothing but bitching. To quote myself: "The only thing people hate more than the terrible UI they've been using for years is change."

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

lord funk posted:

Who in their right mind would choose Arial over Helvetica?

I too suck at font selection...

Arial is a variant of Monotype Grotesque that was teweaked to be more like Helvetica. For a sans-serif that would work well in games (if I understand the needs) you want something with a large X-height, like Verdana.

Picking good typefaces is hard.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

lord funk posted:

Making a nub for better number entry on the iPad. There are three sliding areas for adjusting the value at different scales (1, 0.1, 0.01). Double-tap to reset.

edit: drat that first gif was sped up





Very cool, but since the units are "finer" as you move right, the ruler spacing seems reversed to me... the wide spaces should move by bigger amounts than the tighter spacing. Although I understand the "it's the same ruler zoomed in" paradigm you are using. Time for some user research!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Making a math game, which I am quite enjoying both creating and playing!



Here's a crappy GIF (must learn to make better GIFs) of some animation. This is from a Quartz Composer prototype I made before I started coding:

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Bungie's new game is pretty, and has a nice UI. Being the nerd I am, I coupled my natural curiosity of "how would I do that with CSS / JS" with my desire to learn the React semi-framework, and made a thing.




You can move the mouse around in it, click on things, and wish I wrote funnier fake tooltips here.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

LP0 ON FIRE posted:

I actually really enjoy playing simple math games time to time. I have a couple for my iPhone that you should compare to. True or False Math and Nabla. Nabla isn't really that good on some of the functionality side and presentation, but I enjoy it more than True or False Math because I can get more than one wrong before losing and needing to start over.

If you want to hop on our TestFlight beta, PM me and I'll send you an invite. We're a week or so away from launch (hopefully) and I'll post some codes here as well.

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
Continuing in my messing around with React, I made something vaguely useful: yet another JSON viewer.



You can use it and tell me everything I did wrong here: http://eskimospy.com/stuff/react/json/

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply