Counting made easy
Log in
Remember me

CalorieBase Design improvements


My name is Mate, I run this website which is the most popular calorie counting website in Hungary with 500.000 users. It has also an English version, (started not long ago). Now you have to focus only on the mobile version:

I have a limited budget to finance developments and I have more urgent tasks and thats why I had no chance to improve the design in the last years . But I'm aware of the problem: the website doesn't look good enough to be appealing for new users. So now I decided to run a contest to see if you can help me with this.


The menu structure, positions, the buttons sizes. The button animations and sub-menus are all based on this structure, where we use 5px spacing, and 40px rows, and buttons (however we want to double the resolution for these ones: 10 and 80px). We cannot change this basic structure, because it needs a lot of programming, so you need to be creative to make it look better with current structure.


1. The original concept of the site was that calories are "bad" so they are red color, and sport activites are "good", so they are green color. Red and green is very different color (which is advantage in separating those sections), but they don't look nice together, so I'm ready to change the colors but somehow we still need to show that calories are "bad" and sports are "good". The yellow boxes are showing calculated numbers.
2. The original concept was that I wanted the whole site to have a "calculator feeling": the message is that it is not made to attract people by fancy design, but it's strongness is it's knowledge and usability, same as a hand calculator. I want to maintain this concept, but with a more modern design.
3. Another concept is that I want to make the usability easier for long time users instead of first time users. It means I prefer to show more options/buttons on the screen (which can be frightening to new users, but it's okay), instead of having a very easy-to-use feeling when you first visit our site (but later you need to click a lot to reach functions). Number one priority is still long time usability.
4. I want to emphasise I love to use colors to separate parts.


1. you can use new colors totally freely along all site.
2. You can add some color overlays, gradients, backgrounds, to different sections.
3. You can add new frames (delete frames) to buttons/rows (without changing the size).
6. If you use new font, then it should be 100% compatible with different languages (for example: Hungarian characters like ö, ő, ü, ű, etc).
2. I need better design for input fields (currently inactive is red, and active is white, but you can change it)


1. Be careful with technologies which could cause performance issues, as site speed is very important.
2. The main goal now is NOT to get new images on buttons (it's perfectly okay if you dont touch them), but an overall better and consistent look. However if you want to achieve this goal by also redesigning buttons and rows (new color, new active/press effect, ), you can do this too. In current version buttons are 40x40, but in new design they will be 80x80.
3. The new color concept needs to be compatible with meal colors like breakfast, dinner, etc.
4. I love flat design, but I want to encourage you not to limit your imagination. I really appreciate creative ideas, flat or not.
5. I want a mobil app athmosphere. Most of the similar sites use so simple designs that they look like settings menu of your phone. I find them very boring, I want to separate sections with nice colors (maybe backgrounds).
6. Clear visibility is also important so try to avoid hurting it with too many new design elements.
7. I need the winning design in a format which I we can use also to sub-menus and desktop version of the site.


i know it's not easy to make it look better AND compatible current structure, it's a big challenge. Be creative and use your imaginations. It's possible that I will need further adjustments from winning designer in the future, so it's a plus if you will be available to work.

Mate Magyar
Desktop version    Mobile version
You can read data management conditions here.
By using this page you automatically accept Terms of Use
The use of this page is your own responsibility. The material appearing on CALORIEBASE.COM is for educational use only. It should not be used as a substitute for professional medical advice, diagnosis or treatment.
Copyright ©
This function is available only for registered users!
You need Premium membership for this!
Ez itt a belso szoveg
Ez itt a belso szoveg2