Personal Portfolio Development

For my personal portfolio I am using work I did on the graphic design course but plan on refining the design, modernizing it and then breaking it down and setting it up in html. I am still trying to figure out the best way to do it. Having designed my Saltdean Lido site in Dreamweaver and my Sussex Hop Hub in WordPress, with experiments also done in Serif WebPlus, I am considering done this latest site in RapidWeaver so that I have experience of all the premium software programs.

I have three design ideas that I have designed a homepage and gallery page for. I would like to try one more idea if I get time.

This first idea is built around a shot of the coastal path and the chalk cliffs of Brighton. This establishes my location then I lay onto this abstract portions of some of my work in geometric shapes. The menu bar and footer are very clear and navigation is straightforward.

 

The next idea also starts with the chalk cliffs but utilizes a different colour scheme and approach. The logo I tried here is an old copyright-free image from an old book. This could be incorporated as an animated gif. I like the simplicity but, having stepped away from this for awhile, I don’t think it is particularly memorable. A fair bit of work would be needed, informed by the very latest web design trends, to make this really pop.

 

 

Finally I experimented with a shot of the Brighton Pier, giving it a lot of Gaussian blur and then keeping the colour scheme very minimal. With some of the angles this still looks a bit fussy, but, bringing it into html and incorporating big blocks of colour, some parallax scrolling and more clear space, this design could have the most impact.

 

Up to now I have used the starlings as my key image, using this on the blog, my Twitter page and my Facebook site. I like the image and still feel it could be carried forward to my professional branding but perhaps it doesn’t quite have the clean aesthetic that is popular at the moment. The style is more grungy and could also be too overbearing on other features on the site.

Next tep is to start breaking some of these Photoshop files down and pulling things into html.

Employment Opportunities

Brighton has enjoyed its alternative name of Silicon Beach for more than a decade. The growth in web focused companies has been extraordinary and the pool of creatives drawn to life by the sea has expanded accordingly. There is a wealth of talent in Brighton meaning that employers can pick and choose who they work with and don’t need to pay large salaries.  If you have specific experience and find an employer who values this, you can have a very fruitful career in Brighton. You need to be on top of your game however and be prepared to continue to keep up to date with software, SEO and general web standards. The growth in the app market has led to more opportunity and is an area it would be highly beneficial to get involved in.

Wired Sussex is the first port of call for any creative working in web or graphic design and looking for new opportunities. Madgex, iCrossing, Fresh Egg, Clearleft, Crunch and Kineo are among some of the biggest employers of web and graphic design talent in East Sussex. These companies have grown steadily and offer good working environments with the potential to grow within the job as you work on different accounts. In the appalling finacial climate anyone considering working freelance or joining a company needs to evaluate where job security resides most. While these companies have been successful there are many that have fallen by the wayside. Victoria Real is a classic example of a company that started out small in the mid-1990s then grew very suddenly as they won the Big Brother account, working on the website for the television programme in its early years. Victoria Real moved into International House in a prime spot by Brighton Station and  employed more than 100 staff. The success didn’t last long, however, as its staff left to start up their own companies, and Victoria Real weren’t robust enough to function long-term.

Brighton offers a great alternative to London but any job advertised is greeted with hundreds of applications. You need to have a great portfolio and preferably agency experience to get in the door. If you can demonstrate knowledge of the full Adobe Creative Suite, SEO optimisation, ideally competence with PHP and MySQL and can show a good sense of UX then you have the skills necessary to compete. A low starting salary of £18-20k is the average, rising to £30k with experience. Add an additional £5k in London.

A freelancer can expect to charge an average of £35/hour in Brighton. Using social media, such as LinkedIn, Facebook and Twitter, can open up opportunities. A social media presence is essential in this environment as you seek to stamp your presence in the marketplace.

Despite web software changing all the time, with software such as Rapid Weaver and Serif WebPlus offering an easier solution to Dreamweaver and full on coding, the web designer, if equipped with the right practical and graphic skills, has a marketable talent. A worrying trend has been developing in the past few years of design skills being devalued. However, employers should be able to leave the web and graphic designers to be the ones to develop and master this area and should be able to pay wages that recognise their importance.

As mobile and responsive websites became more and more essential and web technology continues to evolve, web designers are always going to be required. You need to be able to market your own special skills and keep your value in the marketplace. Web designers are the ones at the vanguard. If you can combine the practical coding with top quality graphics skills then there should always be a role for you.

Finding inspiration online

In order to start finding ideas about how to present my portfolio site and find inspiration for the group project I have been browsing through agency websites and design blogs. I am looking for novel ways to present my work in a stylish, modern way. I want to incorporate some interesting effects and also use full screen imagery, which is in mode at the moment.

This site lists many sites which have eye-catching visuals: AWWWARDS

