As I handed in applications to companies and read countless job descriptions, I realized that I really want to be a Frontend UX/UI designer. During my UX/UI research, I became more aware that I can get as creative as I want when developing a site, but it won't mean anything if my site confuses my users. So I took some time to tweak my portfolio quite a bit--making sure users are able to find links and information that they're meant to find.
Here's some knowledge that I've learned along the way.
Pretty Doesn't Mean Perfect
When I first created my portfolio, I was just having so much fun with CSS and letting my mind run free. I had so many ideas that I wanted to incorporate. It was definitely going to be a fun experience.
The idea was to have different rooms containing different elements of my portfolio (home, about me, blog, code cards/projects, and contact). I thought it turned out pretty awesome. People were very nice to mention my creative ability. However, I did receive some suggestions to double check the responsiveness on mobile. No doubt, my portfolio was designed to be viewed on a desktop and in landscape.
Here's my portfolio viewed on a desktop:
And here's my original portfolio viewed on my phone:
It did not cross my mind that viewing my portfolio in a portrait mode on a mobile device made my portfolio less engaging and actually harder to figure out what I was trying to do design-wise. This is when I decided that design doesn't matter if users cannot figure it out.
Responsive sites matter
Stat Counter has a pretty awesome tracker for all different kinds of web statistics--including desktop vs. mobile vs. tablet users.
October 2020
- Desktop: 48.88%
- Mobile: 48.62%
- Tablet: 2.5%
If you take a look at the trends (until just recently), desktop usage is more popular than mobile; however, mobile is very close in user comparison. I learned so much from this statistic alone. I have to attack my sites at all angles and all viewpoints. How will it be viewed and if it's accessible and flawless across all playing fields.
Keepin' it Simple
As I mentioned, I wanted to do so much with my site. So many ideas and so many intricate details I wanted to add. There were moving clouds and CSS-built images and I even wanted an animated dog to walk about my rooms. My ambition got the best of me and trying to get my site to respond well to smaller dimensions was a nightmare.
I'm not saying don't be ambitious when it comes to creativity, but rather understand the quality of the output for your users. My quality was compromised when I couldn't get my site responsive to mobile. Simple can still be creative and beautiful. As I learn more and grow as a designer, I will add more and more details. For right now, I have to walk before I run.
SocMed is Our Friend
If I've learned anything since the first day I started my web dev journey, is that [the right] social media is your best friend. Two main platforms I spend most of my time on are DEV.to and Twitter.
When announcing my portfolio's launch on DEV.to and Twitter, I've gotten great positive feedback and also great constructive feedback as well. Without the dev community, I wouldn't know how I can improve. I've gotten suggestions from new to experienced devs. I was even able to get some advice from the perspective from individuals on the hiring side--which was extremely helpful. I didn't know how much good social media can do when used right.
Organization is Key
I try to stay organized as much as I can, which really helps me write efficient code. Before I start, I organize my thoughts and then I come up with a game plan so I know where to begin--like creating a hierarchical outline for an essay. Because a div inside of a div inside of a div can get exhaustingly confusing sometimes. Laying out where everything goes first really makes things easier to find and follow.
Naming Classes and IDs
When choosing a name for my ID and classes the first time around, I felt like I was running out of words. Then I discovered that there's actually a naming convention for code. There's this thing called BEM entity that explains the breakdown of naming classes in an organized and useful manner. I say, this is quite useful and has made things easier for me.
Always Room for Improvement
After I decided to re-design my portfolio, I found that I'm getting a lot quicker at figuring out what code goes where. I also learned tons of new coding stuff, that I was able to use to make shorter and better code. I've even thought about a fun project! I can totally make several different designs of my portfolio to learn different design and coding techniques.
Wishing for the Best
It's really been an awesome time learning different things and I can't wait until I'm at the point when I get my first job as a web dev and I can look back at all the ups and downs of my journey.
Best of luck to everyone trying to make it out there!
♥ Lynne
Top comments (12)
No offence but why you didn't keep your portfolio simple and more readable? To be more specific about my comment:
1) You could use text on your header in order to icons, to simplify your website's sections.
2) Why did you choose gradient background colors and lots of different colors?
3) Why do you have vertically aligned content (also they were placed in weird alignment)?
4) You say that "to see more, scroll" but my scroll ball doesn't work on your "scrollable" section.
5) Assuming that you are a junior developer. I saw that you have written an article about job searching. But for a junior development job, at least you should know basics of Semantic HTML Markups.
I don't judge your artistic choices but especially on a portfolio, I think you should keep it simple, readable and understandable.
I hope that I was helpful and you can find the job you are looking for.
Hi Burak. I appreciate the feedback.
I do like color and can get carried away with it sometimes. I can see your point that the color choices and the staggered content may have defeated the purpose of simplicity I was going for. But I felt that it was much simpler than my previous portfolio.
I am still learning and developing my design and coding skills. So I'm going to keep on updating and improving my portfolio.
Thanks again for your input!
what ur problem she explained everything
Article before edited was totally different. So thank you for your prejudge.
I just wanted to clarify that I do not edit my articles after it has been posted to continue to receive constructive feedback on my decisions at the time. I only responded to your comment to answer your questions and further explain my choices in design.
Happy Holidays!
That looks great. Love the colours :)
Thank you so much!
This is gr8 start - or start #2 - whatever! :)
Thanks so much!
Thank you for sharing Lynne. I didn't know about BEM entity, it's going to be useful to me.
Pretty cool. I like that horizontal scroll for blog posts. Nice for phones. Though, it'd be nice if clicking the card opens the links. Now it's just title?
Oh that’s a great idea!