22
Leonie Winson Web Designer www.lineandform.co.uk [email protected] Twitter: @leoniejane Check out my portfolio

Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

  • Upload
    others

  • View
    10

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Leonie Winson Web Designer

[email protected]

Twitter: @leoniejane

Check out my portfolio

Page 2: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

The Highlights

The following pages highlight different types of work I have done.

Page 3: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Working for M360

• Custom WordPress plugins that interact with WordPress functionality but also build there own data structures for more complex data manipulation.

• Plugin to all search and requirement match for a property company in Nottingham.

• Video demonstration of some of the custom plugin for admin systems -https://drive.google.com/a/m360.co.uk/file/d/0B3SZ-lTIYRR1WFhucFkwYXhrSFU/view?pref=2&pli=1

Page 4: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Producing a new Quotes and job management sytem

• Constructed using Laravel, PHP, Jquery, MySql.

Page 5: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Professional process using modern frameworks and design techniques

Page 6: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Custom designs and WordPress themes

Built with a html prototype using the Bootstrap responsive framework and thenconverted into a custom WordPress theme.

Page 7: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Versatile layouts that work with content and support consitency

and branding.

Creating consistent layouts and branding across websites, while still giving editors and authors versatile templates. Using PHP coding and plugins like Advanced Custom Fields.

Page 8: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

EEC construction

Built using a html prototype using the Bootstrap responsive framework and thenconverted into a custom WordPress theme.

Page 9: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

EEC construction

We created custom post types for projects to specify the types of content needed. Making it easier to filter content and reuse in different sections without obvious duplication.

Page 10: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Historians on Teaching

With over 250 videos it was important that the videos could be filtered in multiple ways. The design needed to be clean and easy to navigate. We worked through a series of wireframes and pencil sketches with the client to come up with layouts and structure.

Storyboards were created using WireframeSketcher: http://wireframesketcher.comExamples can be found at: http://www.lineandform.biz/history/NewStoryboard.html#1Items in yellow denote active links to show sub pages rather than design features.

Page 11: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Historians on Teaching

Wireframes were a great way to concentrate on the functionality and not worry about the design until we were ready.http://www.historiansonteaching.tv/

Page 12: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Custom Posts to create interactive Layouts

An interactive periodic table that links to products and can be easily updated by client. http://www.prometheanparticles.co.uk/Products-and-Formulation/periodic-table/

Page 13: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Manage and develop the Observatree website

Includes a volunteer area using BuddyPress and produced training video.https://www.youtube.com/watch?v=nAoCufXKHxs#action=share

Page 14: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Observatree: Youtube video created for training

You can find the video online at:https://www.youtube.com/watch?v=nAoCufXKHxs#action=share

Page 15: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Line and Form

Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme. I’m not a big fan of sliders. So instead I have used a simple animation on the computer screen and

multiple rollover effects on different parts of the page.

Page 16: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Line and Form

.

The cartoons were popular and I needed to keep the same logo. I had definite elements I wanted to incorporate in the new design. I purposelychose not to have a slider this time around, but I did want

some animation in the header. After some experimentation, or skilful design decisions, depending on your point of view, I came up with a series of interactive elements.

The header includes a talking computer screen animation. I made the cartoons grey-scale, but if you mouse over them they change to full colour.

I wanted the front-page to feel interactive but still have a cleanness about it. Hopefully the new design achieves that.

Page 17: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Glenfield Primary School term backgrounds for front page

.

Page 18: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Glenfield Primary School term backgrounds for front page

.

Page 19: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Expert in WordPress install and security

Check out recent blog post for details.Some tips to help keep your website securehttp://lineandform.co.uk/keeping-website-secure/

How to make your WordPress website fasterhttp://lineandform.co.uk/making-faster-wordpress-websites/

Page 20: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Ecommerce websites

For ecommerce websites I use OpenCart. Here are 2 examples: www.peggyjane.co.uk and www.arumliliedesigns.co.uk

Page 21: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

Manuals and Workbooks

I produce manuals and training material to make it easy for my clients to update their own content. http://lineandform.co.uk/training-support-and-mentoring/

Page 22: Leonie Winson Web Designer - lineandform.co.uk · Line and Form Responsive website built as a html prototype using the Bootstrap framework then converted into a custom WordPress theme

More can be found on my website at: http://www.lineandform.co.uk

You can follow me on twitter at:https://twitter.com/#!/leoniejane

Contact me via email:[email protected]