Site Design: product design portfolio (emmalawler.com)
over 7 years ago from Emma Lawler, Product Designer and co-founder at Moonlight Work
over 7 years ago from Emma Lawler, Product Designer and co-founder at Moonlight Work
Holy Jesus Christ I just downloaded 25MB for that.
I noticed I took a while for me too.. How do you find out a website's size? I'm on chrome.
It's in the Network tab in Developer Tools.
If you're on OS X, press [option + command + i] then click Network.
Yup. Lots of big images being loaded.
Emma, for better performance, you can scale down some of the images, compress them (using something like TinyPNG), and maybe lazy load them so they're not all downloaded at once.
Great looking website, but
Lovely looking site when it loads, but I left before that point the first time and only let it finish after reading the comments. Some form of loading indicator would be a great addition to stop people doing something similar.
Nice work, Emma! I like the overall style of the site. I would, however, recommend adding in some hoover states on the 3 project tiles / images you have listed, as well as hover states on the Twitter, LinkedIn, and email icons. Right now, it almost feels / appears as if you can't click on anything when fist coming to the site. I really like the active / current states that you are using for the 3 project tiles / images... maybe do something similar (with a simple animation-in) on hover?
Just a thought. It might be good to give some simple feedback to the user so they know the site is performing properly and so they know what they can and cannot click on.
The splash page seems a bit jarring of an experience to have / sit through. The work is great.
However, I feel there are just some minor tweaks I would suggest.
The hero mockup in the Fitstar product seems awkward because the devices aren't scaled to one another (apple watch looks huge). Also in the Kubmo project — the typography seems to be a little too big. Size down a little and it would look refined and like a premium product.
Hierarchy wise the social icons compete with the logo and message of Kubmo.
"Growing a Global Community of Women in Technology" could be smaller than the logo and I feel it doesn't need a bounding box around it — maybe text on top of the image. It probably wouldn't need a drop shadow either on the text.
Overall good stuff. If you're doing product design focused, I highly recommend talking about your process of how you got toe the finished product.
Compressing those images could go a long way. Try saving for web in PS and then running them through something like ImageOptim (https://imageoptim.com/) - that might help out some of your speed issues.
Great looking site, Emma. Nice work :)
Really liking the colour choice and big imagery. However there are some loading issues. Sorry to go over what others might have said but maybe the content should be split into separate pages? Then the initial load time wouldn't be so heavy, thus negating the need for a loading screen as well.
The style is certainly there, it just needs some shuffling around :)
Nice site! You could use 100vh to make sure the picture background takes up the full viewport height.
Also on my 1280x800 screen the mail icon is cut off because of this media query:
@media (min-width: 1200px) .container { width: 1304px; }
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now