Wire Frames and High Resolution Mockups

In week 2 we were given the task of having high resolution mockups of a home and about. screen as well as one case study ready to review in week 3’s lecture. Before I could get to do that I had to do some wireframing…


After doing some initial sketching you can find in a previous post, I went into drawing up bigger wireframe sketches. These give a clearer picture of what i want my portfolio to look like.

My idea was here was to have a separate work page  with a section for case studies and another for illustrations like I had seen in sites like Poposhki’s and thought was really cool. Then on home there would just be my latest projects. I also wanted incorporate lots of my cut wee characters into my about me page. I’m going to upload a post dedicated to my case studies so I’m not going to go into detail on those here.

Considering Visual Grammar

In week 2 I learned all about why implementing a visual grammar is great. Mine is pretty much based on my brand guidelines I had already developed for a previous module but I also designed a special set of icons for my site to fit my branding.


High Resolution  Mockups

Once I had a good enough idea of what I was doing I headed to illustrator to start working on my mock ups.


I forgot to take screenshots as I was working on them so I just discuss briefly some of “challenges” if you could call them that. I had initially planned on doing more than just the three screens and do a work page screen as well for added context but my building block details tool a long time put together and position just right which was quite frustrating and time consuming but honestly I feel like it payed of. They are a pretty integral part to my design after all and I need to make sure that there was enough on each page for consistency but not to much so as to not be overly distracting. I was also so still in the process of writing and planning my case studies so in the ended I just didn’t have time for more screens. I suppose my time management could be better too, that’s something I’m working on doing better with. I also added and extra pink to orange gradient to add more colour and break things up a little. Thinking retrospectively though… it’s unnecessary and a tad excessive. I don’t hate it by any means I just think maybe it would be better off without.


The main piece of the feedback I received was not over complicate things for myself and a work section the home page is ok I don’t need a separate page. I was very keen on the idea I had come up with but thinking realistically I have a link to my insta which can be where my illustration work goes.

Making Changes

After realising That I made things unnecessarily complicated for myself, I sketched out some changes to my design. overall making it simpler and one thing i’ve learned from this course so far is that simplicity isn’t a bad thing.

Leave a Reply

Your email address will not be published. Required fields are marked *