23 Mar

Portfolio Project: Selling Yourself

As part of creating my interactive CV, I’ve been looking at what other designers and web developers are doing to promote their skills. The best ones I’ve seen include an element of fun and interactivity with them, that make them interesting.

Here are a few of my favourites:

 

Screen Shot 2015-03-23 at 13.29.25

 

 

Screen Shot 2015-03-23 at 13.32.37

 

Screen Shot 2015-03-23 at 13.33.33

It’s interesting to see what people are doing to attract attention. Interactivity is a great idea, novelty is okay as long as it is done well, and obviously depends on the work you’re trying to get.

I’m going to aim for a more professional tone with my interactive CV, but on-trend and playful too – the same way I’ve had a bit of fun with my rollover image in the sidebar. I always mention Adham Dannaway’s portfolio website, (and obviously other people love it too when you see how many replicas there are) but I like the playful/professional combination. It just works.

Please follow and like:
23 Mar

Web Dev: Skeleton Boilerplate

I decided to experiment with Skeleton, a responsive CSS boilerplate.

It is extremely simple to use, and comes with a 12-column grid making it a perfect fluid layout template.

Skeleton's 12-column grid layout.

Skeleton’s 12-column grid layout.

I was able to quickly put together a starting layout, based on some sketches I mapped out previously. My initial sketches are below (taking the grid layout into consideration) followed by the initial desktop layout and a mobile version created starting with Skeleton.

layoutSketch

ScreenShotDesktop

ScreenShotMobile

I developed a system of blocks, that include a ‘border’ section of colour, and a white section to hold the text. As you can see, it is an extremely quick way to get together a responsive design. I’m going to work on gathering and creating the content with the client before I progress much more with the coding, but I’m happy that this is going to be a viable tool to build on and develop further.

Please follow and like:
20 Mar

Portfolio Project: Interactive CV

I previously created an infographic CV last year, but now I’m moving it a step forward by making an interactive one. I’m using InDesign for this, as it has a lot of interactivity built-in. Buttons, links, rollovers and navigation are all quite simple to do, and there is a lot of help online to start even if you have never used InDesign before. I found this tutorial helpful when trying to create buttons.

There are, however, some known bugs that create issues with buttons. Make sure that you have the latest Adobe Reader installed or it will drive you mad.

Ashley Nye interactive CV design

I’m keeping to the same colour palette as my other websites and portfolio material. It will include a ‘featured’ section, some more information about my work and skills, and ways to contact me.

This is designed with a landscape orientation because it will primarily be viewed on a PC or laptop. Equally, it will still work as a printout.

Download my interactive CV below.

Ashley Nye Interactive CV

Please follow and like:
19 Mar

Portfolio Project: Flat Design

I quickly put together the following mood board to reflect the feel of my chosen ‘fish & chips’ restaurant (part of the group showcase portfolio project).

fishandchipsmoodboard

I then created the following designs in Adobe Illustrator, using the wireframes as a basis for the layout. They are all very flat, vector images. All three ‘restaurants’ will be designed in the same style, each with their unique colour palettes and atmospheres.

D&DHomepage Design-01

D&DFish and Chips Design-01

D&DMenu Design-01

 

Please follow and like:
18 Mar

Portfolio Project: Group Showcase

As part of the portfolio project, we’re creating a group showcase on the wonderful Edge Animate.

The application will include a restaurant theme, showing each of our three ‘dining experiences’. I created the following logo to encompass the group theme – a mix of food and coding/design.

Screen Shot 2015-02-13 at 17.45.21

The initial wireframes can be seen below.

mockupA4

Please follow and like:
13 Mar

Web Dev: Information Architecture

The first thing I did was write down all the different elements of the proposed website.

I then sorted them into logical categories, to get a rough idea of content and navigation. The result is below.

cardSort

I then created the following mind map on Mind42.com (a free online mapping tool) to sort these into something I could work with.

HomeThere isn’t a huge amount of content to sort, but allowing the user to get to the information they need quickly and easily increases satisfaction, and could ultimately be the difference between someone booking or choosing somewhere else.

Please follow and like:
11 Mar

Portfolio Project: WordPress Research

As part of my Portfolio Project, I wanted to research the best way to integrate a separate portfolio section on this WordPress blog. It has to showcase my best design work, and allow me to write ‘case study’ information about each element.

I initially came across a portfolio plugin, but it has very mixed reviews and still seems in early stages of development.

I then searched WordPress plugins for portfolio-style galleries, and came across the Codenovo Portfolio plugin. I found it very simple to use, and integrate with my existing site. I edited the CSS to match my colour scheme, aiding continuity between the blog and portfolio sections.

Screen Shot 2015-03-09 at 20.15.35

I then added a few of my works to this, to see how it would look. So far, I’m very pleased with this, and will continue to add design work over the coming weeks.

Please follow and like:
09 Mar

Portfolio Project: Social Media

Optimising the design of social media pages is made easier by this infographic below, compiled by the team at SetUpABlogToday.com. It shows all dimensions, file types and sizes, as well as recommendations – perfect for giving your online presence an overhaul in 2015!

2015 Social Media Image Size Guide

Please follow and like:
05 Mar

Web Dev: Style Tiles

I created the following style tile to give my client a clearer impression of the site than the mood board. (I downloaded the template from styletil.es).

Style_Tile_Ashley

I looked at quite a few different websites and blogs to get a feel for what I wanted. The following is a list of where I took my inspiration:

I also decided on a very minimalist style, with a 3-colour accent palette. I also begun to experiment with drawings and illustrations in this style using Adobe Illustrator. Figures like these can be possibly be used on the site to add interest:

Ballet_Dancer_by_Ashley_Nye

The following shows some of my logo experiments alongside the dance school’s existing logo. My client was happy for me to redesign and rebrand, which gave me a lot of freedom to create something fresh and exciting.

logoDevelopment

Please follow and like:
04 Mar

Web Dev: CMS vs Hand Coding

Choosing how to create a website demands a fair amount of research and reasoned decision-making. This will ensure that I don’t waste time, energy and money further down the line.

Initially, there are two different ‘paths’ that spring to mind; some sort of Content Management System (CMS) such as WordPress or to hand code the website. There are lots of interesting ideas about how to go about choosing the technology/language/framework on various blogs, but ultimately it varies from project to project.

The best way to decide is to research into some of the advantages and disadvantages of each method, and see how this particular project fits into this. This post on 7Host’s blog highlights some of them, which I based the following table on. It shows the reasons why I have decided hand coding will be better for this project.

CMS Hand coding
Benefits Easy programming, easy user management, templates, great for blogs and larger-scale projects. Complete control, greater understanding, quick, clean and efficient.
Disadvantages Customisation/modifying can be tedious, loading times/bigger websites. More work initially, knowledge required, debugging time.
Project specific notes Only necessary if client wanted to blog. Project is small-scale, not enough to warrant database backing. Made-to-fit code, efficient and a better method for a mainly static site.

Even after deciding on hand coding instead of CMS, there are a few different options I could chose to progress. Either begin coding from scratch, using a simple text editor, or start from a CSS framework such as Bootstrap, Foundation or Skeleton. I created my portfolio site from scratch, so I know roughly what I am  currently capable of coding (obviously, there is always more to learn!).

In comparison, this article on Mashable shows a list of some popular frameworks that I can begin to research, but aside from looking at some examples and reading about them, the best way I can determine what will be most suitable is to try them. Experimenting in this way will only improve my skill set and allow me to build up my own personal web designer’s toolkit.

toolkitThumb

Please follow and like: