This week I continued working on the mockups for the redevelopment of the SCOTS website, which I had started the week before. I have now completed four versions which I have emailed to Wendy for feedback. The first version uses the existing SCOTS colour scheme but updates the layout, using top-level tabs to jump from SCOTS to CMSW and using drop-down menus for the menu items that have secondary pages (‘Tools’ and ‘About’):
The second version keeps the same overall layout but with an updated colour scheme, plus the top-level tabs are at the right and the header and main page areas don’t stretch over the full width of the page. The footer is also without a background and the overall page background has a subtle texture:
The third version introduces a two-tone header with the title area split from the navigation area. There is a different background image and the footer has a background colour.
The fourth version is rather different and uses flat blocks of colour and no curvy edges or shadows. This very minimalist approach is currently quite popular in web design. The top-level SCOTS and CMSW tabs are now very small and the header takes up more vertical space, with the text positioned to spell out ‘SCOTS’ vertically, as with the original site logo. The navigation items are right aligned and there are no drop-down menus for ‘Tools’ and ‘About’ – instead what will happen is clicking on one of these items will bring up a submenu underneath the main menu (but this isn’t implemented yet).
A few things to note about all versions:
1. They all work in both modern and older browsers, but with older versions of IE you won’t see the curved corners or shadows found in designs 1-3.
2. Although it may not be immediately obvious, I’ve used a different font for each of the four designs. Currently version 1 uses ‘Oxygen’, 2 uses ‘Roboto’, 3 uses ‘Shanti’ and 4 uses ‘Noto Sans’.
3. All four versions are ‘responsive’, meaning they will work with all screen resolutions from desktop monitors to smartphones. You can emulate this on your PC by making the browser narrower (unless you’re using IE in compatibility mode). Version 4 replaces the navigation menu with a drop-down list once the page width gets below a certain point, and this approach could be taken with versions 1-3 too.
4. A print version of the design will also be made but I won’t work on this until we’ve finalised the screen design.
5. I’ve got rid of the ‘open book’ logo as I didn’t think it was really necessary, plus I don’t have access to the original logo file so I can’t change the colours of it very easily.
These are just initial versions and colour schemes and layout could be completely altered if needs be – I’ll just wait to get feedback from Wendy before I proceed further.
I also spent some time this week on Mapping Metaphor related issues, continuing to learn about the D3 framework and looking at the data Ellen and Flora sent me, plus the navigation structure sent by Marc.
On Thursday I had a meeting with Jennifer Smith and Gary Thoms about a project they are putting together to create a digital dialect syntax map of Scotland. It was a useful meeting and I gave them some ideas of possible technical solutions. They are going to continue to develop their plans and then I will provide further technical advice when they need me.
I was also involved in the process of writing the technical plan for Susan Rennie’s project this week. Mark was given overall responsibility for writing the plan but I helped out along the way. We managed to supply a first draft to Susan by the end of the week and it will probably need some further tweaking next week.
Also this week I had my P&DR with Jeremy, which went fine. It did take some time to prepare for, as these things always do, but the meeting itself was very positive.