Now however, I have picked up a bit more as I was designing my website. Here are a few screen shots of my website and different viewports;
Above here Is my website so far on a desktop computer. I like how I have a big title attracting attention directly to this as you open the page. I made the 'W' must larger than the rest of the text but still a lowercase letter. I think this gives it a dynamic look and feel about it.
Here we have the first section on coral reefs and some graphics which were inspired from various artists. These are not correctly placed yet as they are all pushed over to the left hand side and over weigh the page in contrast to nothing on the right side. I have yet to do this properly yet. I have kept a 2 column layout even at desktop view. This is because I feel 3 is just too much. I have seen a lot of websites with 3 and that may be the most popular when displaying text. I have also seen some with 2 and for me, this is a better option. I have taken my same effect from my main large title and used a lowercase letter larger than the rest at the start of every sub-title. This looks uniform to the rest. I have a white line separating the columns to go with my colour scheme. These match the titles too.
Above here we can see a problem which I have yet to overcome. I have a jellyfish graphic on the right-hand side, however it is blocking up the colunms pushing the text to a different place. This is a minor problem at the moment and will be easy to overcome but I do struggle with this and have tried different properties to move it.
Here we have my website at smartphone view. I have coral reef fish but it is over laying the sub-title. This is okay for now as I also believe this is simple to overcome. In my wireframes I wanted my graphics to disappear as they are no longer important at such a small viewing port. I have discovered this as you can see from my previous re-search on responsive web design. Most graphics get pulled out at a smaller size as priority is navigation and content.
On my last screenshot I have what the top of my page looks like at iPad view. I am pleased with this as my navigation splits down to the 4 buttons just after my columns split to just one.
So far I am pleased with how its turning out, but I think its clear I still have a lot to do in terms of adding more content and creating this to enhance the user experience.





No comments:
Post a Comment