As the previous transparent labels were illegible, white labels were selected in order to develop contrast.
Tuesday, 8 May 2018
Final pieces (mock ups)
Mock-ups were developed of the final pieces in order to promote a real-life context. In turn, showcasing how the final pieces would be formatted.
As the previous transparent labels were illegible, white labels were selected in order to develop contrast.
As the previous transparent labels were illegible, white labels were selected in order to develop contrast.
Wednesday, 2 May 2018
Visuals for portfolio
- still mock ups were developed for social media/print portfolio pieces
- a video mock up was developed to showcase a professional finish, this could be evidenced through a digital portfolio/website.
Testing the design for mobile
Small alterations were made so that the website would be viable on a mobile. Although the main platform will be accessed via a computer, it is essential that there is mobile access, ensuring that all women can access the platform.
In the above example, the text was altered in order to visually mimic the website, ensuring continuity.
- Appropriate type size was added to the mobile device
- consistency was met with similarities being drawn from the website
- The bold colours were further implemented
Tuesday, 1 May 2018
Handing over my designs to an app developer-research
How to hire a programmer to make your ideas happen?
1. Reduce your big idea to “Version 1.0”.
Dream the big dream of everything your site/service/company might be some day, and write it all down.But then think of the bare minimum that would make you happy, and people would find useful. What are the three most essential features? What is the most essential feature?Call this Version 1.0. Save the rest for later. No need to even tell people about the rest unless they’re really really interested.A programmer is much more likely to say, “I can do that!” to this simple version.Your goal here is just to get Version 1.0 built. That, alone, will be a huge accomplishment. Everything below is describing only Version 1.0.
2. Write a simple overview of what it does.
Again, remember: only describe Version 1.0. Stop there. The big version is written down somewhere else.Leave off all details that the programmer doesn’t need to know.For example: If you want to sell videos, you don’t need to say what’s in the videos. Just “sell downloadable and streamable video files.” If you want the site to translate ancient Arabic poetry to Spanish to increase global tolerance, just say, “Translate paragraphs from Arabic to Spanish.”Be succinct. Programmers love that.Include people in a story, using the terms you use.For example: “A company creates an account, then creates a new project with a title and description. In the project, they upload multiple documents to be translated. Each document has a from-language, to-language, and a name. The system counts how many words are in each document. When the company marks the project as ready, it is announced to the translators. The announcement shows how many documents, how many words, and a price. The translator rejects or approves. They log in to translate the documents, one at a time, marking each finished when done, which sends the file back to the company for review.”
From this, the programmer will look for nouns and verbs, so start to think in those terms to help you communicate better. A programmer would see: Company, Project, Document, Translation, Translator, etc.
3. Write a detailed walk-through of every click.
Close your eyes and imagine yourself using the site.Describe every thing you can click on the first page.What happens when you click it? Exactly what did the system do? What happens next?Start to think in IF-THEN branches. For example: “If it’s a new user, it takes them to this welcome page.” “If they’ve been here before, it takes them to their account page.” “If it asks for a number, but they type a word, send them back to the same page but with a message.”In a text file, write down every thing you know this Version 1.0 needs to do. Every click. Every action. A long list of small simple things.
1. Reduce your big idea to “Version 1.0”.
Dream the big dream of everything your site/service/company might be some day, and write it all down.But then think of the bare minimum that would make you happy, and people would find useful. What are the three most essential features? What is the most essential feature?Call this Version 1.0. Save the rest for later. No need to even tell people about the rest unless they’re really really interested.A programmer is much more likely to say, “I can do that!” to this simple version.Your goal here is just to get Version 1.0 built. That, alone, will be a huge accomplishment. Everything below is describing only Version 1.0.
2. Write a simple overview of what it does.
Again, remember: only describe Version 1.0. Stop there. The big version is written down somewhere else.Leave off all details that the programmer doesn’t need to know.For example: If you want to sell videos, you don’t need to say what’s in the videos. Just “sell downloadable and streamable video files.” If you want the site to translate ancient Arabic poetry to Spanish to increase global tolerance, just say, “Translate paragraphs from Arabic to Spanish.”Be succinct. Programmers love that.Include people in a story, using the terms you use.For example: “A company creates an account, then creates a new project with a title and description. In the project, they upload multiple documents to be translated. Each document has a from-language, to-language, and a name. The system counts how many words are in each document. When the company marks the project as ready, it is announced to the translators. The announcement shows how many documents, how many words, and a price. The translator rejects or approves. They log in to translate the documents, one at a time, marking each finished when done, which sends the file back to the company for review.”
From this, the programmer will look for nouns and verbs, so start to think in those terms to help you communicate better. A programmer would see: Company, Project, Document, Translation, Translator, etc.
3. Write a detailed walk-through of every click.
Close your eyes and imagine yourself using the site.Describe every thing you can click on the first page.What happens when you click it? Exactly what did the system do? What happens next?Start to think in IF-THEN branches. For example: “If it’s a new user, it takes them to this welcome page.” “If they’ve been here before, it takes them to their account page.” “If it asks for a number, but they type a word, send them back to the same page but with a message.”In a text file, write down every thing you know this Version 1.0 needs to do. Every click. Every action. A long list of small simple things.
Start to think of the exact wording of what you want it to say, but save that somewhere else. Don’t clutter this list with wording.The goal is to keep this long list of actions very clear and simple, so that a programmer can see it, and see that each step is easy. For them it should be like eating chips, not an elephant.
4. Explore wireframes to allow repeat patterns to be used.
From this information key factors have been highlighted, these including:
- What are the three most essential features?
- What is the most essential feature?
- The target audience is irrelevant to the app developer, they cannot change only develop.
- Simple over view of what the programme does
- Detailed walk through of every click
Finals
The final variations explore a bold, contemporary colour palette, whilst highlighting a minimalist layout. The imagery used has been developed by female creatives, in turn promoting those who are often not highlighted. A range of individuals work has been used, ensuring that there is no bias towards white women.
Shapes have been used in order to make the piece more visually interesting and to further comply with contemporary design trends. To promote contrast white text has been used, ensuring information is clear to read. RGB considerations have also been met.
CAD Variations
LANDING PAGE
- bold and bright style
- iconography selected is developed by females-further showcases the work
- an about section was highlighted in order showcase the intentions of the interface.
- bold colours were used to allow each individual section to stand out
- colours relate to each section
- buttons added to direct the consumer
- the imagery used embeds women within the creative industry
- a footer has been added in which holds key information surrounding the brand
- links to email have been applied
example
- example as to how the scroll may look upon the homepage
- bold colours allow the design to stand out
JOB SECTION
- On the task bar a job section will be highlighted
- initial page, allowing the consumer to search for a job role
- secondary page (scroll)
- PEER FEEDBACK-add location search
- clear hierarchy
- further link to see the full employment advert
- blue used as a calming agent
- lets people apply
- link to client website?
- clear, minimal layout
- pop up section that appears after you click apply
- fun, engaging design-inviting
BLOG SECTION
- green-positive
- interviews with creatives is featured
- scroll doen-multiple elements
- copywriting example
- link to full article-more engaging to the young consumer
PORTFOLIO SECTION
- basic introduction
- allows you to submit relevant details
AGONY AUNT
- you are able to ask the creative agony aunt anything
- submit through simple upload system
- pop up saying once you have submitted.
SELF HELP SECTION
- large type-visually engaging
- catchy slogans
- again when submitted a different banner pops up.
- imagery selected is created by female creatives-ensuring they gain recognition.
Thoughts/Feedback:
- shapes are much more decorative/effective
- the new colour variations are stronger than the previous
- consistency is made throughout
- keep to flush left??-I don't agree with this
- transitions just need to be perfected (makes it easier for the consumer to navigate)
Building a design style
Landing page
Job section
- Block colours are impactful
- sections divided by colour
- colours relate to the topic area
- Typefaces remain the same throughout keeping consistency
- type size is a minimum of 18pt to comply to screen viewing regulations
- Obvious grid systems (allows information to be clearly contained)
- Scroll elements coincide with one another
- As a whole, it is clear that the colour palette works well with clear divisions being made
- The colours are also uplifting, creating a positive atmosphere
- Images will be large to promote there impact
Wireframes
Wireframes were developed as these are essential within industry when working alongside coders.
Simple layouts have been devised in order to ensure that the website is clean and easy to navigate, two factors in which are essential to that of the intended demographic. Large scale images have been applied in order to relate to prior feedback. In further discussion with my peers, they suggested that it may be visually interesting if a range of block colours are implemented, ensuring that the experience is engaging for the consumer.
Above is an explanation as to how the wireframes may interact with one another although all web pages are easily accessible via the taskbar. Colours were implemented relating to the previous feedback given with the colour palette focusing on bold, uplifting hues.
Peers suggested that the wireframes are clear and concise, whilst further stating that block colours create clear divisions between sections and allow information to stand out. Peers suggested that a video may be a good way in which to showcase the workings of the website.
Landing page variations
Layouts were developed showcasing ways in which the structure of the landing page may be formatted. This mainly focused on type and image arrangement, promoting legibility as a key factor.
As the images presented will promote female creatives work it was decided that larger scaled images would be most impactful. It was also highlighted by peers that bigger images are more effective for interface design (due to different scales via phone/web). It was also highlighted by peers that a brief description should be implemented, possibly within an about section.
In terms of the designs above colour palette will be explored in order to formulate an eye-catching design.
Brand logo
In order to presnet the website as a brand, a logo was devised.
A range of designs were developed showcasing the ways in which the logo may be formulated. Thicker strokes felt most effective, as they stood out and showcased the bold, independent nature of female creatives.
A range of designs were developed showcasing the ways in which the logo may be formulated. Thicker strokes felt most effective, as they stood out and showcased the bold, independent nature of female creatives.
A variety of type designs were developed with the original name being explored. The variations highlight certain components of the text ensuring that the relevant information stands out. A san serif was used in order to promote a contemporary design trend.
Due to feedback by fellow peers, the name was changed as they suggested that 'un-edited' would relate more to the desired brand image.
Heavy typography was explored in order to create impact and showcase the bold, impactful nature of female creatives. The favoured designs explored type over two lines as this appeared the most visually intresting. This also relates to visual design trends in which may be influential to the consumer.
Subscribe to:
Posts (Atom)