After months of frustration because my UI development skills were going nowhere, fellow campers were developing beautiful portfolios and web pages and I was struggling with even basic webpages, I finally decided to get better at UI development by actually building some awesome UI. No more wasting time on UI theory, no more reading UI books (by the way I have hoarded a bunch of them) cover to cover.
I would get my hands dirty. Jump in the proverbial lake and learn to swim. But the problem was I suck at UI design. How would I develop good UI, if I could not design it? I should imagine a good UI before I started to code, right? So I was stuck again until…, until I had a **EUREKA** moment.
To code awesome UIs I don’t have to design them. I can just use what is already there.
Examples of good UIs are plentiful -
etc
So I have embarked on a new mission.
One by one I will code the UI of all the above websites. And once I have finished that I’ll be able to rest easy.
So I started on my fb project. I have finished a portion of the fb login page.
FaceBook Page
I’ll appreciate if fellow campers offer critique/advice/suggestion/tips to my work.
Your Facebook mockup is pretty and clean, and chrome wanted to autocomplete my emai for loginl…
That said, I would suggest that you personalize it and make it your own instead of Facebook. It could be a long term goal to eventually create your own social media room, complete with chat and sharing ability - for your friends and family.
Your work in codepens are pretty. I think you just need to focus on the user experience as well as the interface.
Decide what you like, and use that as the basis of your creation themes. I prefer beaches, so many of my projects include a beach scene, pineapples, water, etc. I’m working with coconuts right now…
Then decide on what you would like to see in your project if you were the actual user. Is it easy to navigate? Are the buttons easy to use? Is it easy to read the text? Do the colors not hurt the eyes?
That type of experience makes a big difference in the overall user appreciation.
Keep it simple, make it work, and you’ll soon be experienced with UI at the level you want to be at.
2 Likes
You could try out the Daily UI Design Challenge if you’re up to it! I signed up for it but haven’t started yet since I wanted to focus on JavaScript first, but they send you a daily email on weekdays and you have make whatever it is. Most people do it on Photoshop/Illustrator but there are some on CodePen as well who do it all with code.
1 Like
Thank you, that is a great tip! I’m going to try it. 
This looks cool, thanks for sharing.
I should probably concentrate on JS too as i will end up getting side tracked on daily challenge.