30

I've just launched my Personal Website (richardsison.com)

almost 6 years ago from , Interaction Designer, Dabbler in Front-end Code and Stickler for Good Microcopy.

Good morning/afternoon/evening Designer News community!

After weeks (maybe months?) of writing, designing and coding on hour-long train commutes and sitting in my local cafe, I have finally launched my personal website!

Link: richardsison.com

Like everything on the web, it's not done but I'm very happy with this as a version 1. Since making it live last week, I've experimented with small updates like serving retina images (via srcset) and setting up HTTPS. It's not difficult but I had no idea how to do it 2 weeks ago.

I love having an environment where I can just test things and push them live into the world.

I would love to hear feedback! Or if you have any questions about the process, getting started or the tools I used, sound off in the comments!

Cheers, Rich

32 comments

  • Sue Hor, almost 6 years ago

    This is amazing! I'm no expert, but here are some thoughts + Great images and succinct case studies + Great CTAs that lead to other case studies (even from about page) - Not super sure about the 3 red icons at the bottom of each page, I thought they were clickable, but they aren't

    Did you code it yourself?

    4 points
    • Richard SisonRichard Sison, almost 6 years ago

      Thanks for the feedback Sue!

      Wow, very quick on the uptake of the icons! I literally just put them there this morning — I was testing an SVG workflow from Sketch. Yes, currently they're just embellishments. In the future (near future hopefully…) I want to experiment with animating them — though in the meantime I might at least just change their colour to something more neutral. Thanks for that!

      And yes, I did code it myself! I used the Bootstrap 4 grid to help me with the layout but other than that, it was all hand-rolled. Surprisingly, I knocked over the coding in maybe… 6-8 hours? I had a slow start trying to figure out a few Bootstrappy things, but once I found my groove it was pretty swift.

      Initially I planned to build it in Semplice. But I found it too limiting because I wanted certain things to behave in a certain way (both in a responsive-ness aspect and a code perspective).

      Thanks for reaching out and for the feedback!

      4 points
  • Mick NMick N, almost 6 years ago

    The one thing I love the most about this is just how fast it is. Switching between Work & About is instant. Love it!

    2 points
    • Richard SisonRichard Sison, almost 6 years ago

      Haha cheers! Thanks for noticing! I do care about performance! I suppose the benefit in knowing mainly HTML and CSS is that my overhead is fairly low. There aren't any dependencies I'm preloading so it's inherently pretty performant.

      I do have on my backlog to cull more of the Bootstrap 4 code (I planned to just use the Bootstrap grid, but I'm actually sucking in a few other partials…), research gzipping and other performance best practices. Hell… I'm not even minifying the CSS! All I've done is mainly keep my code tidy and optimise my images via ImageOptim.

      But because it's a fairly simple site, I probably wouldn't even get huge performance gains anyway.

      In any case, thanks for the kudos! I appreciate you noticing!

      1 point
      • Joshua TurnerJoshua Turner, almost 6 years ago

        If you're not already think about utilizing Cloudflare. They provide some really great caching out of the box.

        You will need to fingerprint your asset files, and that might require you to expand your current build process.

        But another big thing you could do is pull in uncss into your build process. It will scan your HTML files and remove any unused css rules from your stylesheet prior to minification.

        It isn't webpack, which is probably what you should be using for new projects, but I have a prebuilt gulpfile for doing just that - as well as fingerprinting. If you're interested let me know and I'll throw it in a gist for you!

        1 point
        • Richard SisonRichard Sison, almost 6 years ago

          Hey Josh!

          Thanks for reaching out and those tips! I've saved them in my backlog for performance.

          But I'll be honest, this level of development goes way over my head!

          My build process is literally what Codekit gives me and I didn't even use the "Build Project" functionality until this morning when I read your comment! It was just something I'd kept putting off…

          But even that is going to make things much easier to manage my site as it abstracts only the files I need to upload; not the SCSS too (up until now I've just been cherry-picking the HTML and CSS files individually …like a noob.

          0 points
  • Cory MalnarickCory Malnarick, almost 6 years ago

    Such a good site! Congrats!

    I love your case studies – simple and to the point. I also love that you include full length screenshots of the final work at the end of the page.

    Some feedback:

    alignment

    the alignment between your nav menu brand mark (your name), the hero header paragraph, and the body content seems weird to me. it shows most on your about page. I'm nitpicking, but it's just something that caught my eye as weird. Why isn't the nav logo name left aligned with the body copy, at least?

    case study depth

    I think you can explain further the depth to which your work went on each project. For instance, on the wine e-comm site you mention branding. why did you take it in the direction it went? why did wine names need legibility? did you speak to wine drinkers about what they search for when they browse for wine? browse for wine online vs. in a store?

    tl;dr

    badass site, clean as hell, loads really well. Great IA, good branding, good use of white space, love the footer.

    2 points
    • Richard SisonRichard Sison, almost 6 years ago

      Hey Cory! Sorry for the delayed reply, I thought I already had…!

      First off, thanks for your feedback! Really appreciate it! In response to your points.

      Alignment. The hero headers felt off to me when they were locked left… I thought because they were so large they felt off balance. ¯_(ツ)_/¯ Maybe I’ll change my mind again haha And whoops! Totally right about the logo and nav not lining up with the body wrapper… Thanks for spotting that — completely missed it!

      Case Study depth Oh man. There’s a lot more to talk about for the projects… My challenge was, if I’d gone all out, I’d risk not finishing it at all! So I was a bit brutal with the edit process and decided to make short, but complete versions of them. I’ve got another I need to write up so I felt it was more important to wrap things up, and push forward. I do plan to circle back and build these up a bit more … just priorities and all that!

      But thank you very much for your feedback!

      0 points
      • Cory MalnarickCory Malnarick, almost 6 years ago

        Solid. The case studies work fine as they are, but I'd consider adding more reasons why, even briefly if possible.

        Have you tried formatting the hero header text centered opposed to left aligned?

        1 point
  • Richel TongRichel Tong, almost 6 years ago

    Hi Rich!

    I personally think the site is clean and to-the-point. Couple things that do, however, bother me:

    1. The container around the content is mighty small!
    2. Because of the shadows of the cards on your homepage, I wanted to click on the images to access your case studies.

    Cheers!

    2 points
    • Richard SisonRichard Sison, almost 6 years ago

      Hey thanks Richel!

      1. Guh I feel you. I'm guessing you're on a large screen? Because I'm coding from a 13" laptop, that's the maximum width I can code for (and still see what's happening). ... Really need to get an external monitor for home... Work in progress on this point. Message received though.

      2. I've had a few people mention this. I'm going to remove the shadow until I can fix the markup...! Thanks for that

      Really appreciate you reaching out! Thanks for the feedback!

      0 points
      • Richel TongRichel Tong, almost 6 years ago

        Not a problem! Yeah I was on a 27". Just pulled it onto a 15", and there still could be better use of the real estate on the sides!

        1 point
  • Jay Morris, almost 6 years ago

    I dig it. I love that its nice and clean. Great job Rich!

    1 point
  • Dean HaydenDean Hayden, almost 6 years ago

    First off, good job and secondly I’m viewing this on mobile so any criticism relates to that experience and not desktop.

    The flashes of red on a predominantly black and white design works really well. Typography is also good though I would avoid any centre justification as it’s very difficult to read.

    Presentation of work is difficult and whilst I like the idea of bringing in objects that relate to each project, they often sit awkwardly with the devices showing your work.

    I would suggest using more flat and abstract representations of devices to showcase your work, that way you could incorporate objects/photographs in a more harmonious way. Your work is the focus and these additional elements should only add texture and not distract.

    1 point
    • Richard SisonRichard Sison, almost 6 years ago

      Hey Dean! Thanks for the feedback.

      I agree that the mobile viewport is the weakest at the moment. Having the text left-aligned on mobile but centered as space becomes available shouldn't be too much of a challenge — thanks for that. I think I might have to agree with you there!

      But my main gripe is also the images — I want to implement a proper responsive solution using the element so I can just replace the images with more mobile-appropriate versions. The screens (especially the UI overview) squash down too much and are hard to see. I've implemented retina images, but that only affects the resolution — I'd want to have a different orientation altogether (which probably won't include the "objects/decoration" and just focus on simpler, cleaner versions of the screens. This will take a little more effort and time to prepare, but it's on my to-do list!

      Thanks for the feedback mate.

      0 points
  • Orcun IlbeyliOrcun Ilbeyli, almost 6 years ago

    Very nice Richard! Good to see copy-crazy guys over here :) Good inspiration for my own site though :P

    Goood job!

    1 point
  • Bobby AndersonBobby Anderson, almost 6 years ago

    Hi Rich, the site looks great, very clean and clear and the work is presented very well.

    The one thing that bugs me about this is the hover state over your case studies on the homepage, the shadow lifts the case out but the full area isn't clickable. The change of state on hover on the case study leads me to believe there is an interaction to follow here but it left exclusively for the read button. Could the shadow effect be taken off the container and applied to the buttons instead?

    Great work though, looking forward to seeing more case studies in the future.

    1 point
    • Richard SisonRichard Sison, almost 6 years ago

      Haha yes!! It also bugs me — I'm sort of in the process of wrapping the whole thing in an anchor tag so the whole tile is clickable. But my code is tripping over itself (or some Bootstrap code is conflicting…) and it breaks.

      Message received; the feedback definitely leads to some sort of interaction.

      I think I'll knock this over next. It is annoying… Thanks for the awesome feedback!

      0 points
  • Daniel PapeDaniel Pape, almost 6 years ago

    I'm a big fan of this design, I think you have a good skill for brevity in both design and copy which is something I could learn from.

    Can you talk more about your process for deciding what is displayed on the page and how it is presented?

    1 point
    • Richard SisonRichard Sison, almost 6 years ago

      Hey thanks for the feedback Daniel!

      So in my case, there were a few key things I wanted to talk about for each project. It could be the fact that I helped drive content strategy in a project or the fact that I contributed to the front-end code.

      For each case study, I'd put together a bullet point list of the parts of the project I want to focus on, separate it with headers and I'd include ideas for imagery to support each point. From there I'd just build everything up. The bullet points I'd structure sentences and paragraphs around, and as for the images, I'd take screenshots and compose them in interesting ways. I'd make sure that the points were clear, but where an image was used more as a visual breaker, I'd bring in extra elements (such as toys or wine bottles).

      Does that help? If you have more questions, ask away!

      2 points
      • Daniel PapeDaniel Pape, almost 6 years ago

        That's a really good approach and it shows in the final product. Back to the drawing board for me :-)

        0 points
        • Richard SisonRichard Sison, almost 6 years ago

          Hey thanks mate! Really appreciate that!

          When you've got a bit of a start, feel free to reach out. Maybe just DM me on Twitter? Happy to provide feedback.

          One word of advice, set yourself some time constraints, realistic goals and try not to aim for perfect - you'll never start. I wasted months until I just put some structure in place. It's always weird doing things for yourself. You can have so much structure and process on client work and the moment you're the client, it all goes out the window. Treat yourself like a client.

          Good luck!

          1 point
      • Cory MalnarickCory Malnarick, almost 6 years ago

        Share some sketches, if possible :P

        0 points
  • Ovidiu Berdila, almost 6 years ago

    I love the copy and the concise case studies. I am in the process of updating my personal page as well and I can judge yours through my experience. I would have loved to find out where you're from, how you look, other projects you have worked on in a 10 years career.

    I know a lot of advice goes toward having very few and short pieces and this probably works in locations where the recruiters are overwhelmed with applications, I personally like to get to know the person a bit more before committing to an interview. I would strive for a stronger emotional connection with the audience.

    1 point
    • Richard SisonRichard Sison, almost 6 years ago

      Thanks for that Ovidiu!

      The main reason I've stuck with three projects for now is time.

      I do plan to have more case studies, though it's a little tricky with some. Aside from the ecommerce projects I've done, I've also done a bit of B2B product work. Though as the contents and purpose are a little more sensitive, it's not appropriate for my personal portfolio. …And then there's the risk of showing more ecommerce work and coming across as if that's all I do…

      As far as my background's concerned, I thought it was pretty well covered but maybe I'll add a little more in the about section. Save people a trip to my LinkedIn resume!

      I will keep building this up though! Thank you so much for reaching out! All of the feedback so far has given me even more motivation to keep tinkering!!

      0 points
  • James LaneJames Lane, almost 6 years ago

    Very clean, simple... Great work!

    Was just playing around, try this - I thought it looked pretty cool:

    *::selection { background: #ff1414; color: #ffffff; }

    Obviously it would need to 'moz' prefix as well if you use something like it.

    0 points