I like the simplicity and interesting twists to the shapes here: http://rallyinteractive.com/

http://www.8bisbranding.com/ uses big image blocks – also a style that is popular at the moment.

I like Unfold‘s single page approach too. Classy, angled shapes with clean and minimal colour usage. The design bears a lot of influence from the Swiss school.

Oak has used big image blocks too and has exaggerated the size even more than usually seen. It works though. The site is easy to follow and the approach is confident, risky but successful.

Here’s another minimal, image-based site for an Australian designer, Longton Design.

This freelance designer in Arizona has made a stunning website using the scrolling effect to animate the cat that forms the key branding to the site.

Interactive product designer Andrew McCarthy offers some serious scrolling fun. First faced with a cat silhouette, the scrolling soon enables the cat to run through a series of stunning colours.

As you scroll, you’re able to see details of Andrew’s past experience, skills and contact details, making it a truly fun-packed portfolio that will surely catch the eye of any potential employer.

Scrolling has become one of the key trends in web design of the past few months. Not just scrolling up and down but left and right. Creative Bloq last week pulled together some of the recent thinking behind this technique.

 

Saltdean Lido Grand Reopening Weekend Design

I have built my design for the Grand Reopening Weekend of the Saltdean Lido around artwork by Fred Pipes, a Brighton-based artist who specializes in digital prints of Art Deco buildings. I have contacted him through his blog asking for permission to use his work and I intend to add a credit on the website in the footer area.

To enhance the celebratory aspect of the website I have incorporated Art Deco style spotlights behind the building. I created these in Photoshop using the path tool, quick masks and the gradient tool. Adding noise enhances the Art Deco feel matching the printing techniques of the 1930s. I also added the bunting to the front of the building and added a colour overlay to bring in a bit more cyan so the image sits more comfortably within the blue of the website as a whole.

I have used two free Art Deco fonts in the main heading – Raconteur and Park Lane. While the colour and type works for ‘Saltdean Lido’ I may try changing the colour, drop shadow or a different font for the text ‘Grand Reopening Weekend’ and, most importantly, the dates which should be very easy to read. Gill Sans is the typeface used for the Saltdean Lido name in the main image. This is a sans serif font which matched the old Lido sign but which was replaced with a blocky serif font later on. To match the sans serif appearance I have used Futura for the navbar text.

As I finish off the design and start to break down the artwork for the web I am becoming more mindful to certain fonts which I may or may not be able to use and what kind of effects, such as drop shadow, I can use which I may or may not be able to match in CSS or use CSS3 to do so.

I have all the pages of the site designed below except for the contact page which I will complete in html once the rest of the site is programmed.

HOME PAGE

The key aspect of the homepage is the hero image and the name and date of the event. I have placed the main navbar at the bottom to make entering the site as easy as possible. I may incorporate the BUY TICKETS button into the navbar as I may not be able to maintain its position at the bottom of the page through each page of the site. I would also like to bring in Twitter and Facebook so may add a FOLLOW US tab too.

I am contemplating adding more selling points to this page but I think the design should be enough to draw those with an interest in the event into the site.

ABOUT PAGE

The rest of the site features the same header and I am proposing here to have a rubberring appearing as you move along the navbar. If I can’t make this work in html I may simply have the text change to pink when you hover over it.

The main box contains a simple recent history of the site. On the right is a gallery of images. You will be able to click on each one and enlarge it. Each picture will have an additional line or two of text on the history of the Lido.

WHAT’S ON PAGE

Here the idea is that, upon clicking the ‘What’s On’ tab, you will see the three dates of the weekend. These will be clickable. Once clicked you will go down the page to see the events on that day. The following page is an example of what the Saturday page would look like. Unfortunately, it doesn’t quite fit on the screen so you would have to scroll down a little to see all the events. I have also encountered a problem in that the box containing the spotlights that would be the container of the site needs to be adjusted to accommodate the text box. This may require an adjustment to the overall design.

TRAVEL DETAILS

This page features a snapshot from Google maps. The map will link through to Google Maps

Some quality sites

In my initial research I want to combine my analysis of bad websites with a look at what makes good websites. The 30-minute-redesign posts are very helpful in the constructive appraisals of websites, picking out what works and what doesn’t with a range of different sites. The best designs site is also great for a long list of very stylish websites in a range of different areas.

Here are some home pages and second pages and some comments on what makes them stand out. I intend to apply some of the more successful attributes of the better sites to my redesign. Consequently, I am looking at a range of sites, some with the emphasis on images, some on illustrations and some on more grungey/earthy approaches. I will also be looking at the placement and style of logos, choice of typefaces, emphasis on call to action (how many click here buttons, size of social media buttons, contact info etc), amount of text and the overall feel.