I decided to keep looking at more websites that are responsive, just to see how they display on different platforms and how some sites tare visually inspiring in the layout and overall design. One of the websites i looked into was one called 'web flow IX design' shown below.
As you can see above there is what the top of the main homepage looks like on both platforms (desktop and mobile). The website uses its name at the top left with navigation on the top right and uses some headers as well to catch the users eye. On the mobile version its slightly squashed and you can see a few elements are missing from the desktop version like the navigation for example.
As for a visual impression, its got a good colour scheme but just based off the top of the page it is average when it comes to design.
When you scroll down, more content appears which is shown above in these two screenshots. Even when you click on the navigation it scrolls down automatically for you, suggesting the site is one big page, which might be good for some cases and bad for others. Anyway the content above uses cute little image icons to represent small subjects within the website with small bits of text. On the right on the mobile version they use one image per column however the text is laid out in a way which has the text all on one line, however if it was centred and had three lines but being less wider it would've made the text easier to read and look a lot more visually stunning.
When the user scrolls down there is more content and has a different display in background. The background is black and helps to separate all these pages in one as just one homepage into feeling more like individual pages. The content is well laid out and for the mobile device has one piece of content per column to make it easier for the user.
Above when the user scrolls down even more there are more extra topics which are displayed with a bit of text. The way which makes this more engaging is the different colours on the icons separating each topic and the icons in general. This helps to add a nice visual touch and help to add to the text and making the site feeling minimal but simplistic with small stylistic additions (icons). The content is displayed in two columns which have multiple rows and in the mobile version with one column and again multiple rows to make the content display as best as possible on a mobile device.
When the user scrolls down closer to end of the page they will run into a section which displays ' how to' videos and is done without any video images which could make the website look to of placed and messy, this style helps to stick within the design and again make it look simplistic and using colours for borders which adds a nice touch to it. This content on the desktop version is displayed two columns per row and with the mobile version uses one per column. This way of introducing videos is a good way to make it fit within the design and makes the site look more professional so something i might consider is not just dumping videos on my site but to design a button which is linked to the video, so that my site doesn't look unprofessional or messy.
Link to site: http://interactions.webflow.com/
I found another responsive website which was quite interesting to me for many reasons which i'll explain soon, but this website is called 'build by buffalo'. Below are a series of screen shots from the website i took and what it looks like, not only on a desktop but also on a mobile device as well.
To the right there is a mobile version of the site and you can see the navigation is now underneath the logo, but apart from that is pretty much the same, expect the content underneath which i'll talk about in the next example.
Below on the home page displays the content on from the screenshots above. A range of clickable links through images / hexagons are displayed and its a very different way to display images especially in this shape, but it works really well and the placement looks a lot like a jigsaw puzzle with it all linked together and it looks visually impressive.
On the right is what the content from the desktop looks like on a mobile device. As you can see the images have lost their shape and now display rectangles because of the screen size difference. This is something i didn't expect to see when i was viewing it in the size, but i can see why it was done. Its because it helps to make the image more clear and look better laid out in the format instead of many hexagons underneath each other.
Underneath the images there is more content which displays some motion statistics, there isn't much to say here, except the style of it is very minimal because of the background and the colours all make it feel neutral and the use of bold text in the percentages help to put a lot of meaningful focus on those particular percentages. On the right in the mobile version they've spread out these statistics in two columns and one in the centre underneath the rest, which is well laid out.
Above is where the bottom of the page ends on the homepage and it displays a quote making sure that all their clients are happy and satisfied which is a good piece of text to add to reinsure the user. At the bottom of the page they use icons to represent their contact information, the colours are bright and stand out to catch the users and the style of the icons are laid out nicely too. On the right the icons are spread out one per column to give space and not have it too messy or hard to read for the user.
Link to the site: http://builtbybuffalo.com
No comments:
Post a Comment