What is Night Night?
Night Night is a website that helps you get a better sleep by telling you when it's the best time to sleep according to your sleeping cycles. You provide it with the time you'd like to wake up in and the website calculates it and gives you 4 times to sleep in.
I've designed and wrote the html/css of www.NightNight.me.
to test my flat design skills, and at the same time I used it to practice responsive web design. and on the other hand I thought it would great to try even more new things such as using SVG for all the images.
Now it's time to show love, Me and my fiance would really appreciate it if you liked the project here in dribbble & facebook and tweeted about it.
ps: you should take a look at the source code ;)
7 months ago
Great work mate!
@Zeki Ghulam ツ Thank you Zeki, So glad you like it!
Lookin' good Mahdi. A few comments.
The difference between font weight between the hours and minutes isn't different enough.
Not sure what the sun/moon switch does (I presume allows user to select whether the time in in day or night but not overly clear.)
Maybe allow user to enter time as text input
Other than that, looks nice. Can't wait to see the next
Clean :) nice job!
@Mark James I agree with you on on most of what you've said. My whole focus in this project was to create something responsive, to try SVG images, to create a flat design and a few other experiments.
The font weight I didn't spend much time looking for the perfect font, I've used a font that has a big difference in the font weight but didn't want to make it an open-type font, so Instead I just used google web fonts so I don't spend a lot of time on it.
You're right as well about the sun/moon, but I wanted to test how SVG images would look like when resized in HTML/CSS, I should've put it as text.
I don't want to allow user to enter time as text input, inputs sucks on mobile phone, users tend to click on buttons and select things because it's easier.
@Ehsan Rahimi Thank you Ehsan :)
@Mahdi Al-Farra that's fair enough. Rather than use SVG, I reckon for the majority of times, icons fonts are the way forward. Only slight problem is IE (as always) but it's worth if for the otherwise simple design and development
@Mark James icons fonts are cool, will probably use some in future projects
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter